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

CJ Coster posted a discussion
Hello, Believe it or not, we started when Ning, was just formed. We are back now and want to hack…
4 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"possible to fix it this way? is an example of a 2.0 site"
12 hours ago
Bizz replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"There is an error in the code, sorry about that it should be like this
.xg_list_video_main .tb…"
17 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"the groups are now perfect, the videos to the usual situation"
yesterday
Pedro Henrique Cordeiro Bonnet shared their discussion on Facebook
yesterday
Bizz posted a discussion
Here is an updated tip as seems some things have changed since last time I posted that last tip.You…
yesterday
Bizz replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"/** VIDEOS LIST **/
.xg_list_video_main ul li { width: 100%;}
.xg_list_video_main .tb…"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"Bizz 
the data is always the same, enter quietly, thanks in advance"
yesterday
Rosas † Negras replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
yesterday
Bizz replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"Need a link to the site to see what the issue is."
yesterday
Rosas † Negras posted a discussion
Wednesday
Slawku Kluz updated their profile
Monday
More…

Meanwhile, you can check our social media channels