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;
}

Email me when people comment –

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

Join Writer's Realm - Roleplay

Comments

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

    • sending it your way now :) 

  • First off thanks for the codes, but for some reason when I added them they aren't working.  I logged out and then back in, still seeing the blogs and photos and such...  Any thoughts?

    • Hello Thomas! Please make sure that when pasting the codes you are pasting them fully. 

      Example:

      /* hides blog section on profile */
      .section-member-blogEntries{
      display:none !important;
      }

      and 

      /* hides photos on profile */
      .grid-frame.sheet.section-member-photoEntries{
      display:none !Important;
      }

      ^ I sometimes forget the closing bracket when coding myself.. It can really screw ya up.

      Also please make sure that after pasting the codes, you have scrolled all the way to the bottom (Passed all the profile questions) And clicked "update". I've also forgotten to do this a few times myself. All codes are working properly (Just checked.) Every one of the is currently being used on my profile as proof :) If you still need help feel free to comment back or inbox me, We'll figure it out together!

      - Marly.

  • Some Reason the Center Column code isn't working for me? Everything else is great, but I try to use the code to make my page have a Center Column and it wont work?

    • /* center column */
      .span12.push4.tablet16.mobile16.column.column-wide{
      width: 1250px !important;
      max-width: 90% !important;
      left: 5% !important;
      position: relative !Important
      }

      Make sure that you've copied the little bottom bracket too! -> } that thing. Oddly that is really important for the code. When all else fails take this code and put it at the very top of all of your other codes. This will have the code take dominance if more than one code have the same selector. Also don't remove any !important from any line. Those are our cheat codes to overwrite the main site's theme, without them things may not work.

  • Thank you for the codes! They are a major help. :)

  • Greetings, I just thought I should drop a little informative line here. I recently used these helpful codes to fix up my profile. On my end, they look great. I can see everything when I look at them from this account. However, if I take a peek from my alt account I can't see any of the codes in effect. I'm not sure if it is a bug or something on my end.

    Hope this helps for future updates. ^_^

    • I've had an issue with this as well. Give your page a refresh or two. The codes are there but because there was no spot for me to actually "activate" css for profiles. I had to physically code in the option for Writer's to do so. (This is the reason it is a profile question. Kinda lame right?) Anyway. Some times it wont appear due to the fact that it isn't actually 'part' of the website and instead 'part of a bigger code'. Refreshing a time or two should clear that up. I will say, I have checked your profile and see everything clearly. All these codes have been tested and are responsive on all browsers, a few of which include, Opera, Chrome, Firefox and IE! Let me know if you need anymore help with this problem and I will do my very best to help out!

This reply was deleted.