Blog

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.