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

  • This is Ning story! in about 15 years never seen an artist like you! thanks as you know I was waiting for this!

  • Bizz 8230134873?profile=RESIZE_930x

    the internal part of my Theme is not reset .. blame my codes?

    • they are your codes I just changed the side photo

    • It's because you have additional css in your site to add the background images, you will have to add some extra code to remove them in the themes, for instance for the cool blue you could try adding this

      .CoolBlue-Theme .site-body .sheet{ background-image:none!important }

      • 8233759279?profile=RESIZE_930x

        one is neutralized missing the second if it is possible
        • Once again you have to remove the image you have added so here is the code for that in the purple theme

          .Purple-Theme .site-body{ background-image:none!important }

          • 8233985484?profile=RESIZE_930xpurple should remain ... instead it disappears

            • use the code to remove the image and then look in the purple theme code for this line

              .Purple-Theme .site-body {
              background-color: transparent;
              }

              change it to this

              .Purple-Theme .site-body {
              background-color:#291a3e;
              }

              • 8234316888?profile=RESIZE_930x

                Thanks a lot ! perfect ! a question is it possible to work on Module Borders in px and color?
                • Yes you can, basically you would just add the theme name before the css so for the outside border you would write it like this and add what you want for the border. The settings shown below are what you have already for your borders so just change them to what you want.

                  .CoolBlue-Theme .site-body {
                  border-color: #eed255;
                  border-style: ridge;
                  border-width: 8px;

                  }

                  And for the others you would use

                  .CoolBlue-Theme .sheet {
                  box-shadow: none;
                  border-color: #c7c7c7;
                  border-style: outset;
                  border-width: 3px;
                  border-radius: 8px;

                  }

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

Cindy Dean Mccoy replied to AnGella's discussion
Slow and Painful 2.0 Death
"I migrated to Ning 3 in hopes to get better support.  It is better, but Ning 3 has some major…"
6 hours ago
AnGella updated their profile photo
7 hours ago
Bizz replied to AnGella's discussion
Slow and Painful 2.0 Death
"I'm curious to what is showing up, maybe it's something we could help out on here."
7 hours ago
AnGella replied to AnGella's discussion
Slow and Painful 2.0 Death
"I agree, if they will treat us like this on 2.0 they will do the same on 3.0.  I use Wordpress as…"
7 hours ago
⚡JFarrow⌁ updated their profile photo
7 hours ago
Nancy Marsh replied to AnGella's discussion
Slow and Painful 2.0 Death
"While support denies they're not supporting Ning 2.0 any longer, it's clear that there is no…"
8 hours ago
Nancy Marsh commented on Gerry Regan's blog post Ability to feature and unfeature lost, as is My Network page
"I would suggest finding another platform. Ning doesn't support Ning 2.0 any longer."
8 hours ago
Sharon aka Lady updated their profile
yesterday
Sharon aka Lady liked Chaz's profile
yesterday
Sharon aka Lady liked Rosas † Negras's profile
yesterday
Rosas † Negras updated their profile
yesterday
AnGella updated their profile
Friday
More…

Meanwhile, you can check our social media channels