Hello all, hope everyone is settling nicely into Writer's Realm.
Today I've brought for you, several simple codes that you can use you edit your profile with. Hang tight while we wait for ning to update; then we will have full customization on our profiles! Until then, you can enter these in the "Profile Style" Section located My Page > Options > Edit Profile > Profile Style. I will be updating this every so often so be sure to check in!
1. Changes the background of your profile! : Don't forget to delete anything I've typed in red or the code will not work!
/* background of page */
body{
background-color: transparent !important;
background-image:url(Paste your own image url here! Keep the parenthesis) !Important;
background-repeat: no-repeat !important;
background-size: 100% 100% !Important; [If you want to change the size of your background, don't be afraid to play with these values. ]
background-position: center center !important;
}
2. Hides Social buttons. Ever wanted to hide those pesky Like buttons and google buttons at the top? Well here's the code for it!
/* Hides Social Buttons */
.banner-socialActions{
display:none !Important;
}
3. Hides the friends list section from your profile
/* Hides Friends List */
.section-member-friends{
Display: none !Important;
}
4. Hides the recent activity feed on your profile!
/* hides recent activity */
.section-member-activity{
display: none !important;
}
5. Hides the discussion section on your profile!
/* Hides your blog posts on your profile */
.section-member-discussionEntries{
display:none !important;
}
6. Hides photo section on your profile!
/* hides photos on profile */
.grid-frame.sheet.section-member-photoEntries{
display:none !Important;
}
7. Hides the blog entry section on your profile!
/* hides blog section on profile */
.section-member-blogEntries{
display:none !important;
}
8. This code will 'edit' your middle column section (Where the comment section and all the player's information is)This code was a bit tricky but its complete! This may not look that great unless you've done all the codes listed above. Of course you can change the values ie; width and left to whatever you'd like. (For advanced coders and non-coders alike: Do NOT change the Max-width: 90% !important; section. This is what makes the code responsive meaning it will work properly for small screens and mobile. With out this only certain people will be able to view your profile column properly. Feel free to play with any other values though!)
/* center column */
.span12.push4.tablet16.mobile16.column.column-wide{
width: 1250px !important;
max-width: 90% !important;
left: 5% !important;
position: relative !Important
}
9. This code will remove your banner section. (The area where you can put a picture, your profile picture is on this). This will add a cover photo, much like ning 2.0. Many users here are used to that. Remove any text in red below or the code will NOT work. These are simply my tips and tricks for you :)
/* Header Picture */
.banner-header{
width: 100% !Important; Keep this as is, it centers the picture on your profile.
height: 500px !Important; This is flexible depending on how big or small you'd like your picture to be.
background-image:url(Place your image url here. Note: If you don't want a header picture simply leave this blank) !Important;
background-repeat: no-repeat !important;
background-position: center !Important;
background-size: 70% 100% !important; Feel free to change these, it will change the size of your image. Note if you use pixels, your picture will NOT be responsive in mobile. % makes things responsive on smaller screens so that it still looks good.
}
.banner-frame { border-radius: 50px; border-color: white; border-width: 0px; background-color: transparent !important;
}
.banner-box{
display:none !Important; Remove this if you want to keep your profile picture visible.
}
10. Hide's the "Writer's Realm" logo on your profile. Pretty self explanitory.
/* Hides Site name */
.site-nameLogo{
display:none !Important;
}
___________________________________________
Here is a simple template for new comers with most to all these codes combined.
Comments
need a little help, this didn't work in my sid :(
It's a typo from a previous Ning update, here's this:
.site-nameLogo{ display:none !Important; }
Good stuff
https://monosnap.com/file/cLrYEoBpKUA3rnr1NktIIGkXDC6ihr
When you are pasting your codes. Make sure you are clicking the html button in the top right of the box first. This should work.
Would you mind sending me a screenshot via PM? I'm having a bit of a hard time understanding what it is you mean.
I would suggest looking in the 'Coders Unite' group for if anyone has posted there. If not, then feel free to throw it in the Global comment section and maybe someone's hoarding the answer
Looks like you got it working. Lemme know if you need anymore help.
|. The banner removal. Is that only removing the banner and keeping the profile picture or does it remove both the profile picture as well as the banner?
Would anyone know how to code the text in your comments section to be a different color? Currently searching for away to make it black instead of the greyish white.