Simple CSS for your profile!

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 */
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 */
display:none !Important;


3. Hides the friends list section from your profile

/* Hides Friends List */
Display: none !Important;


4. Hides the recent activity feed on your profile!

/* hides recent activity */
display: none !important;


5. Hides the discussion section on your profile!

/* Hides your blog posts on your profile */
display:none !important;


6. Hides photo section on your profile!

/* hides photos on profile */
display:none !Important;


7. Hides the blog entry section on your profile!

/* hides blog section on profile */
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 */
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 */
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;

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 */
display:none !Important;


Here is a simple template for new comers with most to all these codes combined.

E-mail me when people leave their comments –

You need to be a member of Writer's Realm - Roleplay to add comments!

Join Writer's Realm - Roleplay


  •  need a little help, this didn't work in my sid :(

  • This reply was deleted.
    • It's a typo from a previous Ning update, here's this:

      .site-nameLogo{ display:none !Important; }


  • This reply was deleted.
  • This reply was deleted.

      Monosnap screenshot tool for Mac and PC with own cloud storage. Take screenshots, record videos and upload files directly to the cloud. Just in one c…
    • 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.

  • This reply was deleted.
    • 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


  • This reply was deleted.
    • 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. 

This reply was deleted.