Current status of the Ning Platform is always available on the Ning Status Blog.

THE CODE ETC BELOW CAN BE FOUND ALSO ON MY SITE IN A BLOG PAGE AND ALSO SOME IMAGES OF THE THEME STYLES. You may find it easier to copy the code etc from there

 

 

You may have noticed these blogs about having different profile themes that your members can choose from and also by going to these two profiles you can see that each member has a different theme for their page. Also there are options for selecting a bigger profile cover and also for the page width as well.

https://jr-images.ning.com/members/bizz

https://jr-images.ning.com/members/HarleyQuinn

The first profile for Bizz has a custom Game Of Thrones theme, this is NOT included in this code below as it's a custom theme I built and so requires a lot more code and setup but it does give you an example of what can be done. The second profile Harley Quinn is one of the themes in the code. The themes provided uses the background images etc that are provided in Nings site themes so you should all have those available and so requires no additional image installation.

The code allows you to be able to add your own custom themes or adding additional ones in the I create and add the code for for you to copy, you will see in the jquery custom code some lines which state EMPTY-Theme and this is where you would add any new themes. This will be explained when I add new themes but by looking at the code you should get a good idea of how it works.

As this is a way for members to choose a theme in their profile page we are going to utilise the profile questions section to do this. The code hides these questions on signup and your default site theme is used until the member goes to their profile page to edit their profile and then can will be able to see the choices as in the image below

8226456065?profile=RESIZE_710xSo how do we add this to your site, well let's begin.

PLEASE NOTE: As their are so many variations of what Ning site can be setup like in design you may need to adjust some of the css for the Themes Designs. I did try to test as much as I could with all the standard Ning themes to try and get them as best I could without having to adjust the css though.

1. ADD CODE TO YOUR SOCIAL SITE MANAGER CUSTOM CODE END OF PAGE SECTION

 

<script>
// ADD CLASSES TO THE QUESTIONS IN ABOUT
x$(document).ready(function(){
// SIGN UP FORM HIDE THESE QUESTIONS
x$('.sign_form_p2 .label__text:contains("Theme-Options")').closest('.form-field').addClass('signUp-customQuestion');
x$('.sign_form_p2 .form-field.signUp-customQuestion').nextAll('.form-field').addClass('signUp-customQuestion');
x$('.sign_form_p2 .form-field.signUp-customQuestion').hide();
x$('.aboutMember .aboutTab-question:contains("Theme-Options")').closest('.aboutTab-questionAndAnswer').addClass('customQuestion-Start customQuestion');
x$('.aboutTab-questionAndAnswer.customQuestion-Start').nextAll('.aboutTab-questionAndAnswer').addClass('customQuestion');
x$('.aboutTab-questionAndAnswer.customQuestion').hide();
x$('.profileQuestionForm #settings-form .form-field > label:contains("Theme-Options")').closest('.form-field').addClass('customQuestion-Start customQuestion');
x$('.form-field.customQuestion-Start').nextAll('.form-field').addClass('customQuestion');
x$('.profileQuestionForm #settings-form .customQuestion').show();
});
</script>

<script>
x$(document).ready(function() {
// ADD THEME NAME IN EMPTY-THEME
x$('p.aboutTab-answer:contains("Dark-Theme")').closest('body').addClass('Dark-Theme');
x$('p.aboutTab-answer:contains("Purple-Theme")').closest('body').addClass('Purple-Theme');
x$('p.aboutTab-answer:contains("CoolBlue-Theme")').closest('body').addClass('CoolBlue-Theme');
x$('p.aboutTab-answer:contains("Rose-Theme")').closest('body').addClass('Rose-Theme');
x$('p.aboutTab-answer:contains("Gamer-Theme")').closest('body').addClass('Gamer-Theme');
x$('p.aboutTab-answer:contains("EMPTY-Theme")').closest('body').addClass('EMPTY-Theme');
x$('p.aboutTab-answer:contains("EMPTY-Theme")').closest('body').addClass('EMPTY-Theme');
x$('p.aboutTab-answer:contains("EMPTY-Theme")').closest('body').addClass('EMPTY-Theme');
x$('p.aboutTab-answer:contains("EMPTY-Theme")').closest('body').addClass('EMPTY-Theme');
// THEME CHOICES PROFILE PAGE SIZE
x$('p.aboutTab-answer:contains("Small-768px")').closest('body').addClass('memberThemeSize-Small-768px');
x$('p.aboutTab-answer:contains("Small-864px")').closest('body').addClass('memberThemeSize-Small-864px');
x$('p.aboutTab-answer:contains("Medium-960px")').closest('body').addClass('memberThemeSize-Medium-960px');
x$('p.aboutTab-answer:contains("Big-1120px")').closest('body').addClass('memberThemeSize-Big-1120px');
x$('p.aboutTab-answer:contains("Large-1280px")').closest('body').addClass('memberThemeSize-Large-1280px');
x$('p.aboutTab-answer:contains("Full-Screen")').closest('body').addClass('memberThemeSize-Full-Screen');
// THEME CHOICES PROFILE COVER SIZE
x$('p.aboutTab-answer:contains("Medium Size 350px")').closest('body').addClass('memberThemeCover-medium');
x$('p.aboutTab-answer:contains("Big Size 500px")').closest('body').addClass('memberThemeCover-Big');
x$('p.aboutTab-answer:contains("Large Size 800px")').closest('body').addClass('memberThemeCover-Large');
});
</script>

 

2. ADD CSS TO YOUR DESIGN STUDIO CUSTOM CSS

 

/*************************************************** THEMES START *****************************************/
/*** PROFILE FORM EDIT WIDTH **/
.profileQuestionForm{
max-width:1100px;
margin:0px auto;
}
.customQuestion-Start{ margin-top:50px;}
.customQuestion-Start::before {
content: "Profile Page Settings";
display: block;
position: relative;
border-bottom: solid 4px lightgrey;
margin-bottom: 30px;
padding: 0px 0px 10px 0px;
font-size: 1.2rem;
}
.profileQuestionForm .form1 .customQuestion{
margin-top:30px; margin-bottom:40px;
}
.profileQuestionForm .form-actions{
margin-top: 50px;
}


/****************** PROFILE PAGE THEME SIZES ***********/

/* Default width just removes all the classes to return to default size set */
/*Small 768px */
.memberThemeSize-Small-768px .site-bodyFrame{
max-width:768px;
margin:0px auto;
}
.memberThemeSize-Small-768px .column-wide{
width:100%;
}
.memberThemeSize-Small-768px .column-narrow{
width:100%;
}
@media only screen and (min-width:769px){
.memberThemeSize-Small-768px .content-body .pull8{ left:0!important}
.memberThemeSize-Small-768px .content-body .span8{ width:100%!important}
.memberThemeSize-Small-768px .content-body .push4{ left:0!important }
}
/* Small 864px */
.memberThemeSize-Small-864px .site-bodyFrame{
max-width:864px;
margin:0px auto;
}
.memberThemeSize-Small-864px .column-wide{
width:100%;
}
.memberThemeSize-Small-864px .column-narrow{
width:100%;
}
@media only screen and (min-width:769px){
.memberThemeSize-Small-864px .content-body .pull8{ left:0!important}
.memberThemeSize-Small-864px .content-body .span8{ width:100%!important}
.memberThemeSize-Small-864px .content-body .push4{ left:0!important }
}
/* Medium 960px */
.memberThemeSize-Medium-960px .site-bodyFrame{
max-width:960px;
margin:0px auto;
}
@media only screen and (min-width:769px){
.memberThemeSize-Medium-960px .content-body .pull8{ left:0!important}
.memberThemeSize-Medium-960px .content-body .span8{ width:70%!important}
.memberThemeSize-Medium-960px .content-body .push4{ left:0!important }
.memberThemeSize-Medium-960px .content-body .span4{ width:30%!important }
}
/* Big 1120px */
.memberThemeSize-Big-1120px .site-bodyFrame{
max-width:1120px;
margin:0px auto;
}
/* Large 1280px*/
.memberThemeSize-Large-1280px .site-bodyFrame{
max-width:1280px;
margin:0px auto;
}
/* Full Width*/
.memberThemeSize-Full-Screen .site-bodyFrame{
max-width:100%;
margin:0px auto;
}
.memberThemeSize-Full-Screen .site-body.container{
width: 100%!important;
}
.memberThemeSize-Full-Screen .site-body{
padding: 10px;
}
.memberThemeSize-Full-Screen .site-header{
width: 100%;
}
.memberThemeSize-Full-Screen .site-header .container{
width: 100%;
}
.memberTheme-gamerTheme.memberThemeSize-Full-Screen .site-bodyFrame{
max-width:100%!important;
}
/********** PROFILE PAGE COVER IMAGE SIZES **********/

.banner-overlay::before { display: none }
@media only screen and (min-width:769px){
.memberThemeCover-medium .profileCoverArea{
height: 350px;
}
.memberThemeCover-Big .profileCoverArea{
height: 500px;
}
.memberThemeCover-Large .profileCoverArea{
height: 800px;
}
}


/****************** THE THEMES*************/
.profileCoverArea-requestNotice {
color:black;
background-color:white;
}

/**THEME 1 DARK THEME **/
body.Dark-Theme, body.Dark-Theme::before{
background-color: #404040;
background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/8678992?profile=original")!important;
background-attachment: fixed;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.Dark-Theme .site-body{
background-color: transparent;
}
.Dark-Theme .site-body .sheet, .Dark-Theme .banner-frame{
background-color: #535353;
}
.Dark-Theme .site-body.container .button.button-primary, .Dark-Theme .site-body.container .button.button-iconic{
background-color: darkslategray;
color: bisque;
border-color: cornsilk;
}
.Dark-Theme .site-body.container .button.button-primary:hover, .Dark-Theme .site-body.container .button.button-iconic:hover{
background-color: #880a2d;
cursor:pointer;
}
.Dark-Theme .comments-timestamp { color: #bdbdbd;}
.Dark-Theme .site-body{ color:white }
.Dark-Theme .site-body a{ color:gold }
.Dark-Theme .site-body a:hover{color:orange }
.Dark-Theme .module-name{ color: #e6d993 }
.Dark-Theme .optionsDropdown-button{ color:#c4c0c0;background-color:#373737 }
.Dark-Theme .optionsDropdown-list{ background-color: #513d3d; }
.Dark-Theme .optionsDropdown-sectionLabel span {color: #ecebeb; background-color: #4a2a2a;}
.Dark-Theme .optionsDropdown a:hover{ color:#dfded8!important}
.Dark-Theme .subnavline > li > span { color:#b1b1b5 }
.Dark-Theme .subnavline > li:hover > span, .Dark-Theme .subnavline > li.current > span { color:#e6d993; border-bottom-color:#727b84 }

/****** END DARK THEME ***/

/****THEME 2 PURPLE THEME ****/
body.Purple-Theme, body.Purple-Theme::before{
background-color: #404040;
background-image: url( "https://storage.ning.com/topology/rest/1.0/file/get/8250997?profile=original")!important;
background-attachment: fixed;
background-position: top right;
background-size: cover;
background-repeat: no-repeat;
}
.Purple-Theme .site-body{background-color: transparent;}
.Purple-Theme .site-body .sheet, .Purple-Theme .banner-frame{ background-color: #291a3e;}
.Purple-Theme .site-body.container .button.button-primary, .Purple-Theme .site-body.container .button.button-iconic{
background-color: #25406a; color: bisque; border-color: #c2b5c8;}
.Purple-Theme .site-body.container .button.button-primary:hover, .Purple-Theme .site-body.container .button.button-iconic:hover{
background-color: #880a2d;}
.Purple-Theme .comments-timestamp {color: #b99f80;}
/*Like Button*/
.Purple-Theme .site-body .likeButton > a{ color: lightgrey }
.Purple-Theme .site-body .button-tiny.likeButton > a{ font-size:14px }
.Purple-Theme .site-body .button-tiny.likeButton > a:hover{ color: pink!important; }
.Purple-Theme .site-body.container .button-tiny a:hover, .Purple-Theme .site-body.container .button-tiny a.is-selected { background-color:transparent }
.Purple-Theme .site-body.container .button-tiny a:hover, .Purple-Theme .site-body.container .button-tiny a.is-selected {
color:salmon;
}
.Purple-Theme .site-body.container .button-tiny a{ border:none }
.Purple-Theme .site-body{ color:#b99f80; }
.Purple-Theme .site-body a{ color:#6ddbcf }
.Purple-Theme .site-body a:hover{color:#1594c6; text-decoration:underline }
.Purple-Theme .module-name{ color: #dcdcdc; /* gainsboro */ }
.Purple-Theme .optionsDropdown-button{ color:#d2c6c8;background-color:#291279 }
.Purple-Theme .optionsDropdown-list{ background-color: #545e95; }
.Purple-Theme .optionsDropdown-sectionLabel span {color: #ecebeb; background-color: #4a2a2a;}
.Purple-Theme .optionsDropdown a{color: #e3c4c4 }
.Purple-Theme .optionsDropdown a:hover{ color:#d8dfa8!important}
.Purple-Theme .subnavline > li > span { color:#b99f80 }
.Purple-Theme .subnavline > li:hover > span, .Purple-Theme .subnavline > li.current > span { color:ivory; border-bottom-color:antiquewhite }

/******** END PURPLE THEME *****/

/**THEME 3 MEMBER THEME COOL BLUE **/

/*BACKGROUND IMAGE*/
body.CoolBlue-Theme, body.CoolBlue-Theme::before{
background-color: rgba(255,255,255,0.94);
background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/8698985?profile=original")!important;
background-attachment: fixed;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.CoolBlue-Theme .site-body{background-color: transparent;}
.CoolBlue-Theme .site-body .sheet{ background-color: #BBDBE8; opacity:0.9;}
.CoolBlue-Theme .banner-frame{background-color: #BBDBE8;}
/* TEXT */
.CoolBlue-Theme .site-body{ color: #1D3E4A; }
.CoolBlue-Theme .site-body a{ color: #1C2493 }
.CoolBlue-Theme .site-body a:hover{color: #176482; text-decoration:underline }
.CoolBlue-Theme .module-name{ color: #dcdcdc; /* gainsboro */ }
/*OPTIONS BOX*/
.CoolBlue-Theme .optionsDropdown-button{
color: #d2c6c8;
background-color: #1e7ca2;
}
.CoolBlue-Theme .optionsDropdown-list{ background-color: #079bbd ; }
.CoolBlue-Theme .optionsDropdown-sectionLabel span {
color: #ecebeb;
background-color: #4a2a2a;
}
.CoolBlue-Theme .optionsDropdown a{color: #d0f0fd; }
.CoolBlue-Theme .optionsDropdown a:hover{ color: gold!important;}
/*SUBNAV*/
.CoolBlue-Theme .subnavline > li > span { color: #176482; }
.CoolBlue-Theme .subnavline > li:hover > span{ color: #358C53; border-bottom-color:darkblue; }
.CoolBlue-Theme .subnavline > li.current > span { color: #176482; border-bottom-color:darkblue; }
/*BUTTONS*/
.CoolBlue-Theme .site-body.container .button.button-primary, .CoolBlue-Theme .site-body.container .button.button-iconic{
background-color: #6388c1!important;
color: #f4f1ec!important;
border-color: white!important;
}
.CoolBlue-Theme .site-body.container .button.button-primary:hover, .CoolBlue-Theme .site-body.container .button.button-iconic:hover{
background-color: #2a4671!important;
}
.CoolBlue-Theme a.profileCoverArea-messageButton, .CoolBlue-Theme a.profileCoverArea-followButton{
color:white!important
}
.CoolBlue-Theme a.profileCoverArea-messageButton:hover, .CoolBlue-Theme a.profileCoverArea-followButton:hover, .CoolBlue-Theme a.profileCoverArea-fullTextFriendButton:hover{ color:#fdd22c!important }
/*Like Button*/
.CoolBlue-Theme .site-body .likeButton > a{ color: #777bb3}
.CoolBlue-Theme .site-body .button-tiny.likeButton > a{ font-size:16px }
.CoolBlue-Theme .site-body .button-tiny.likeButton > a:hover{ color: pink!important; }
.CoolBlue-Theme .site-body.container .button-tiny a:hover, .CoolBlue-Theme .site-body.container .button-tiny a.is-selected {
background-color:transparent;
}
.CoolBlue-Theme .site-body.container .button-tiny a:hover, .CoolBlue-Theme .site-body.container .button-tiny a.is-selected {
color: darkred!important;}
.CoolBlue-Theme .site-body.container .button-tiny a{ border:none }

/**** END COOL BLUE ***/

/**THEME 4 ROSE THEME **/
body.Rose-Theme, body.Rose-Theme::before{
background-color: #fbfaf6;
background-image: url("https://static.ning.com/jr-images/widgets/shared/gfx/themes/v2/wedding/48582979-48582973-bg.png?xn_version=202005200547")!important;
background-attachment: scroll;
background-position: top left;
background-size: initial;
background-repeat: repeat;
}
.Rose-Theme .site-body{background-color: transparent;}
.Rose-Theme .site-body .sheet{
background-color: rgba(244,242,231,0.97);
}
.Rose-Theme .banner-frame{background-color: #f4f2e7;}
/* TEXT */
.Rose-Theme .site-body{ color: #686761; }
.Rose-Theme .site-body a{ color: #c47509 }
.Rose-Theme .site-body a:hover{color: #bda788; text-decoration:underline }
.Rose-Theme .module-name{ color: #4b4c4b;}
/*OPTIONS BOX*/
.Rose-Theme .optionsDropdown-button {color: #645356; background-color: #c6bb8f;}
.Rose-Theme .optionsDropdown-list { background-color: #d0bf97;}
.Rose-Theme .optionsDropdown a { color: #5e5d4f;}
.Rose-Theme .optionsDropdown a:hover { color: #8a8104;}
.Rose-Theme .optionsDropdown-sectionLabel span { color: #573f04; background-color: #a89960;}
/*SUBNAV*/
.Rose-Theme .subnavline > li > span { color: #a29e69; }
.Rose-Theme .subnavline > li.current > span{color: #6c6937;border-bottom-color: #887824;}
.Rose-Theme .subnavline > li:hover > span{ color: #828017; border-bottom-color: #959383;}
/*BUTTONS*/
.Rose-Theme .site-body.container .button.button-primary, .Rose-Theme .site-body.container .button.button-iconic {
background-color: #d7d6a6 !important;
color: #977b4c !important;
border-color: white !important;
}
.Rose-Theme .site-body.container .button.button-primary:hover, .Rose-Theme .site-body.container .button.button-iconic:hover{
background-color: #b9b88a!important; color:#644e2a!important;
}
.Rose-Theme a.profileCoverArea-messageButton, .Rose-Theme a.profileCoverArea-followButton{
color:white!important;
}
.Rose-Theme a.profileCoverArea-messageButton:hover, .Rose-Theme a.profileCoverArea-followButton:hover, .Rose-Theme a.profileCoverArea-fullTextFriendButton:hover{ color:#fdd22c!important }
/*Like Button*/
.Rose-Theme .site-body .likeButton > a{ color: salmon;}
.Rose-Theme .site-body .button-tiny.likeButton > a{ font-size:16px; }
.Rose-Theme .site-body .button-tiny.likeButton > a:hover{ color: pink!important; }
.Rose-Theme .site-body.container .button-tiny a:hover, .Rose-Theme .site-body.container .button-tiny a.is-selected {
background-color:transparent; }
.Rose-Theme .site-body.container .button-tiny a:hover, .Rose-Theme .site-body.container .button-tiny a.is-selected {
color: darkred!important;}
.Rose-Theme .site-body.container .button-tiny a{ border:none }

/*** END ROSE THEME ***/

/******THEME 5 GAMER THEME *****/
body.Gamer-Theme, body.Gamer-Theme::before {
background-color: #06072c;
background-image: url("https://static.ning.com/jr-images/widgets/shared/gfx/themes/v2/gaming/bg.jpg")!important;
background-attachment: fixed;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;
}
.Gamer-Theme .site-headerFrame {
background-color: rgba(165, 197, 0, 0);
background-image: url("https://static.ning.com/jr-images/widgets/shared/gfx/themes/v2/gaming/header.png");
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
.Gamer-Theme .site-body{background-color:transparent;border:none;}
.Gamer-Theme .site-header{background-image:none;}
.Gamer-Theme .site-header{min-height:60px;}
.Gamer-Theme .site-nameLogo{text-align:center;}
.Gamer-Theme .header-siteName{color:whitesmoke;}
.Gamer-Theme .site-bodyFrame{max-width:1280px;margin:0px auto;}
.Gamer-Theme .navbar{background-color: rgba(0, 0, 0, 0);border:none; position: relative;}
.Gamer-Theme .navbar span{color: rgba(255, 255, 255, 0.8);}
.Gamer-Theme .navbar a:hover span{color: rgba(40, 46, 83, 0.8);}
.Gamer-Theme .navbar a{background-color: rgba(54, 18, 185, 0.67);}
.Gamer-Theme .navbar a:hover{background-color: rgba(176,196, 222, 0.87);}
.Gamer-Theme .mainTab-item a{padding: 20px 35px 20px 35px;font-size:14px;}
.Gamer-Theme .mainTab-item{margin-right:10px;}
.Gamer-Theme .subnavline > li > span{color: rgba(255, 255, 255, 0.8);}
.Gamer-Theme .subnavline > li:hover > a,.Gamer-Theme .subnavline > li.current > a, .Gamer-Theme .subnavline > li:hover > span, .Gamer-Theme .subnavline > li.current > span {
color: #00a6eb; border-bottom-color: #00a6eb; font-weight: normal; text-decoration: none;}
.Gamer-Theme .banner-frame { border-radius: 0px; background-color: rgba(0, 0, 0, 0.67);}

@media only screen and (max-width:969px){
.Gamer-Theme .banner-info{float: none;}
}
.Gamer-Theme .sheet {
background-color: rgba(0, 0, 0, 0.67);
box-shadow: none;
border-radius: 0px;
padding: 24px 24px 24px 24px;
}
.Gamer-Theme .site-body a{
color: #00a6eb;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: none;
}
.Gamer-Theme .site-body a:hover{color:gold;}
.Gamer-Theme .module-name a, .Gamer-Theme .module-name {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-weight: bold;
font-style: normal;
text-decoration: none;
text-transform: uppercase;
color: #00a6eb;
text-align: left;
}
.Gamer-Theme .button.button-iconic,
.Gamer-Theme .button.button-primary,
.Gamer-Theme .button.activityFeed-updateButton.activityFeed-moreOldItemsButton {
background-color: #ff47cb;
color: #ffffff;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-transform: none;
}
.Gamer-Theme .button.button-iconic:hover,
.Gamer-Theme .button.button-primary:hover,
.Gamer-Theme .button.activityFeed-updateButton.activityFeed-moreOldItemsButton:hover {
background-color: #971973;
}
.Gamer-Theme .site-body{color: rgba(255, 255, 255, 0.8);}
.Gamer-Theme .optionsDropdown-button { color: #a4a4a4; background-color: #503d6c;}
.Gamer-Theme .optionsDropdown-list { background-color: #0e0f57;}
.Gamer-Theme .optionsDropdown a { color: #e8e8e8;}
.Gamer-Theme .optionsDropdown a:hover { color: #f1f908;}
.Gamer-Theme .optionsDropdown-sectionLabel span { color: #a4a4a4; background-color: #17150b;}
/*Like Button*/
.Gamer-Theme .site-body .likeButton > a{ color: salmon;}
.Gamer-Theme .site-body .button-tiny.likeButton > a{ font-size:16px }
.Gamer-Theme .site-body .button-tiny.likeButton > a:hover{ color: pink!important; }
.Gamer-Theme .site-body.container .button-tiny a:hover, .Gamer-Theme .site-body.container .button-tiny a.is-selected {
background-color:transparent
}
.Gamer-Theme .site-body.container .button-tiny a:hover, .Gamer-Theme .site-body.container .button-tiny a.is-selected {
color: darkred!important;}
.Gamer-Theme .site-body.container .button-tiny a{ border:none }

/**** END GAMER THEME ****/

 

3. SETUP YOUR QUESTIONS IN THE MEMBERS SIGN UP QUESTION SECTION

NOTE IMPORTANT: Please add these questions EXACTLEY as show in the images. It's best to add them after all your other sign up questions. You can add these in any order you want but I added mine as Theme Options first then profile page size then profile cover size.

THEME QUESTIONS

8226509492?profile=RESIZE_710x

PROFILE PAGE SIZE

8226513886?profile=RESIZE_710x

PROFILE COVER SIZE

8226514498?profile=RESIZE_710x

Well that's it for the setup and code. When adding new Themes at a later stage it's then just a matter of adding a new question choice in the theme options, then adding that name you have given into the empty theme section and adding your css for your theme. To add new Themes I provided it will be a matter of just adding the New Them into the question section and it's name into the empty theme and them simply copy the css I provide and alter if needed.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

    • Because you keep copying and pasting the themes then changing the code to a new theme you are copying over the error each time, take a look at the bottom of your themes and you will see you have an extra closing brace at the end of each theme which is braking the css. Look below at the part I copied and you will notice that closing bracket on it's own at the bottom, it should not be there. It's highlighted in bold

      .AutumnGothic-Theme .comments-timestamp {color: #000000;}


      }


      /**** END AUTUMN GOTHIC THEME ***/

      • Bizz 

        thank you so much ! I deleted all and left only 2 themes there are no more old themes as called by you, we hope that one day Ning will open the code dashboard also for members
        • no problem, I did correct some of your css and also in your other css you have some issues so corrected that as well.

           

  • @Bizz this works great, but if you wanted to change the backgrounds and things could you do that also?

    Wanted to add more Pagan like backgrounds and colors for my site?

    • You can change a background like this,

      Add a background to your file manager

      Once added copy the link url of that image from file manager

      Next in the theme css look for the one you want to change and  at the top of the Theme is the background image, so for instance in the dark theme it would be here, I highlighted the link to show it for you

      /**THEME 1 DARK THEME **/
      body.Dark-Theme, body.Dark-Theme::before{
      background-color: #404040;
      background-image: url("https://storage.ning.com/topology/rest/1.0/file/get/8678992?profile...")!important;

      To change the background you would replace the link with the one you copied from your file manager and insert it in the part which says ADD BACKGROUND LINK HERE then publish your css and it will be changed.

      NOTE: dont add the whole block of code again just change the link

       

      /**THEME 1 DARK THEME **/
      body.Dark-Theme, body.Dark-Theme::before{
      background-color: #404040;
      background-image: url(" ADD BACKGROUND LINK HERE ")!important;

       

       

      You can edit any of the colours in the theme css if you want by just replacing them with your own. I am in the process of making another version to make it easier to choose a background image etc, so for instance you could have a lit of background to choose from or they could add one of their own.

      Let me know if you get stuck

      Bizz :-)

      https://storage.ning.com/topology/rest/1.0/file/get/8678992?profile=original
This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Slawku Kluz updated their profile
yesterday
Bogdan Wrzesinski shared their discussion on Facebook
Sunday
Bogdan Wrzesinski liked Anastasia_Ning_Support's discussion Welcome to NING Referral Program!
Sunday
Bull Run Unitarian Universalists updated their profile photo
Sunday
Bull Run Unitarian Universalists updated their profile
Sunday
Elight Bags updated their profile
Friday
Steve Ewing replied to soaringeagle's discussion
high ranking high traffic guide
"This thread is almost 10 years old. What has changed since then?
 "
Thursday
Lea Bouillet replied to Lia's discussion
Need a Ning 2.0 site ASAP!
"Hi ! Lia...
I'm in the process Of trying to sell my Ning 2.0 before 01.20.2021...If interested just…"
Jan 13
Lia posted a discussion
Hi guys! I'm in desperate need of a Ning 2.0 site. I'll be paying through Paypal. Please hit me up…
Jan 12
Lia and ⚡JFarrow⌁ are now friends
NC for Hire
Jan 12
Stella Abud updated their profile
Jan 11
Bizz replied to Bizz's discussion
TIP: Resize Your Videos And Make then responsive. Applies to Video Pages And Groups Video Pages. Also Social Channels
"Yes it will only work with youtube etc and not uploaded videos. The reason is that uploaded videos…"
Jan 11
More…

Meanwhile, you can check our social media channels