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

FORUM

How I added Different Profile Theme Choices, Profile Page Size and Profile Cover Image Size Options For Members To Choose From

Posted by Bizz on November 29, 2020 at 6:37am in
Ning 3 Tips and Tricks

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

Tags: themes, profiles, profile page
★
★
★
★
★
Votes: 0
Email me when people reply –
Follow

Replies

  • Rosas † Negras December 3, 2020 at 12:36pm

    8245612278?profile=RESIZE_930x

    Rosas measures are 1060x271 these are your codes ... even if I increase I do not reach the desired width .. how do I do it?
    .CoolBlue-Theme .site-headerFrame {
    background-color: rgba(165, 197, 0, 0);
    background-image: url("https://st5.ning.com/topology/rest/1.0/file/get/8237809861?profile=original");
    background-size: cover-1060px;
    background-repeat: no-repeat;
    background-position: top center;
    • Bizz > Rosas † Negras December 3, 2020 at 2:04pm

      You can't write the background size like this   background-size: cover-1060px;  adding a pixel count will not work as a background size must either be wrote as cover , contain or intial. You can add a percentage size as well like this

      background-size: 100% 100%

      Add your image there and I will take a look at the weekend

       

  • Rosas † Negras December 4, 2020 at 1:37pm

    8249473079?profile=RESIZE_930xBizz 

    how do i delete Page Border top?
    • Bizz > Rosas † Negras December 4, 2020 at 4:37pm

      .Gamer-Theme .site-header{ border:none }

       

      • Rosas † Negras > Bizz December 5, 2020 at 12:58am

        thank you very much ... calmly I begin to understand how the enigma works :)

  • Rosas † Negras December 5, 2020 at 1:16am

    8250675860?profile=RESIZE_930xBizz 

    We have to lower the cover over the member's head and after each theme be able to juggle the TOP size of the photo ... what do you think? In my opinion it would be perfect
This reply was deleted.

Featured Discussions

Announcements

 

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 and ⚡JFarrow⌁ are now friends
NC for Hire
6 hours ago
NC for Hire
⚡JFarrow⌁ posted a discussion
Simple and Easy to Manage Horizontal News Ticker with CSS only
Way back in 2018, I shared this with you.  Tip: How to Add an Easy to Manage News TickerToday, I'm…
See More
14 hours ago
NC for Hire
⚡JFarrow⌁ replied to CJ Coster's discussion
Looking to Hire an Experienced Ning Developer
"Ill send you my contact info.. happy to help.."
15 hours ago
Rosas † Negras posted a discussion
CODES TO CHANGE CURSOR FOR EVERY THEMES 2.0 AND 3.0
/*cursor*/body, a, a:hover {cursor:url(HTML,BODY{cursor: url(HTML,BODY{cursor:…
See More
17 hours ago
Debbie Goode-Jones, Ted Harge, Donation Ngobeni and 17 more joined Ning Creators Social Network
14 more…
20 hours ago
CJ Coster posted a discussion
Looking to Hire an Experienced Ning Developer
Hello, Believe it or not, we started when Ning, was just formed. We are back now and want to hack…
See More
yesterday
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"
yesterday
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…"
yesterday
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"
Thursday
shared their discussion on Facebook
Moving All The Profile Options Into The Cover Drop Down
Thursday
Bizz posted a discussion
Tip: Adding YouTube Videos , Vimeo etc into the activity feed ( updated )
Here is an updated tip as seems some things have changed since last time I posted that last tip.You…
See More
Wednesday
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…"
Wednesday
More…

Meanwhile, you can check our social media channels