Blog

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 */
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 */
.header-siteName{
display:none !important;
}

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

Comments

  • this might be a dumb question, but how do i edit my css and preview the changes without having to save my profile? i copied the html onto visual studio and tried linking my own style sheet into the document, but i don't think the html file is acknowledging my style sheet. please forgive me, i took html/css four years ago and barely remember the basics :c 

    • oof of course i would find out the answer after i posted this. if anyone else is wondering and stumbles upon this:

      1. right click on your profile and select "save as" and save

      2. open the file on a text editor (i used visual studio code) and save as an html

      3. ctrl + f to search for the section "Profile Style (Customize your page with CSS here!)"

      4. add your code after the <pclass="aboutTab-answer">

      5. save the file

      6. go to your folder where you saved the file and open it on a browser

      7. for any new changes you make, refresh the page to view them

    • Good stuff

  • Hi there! This may be an old thread but maybe someone will see it and answer? When I try to paste a URL for the background image I want, it keeps putting the actual image as if I copy and pasted the image and not the link. Is there any way to get that to stop happening?

    Cheers!

    • https://monosnap.com/file/cLrYEoBpKUA3rnr1NktIIGkXDC6ihr

      Monosnap
      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.

    • Heyo!  I actually saw the announcement of the CSS bug and when I followed the instructions it actually fixed everything. Thanks so much for the help Valkyrie. <3

    • Okie dokie! I will try to screenshot what I’m talking about when I get home from work tonight. That’s neat to see a site that lets you record videos and take screenshots! Thank you. ;3;

    • Would you mind sending me a screenshot via PM? I'm having a bit of a hard time understanding what it is you mean.

    • Hey! as of 11:29PM EST I actually saw the CSS bug announcement you made and followed the instructions and it actually fixed the problem so all is good now. :D Feel free to ignore my message.

This reply was deleted.