Forums » Support

Getting Started - Profile Page Customisation

    • 1422 posts
    August 4, 2016 11:41 PM EDT

    Hi there :)

    In order to customise your profile pages you'll need to do a bit of CSS coding in the Profile Style setting found on your page. I'm no expert on this subject but I hope by giving you a template to follow you can change a few details to suit you. We'll use this tutorial site as a guide

    If you use this template below your page will look identical to mine. Feel free to copy this code into your Profile Styles box:

    ul.feed .feed_item_generated, ul.feed .feed_item_bodytext
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: none;
    }
    ul.a {
    list-style-type: circle;
    }

    ul.b {
    list-style-type: square;
    }

    ol.c {
    list-style-type: upper-roman;
    }

    ol.d {
    list-style-type: lower-alpha;
    }
    ul.feed .feed_item_date .timestamp
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-family: Courier New;
    text-decoration: none;
    }
    ul.feed .feed_item_date a
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: underline;
    }
    ul.feed .feed_item_date a:
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: underline;
    }
    body {
    background-color: rgba(0,0,0); background-image: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/black-background-8.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: repeat;

    }

    a:link, a:visited
    {
    color: rgb((255,255,255););
    font-style: normal;
    font-weight: bold;
    font-family: Courier New;
    text-decoration: underline;
    }
    a:hover
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: Courier New;
    text-decoration: underline;
    }
    .generic_layout_container h3
    {
    color: rgb(128,128,128);
    font-style: italic;
    font-size: 12px;
    font-weight: bold;
    font-family: Verdana;
    text-decoration: none;
    }
    #profile_status h2
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-size: 18px;
    font-weight: bold;
    font-family: Tahoma;
    text-decoration: none;
    }
    .tabs_alt
    {
    background-color:rgb(0,0,0);
    }
    .tabs_alt > ul > li > a
    {
    color: rgb(255,255,255);
    font-family: Courier New;
    }
    .tabs_alt > ul > li.active > a
    {
    border: 1px dotted rgb(128,128,128);
    border-bottom: none;
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
    font-family: Courier New;
    }
    .tabs_alt > ul > li > a:hover
    {
    border: 1px dotted rgb(0,0,0);
    border-bottom: none;
    background-color: rgb(0,0,0);
    color: rgb(128,128,128);
    font-family: Courier New;
    }
    .tabs_alt > ul
    {
    background-color:rgb(0,0,0);
    border-bottom: 1px dotted rgb(0,0,0);
    }
    .layout_user_profile_info > ul
    {
    background-color: rgb(128,128,128);
    border: 3px dotted rgb(0,0,0);
    }
    .layout_user_profile_info > ul > li
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: none;
    }
    .layout_user_profile_info > ul > li .timestamp
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: none;
    }
    .activity-post-container
    {
    background-color:rgb(0,0,0);
    border: 3px dotted rgb(0,0,0);
    }
    .layout_page_footer .layout_main
    {
    background-color:rgb(0,0,0);
    border: 3px dotted rgb(0,0,0);
    text-decoration: none;
    }
    .layout_page_footer .layout_main a
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: underline;
    }
    .layout_page_footer .layout_main a:hover
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: underline;
    }
    .generic_layout_container
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    }
    .comments > ul > li
    {
    background-color:rgb(0,0,0);
    border-top: 3px dotted rgb(0,0,0);
    }
    .profile_fields span
    {
    background-color: transparent;
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: none;
    }
    form.activity-comment-form
    {
    background-color:rgb(0,0,0);
    border-top: 3px dotted rgb(0,0,0);
    }
    button
    {
    background-color: rgb(0,0,0);
    border: 1px solid rgb(0,0,0);
    color: #fff;
    font-family: Courier New;
    }
    button:hover
    {
    background-color: rgb(0,0,0);
    font-family: Courier New;
    }
    .layout_core_menu_main
    {
    background-color: rgb(0,0,0);
    border: 1px solid rgb(0,0,0);
    border-left: none;
    border-right: none;
    }
    .layout_core_menu_main ul a:link, .layout_core_menu_main ul a:visited
    {
    color: rgb(0,0,0);
    }
    .layout_core_menu_main ul a:hover
    {
    color: rgb(0,0,0);
    }
    .layout_core_menu_mini #core_menu_mini_menu > ul > li > a
    {
    color: rgb(0,0,0);
    }
    .layout_core_menu_mini #core_menu_mini_menu > ul > li > a:hover
    {
    background: rgb(0,0,0);
    color: rgb(0,0,0);
    }
    a#updates_toggle
    {
    background-color: rgb(0,0,0);
    }
    a:hover#updates_toggle
    {
    background-color: rgb(0,0,0);
    color: rgb(0,0,0);
    }
    #core_menu_mini_menu > ul
    {
    background-color:rgb(0,0,0);
    border: 3px dotted rgb(0,0,0);
    border-top:none;
    }
    .layout_page_header
    {
    background-color:inherit;
    background-image: none;
    }
    a#updates_toggle
    {
    background-color:rgb(0,0,0);
    }
    ul.feed .feed_item_body
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: none;
    }
    ul.feed .feed_item_link_desc
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: none;
    }
    .comments .comments_likes,
    .comments .comments_viewall
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: none;
    }
    .profile_status_text
    {
    color: rgb(255,255,255);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: none;
    }

    The first thing you are probably going to want to do is change the background visible to either side. To do that, find this line of code:

    body {
    background-color: rgba(0,0,0); background-image: url(http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/black-background-8.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: repeat;

    }

     

    Between the () we can see the URL. Delete and replace with anything you like, I reccomend something with a border. For example, if you wanted this image:

    We would change the code to

    body {
    background-color: rgba(0,0,0); background-image: url(http://4.bp.blogspot.com/-lZm9KS03PdQ/UD2jprOL5CI/AAAAAAAAEyU/gR7VlIeshnk/s1600/Digital_Photo_Frame.jpg);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: repeat;

    }

    However, we can see the stark white obliterates the Site Banner. So we need to change the header background. Find this line of code using Ctrl+F:

    .layout_page_header
    {
    background-color:inherit;
    background-image: none;
    }
    a#updates_toggle

    Delete inherit; and the default header of the current Skyrim Sky will appear.

    Next you may want to change your Font Colours. In the code are the string of numbers:

    Red: rgb(255,0,0)

    Blue: rgb(0,0,255)

    Black: rgb(0,0,0) 

    White: rgb(255,255,255)

    Grey: rgb(128,128,128)

    Any line of code with those numbers can be swapped out for any other, obviosuly avoid using the same colour as your backgrounds, which can also be changed. Refer to the colour guide on the tutorial page for more options.

    Lastly, let's look at that Member Info Box:

    We're going to change the font, the background colour, border and the text colour to act as an example in a microcosm. First, find this line of code:

    .layout_user_profile_info > ul
    {
    background-color: rgb(128,128,128);
    border: 3px dotted rgb(0,0,0);
    }

    The background colour is easy, change it to white which is: rgb(255,255,255);

    The border is harder so we'll refer to the Border Tutorial page. We're going to make a double border, so we're ging to change this:

    border: 3px dotted rgb(0,0,0);
    }

    To a 5px red double border:

    border: 3px double rgb(255,0,0);

    Next we'll change the font style. Fonts are tricky so we'll refer to the Font Tutorial Page. Identify the following line below the code we just altered:

    .layout_user_profile_info > ul > li
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Courier New;
    text-decoration: none;
    }

    We're going to change the colour to blue and the font to Times New Roman for this example:

    .layout_user_profile_info > ul > li
    {
    color: rgb(0,0,255)
    font-style: normal;
    font-weight: normal;
    font-family: Times New Roman;
    text-decoration: none;
    }

    Now we should have this:

    That should do for now, get experiinting and don't worry about messing anything up as the template code will remain here. This is basic stuff, the extent of my knowledge pretty much but if you need any help please don't be afraid to ask. Also, if you have any tips and tricks for coding to add extra customisation please let us know.

    Thanks for reading :)

    • 415 posts
    August 6, 2016 6:13 PM EDT

    This will be useful.

    • 133 posts
    August 7, 2016 2:19 PM EDT

    This guide is awesome Phil! I finally have my page looking pretty cool. Thanks so much!

    • 1422 posts
    August 8, 2016 3:47 AM EDT

    Thanks gentlemen. Once we're up and running I'll make a better one and highlight exactly which strings of code effect which parts of your page. That way you can change the fonts and colours to suit you and get even greater customisation and the confidence to change it whenver you please.

    • 4 posts
    September 1, 2016 2:36 PM EDT

    This stuff is pretty confusing to get into. Been working on learning for about a hour and haven't got anywhere yet. xD

    • 69 posts
    September 1, 2016 2:40 PM EDT

    Ooh, I'm going to have some fun with this at the weekend :-)

    I like that we can still set backgrounds, I wonder if we can add transparency in *hmmmm*

    • 150 posts
    September 1, 2016 2:56 PM EDT

    I think my head just exploded.

    • 312 posts
    September 1, 2016 3:07 PM EDT

    Hoo, boy. Time to dig through years of not using CSS.

    ...

    Eventually. I'm way too lazy for that.

    • 1422 posts
    September 1, 2016 4:21 PM EDT

    Here's my new code if anyone would like to use it as a base.

    ul.feed .feed_item_generated, ul.feed .feed_item_bodytext
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    ul.a {
    list-style-type: circle;
    }
    ul.b {
    list-style-type: circle;
    }
    ol.c {
    list-style-type: upper-roman;
    }
    ol.d {
    list-style-type: lower-alpha;
    }
    ul.feed .feed_item_date .timestamp
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    ul.feed .feed_item_date a
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: underline;
    }
    ul.feed .feed_item_date a:
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: underline;
    }
    body {
    background-color: rgba(0,0,0); background-image: url(http://www.servantsofhope.ca/images/antique-scroll-backgrounds-wallpapers.jpg);
    background-position: center center;
    background-size: 100% 100%;
    background-attachment: cover;
    background-attachment: fixed;
    background-repeat: repeat;

    }

    a:link, a:visited
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: underline;
    }
    a:hover
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: bold;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: underline;
    }
    .generic_layout_container h3
    {
    color: rgb(0,0,0);
    font-style: italic;
    font-size: 12px;
    font-weight: bold;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    #profile_status h2
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-size: 18px;
    font-weight: bold;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    .tabs_alt
    {
    background-color:rgb(0,0,0);
    }
    .tabs_alt > ul > li > a
    {
    color: rgb(255,255,255);
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    }
    .tabs_alt > ul > li.active > a
    {
    border: 1px double rgb(0,0,0);
    border-bottom: none;
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    }
    .tabs_alt > ul > li > a:hover
    {
    border: 1px double rgb(0,0,0);
    border-bottom: none;
    background-color: rgb(0,0,0);
    color: rgb(255,255,255);
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    }
    .tabs_alt > ul
    {
    background-color:rgb(0,0,0);
    border-bottom: 1px double rgb(0,0,0);
    }
    .layout_user_profile_info > ul
    {
    background-color: rgb(255,255,255);
    border: 1px double rgb(0,0,0);
    }
    .layout_user_profile_info > ul > li
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    .layout_user_profile_info > ul > li .timestamp
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    .activity-post-container
    {
    background-color:rgb(0,0,0);
    border: 3px double rgb(0,0,0);
    }
    .layout_page_footer .layout_main
    {
    background-color:rgb(0,0,0,);
    border: 3px double rgb(0,0,0);
    text-decoration: none;
    }
    .layout_page_footer .layout_main a
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: underline;
    }
    .layout_page_footer .layout_main a:hover
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: underline;
    }
    .generic_layout_container
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    }
    .comments > ul > li
    {
    background-color:rgb(0,0,0);
    border-top: 3px double rgb(0,0,0);
    }
    .profile_fields span
    {
    background-color: transparent;
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    form.activity-comment-form
    {
    background-color:rgb(0,0,0);
    border-top: 3px double rgb(0,0,0);
    }
    button
    {
    background-color: rgb(0,0,0);
    border: 1px solid rgb(0,0,0);
    color: #fff;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    }
    button:hover
    {
    background-color: rgb(0,0,0);
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    }
    .layout_core_menu_main
    {
    background-color: rgb(255,255,255);
    border: 1px solid rgb(0,0,0);
    border-left: none;
    border-right: none;
    }
    .layout_core_menu_main ul a:link, .layout_core_menu_main ul a:visited
    {
    color: rgb(0,0,0);
    }
    .layout_core_menu_main ul a:hover
    {
    color: rgb(0,0,0);
    }
    .layout_core_menu_mini #core_menu_mini_menu > ul > li > a
    {
    color: rgb(0,0,0);
    }
    .layout_core_menu_mini #core_menu_mini_menu > ul > li > a:hover
    {
    background: rgb(0,0,0);
    color: rgb(255,255,255);
    }
    a#updates_toggle
    {
    background-color: rgb(0,0,0);
    }
    a:hover#updates_toggle
    {
    background-color: rgb(255,255,255);
    color: rgb(0,0,0);
    }
    #core_menu_mini_menu > ul
    {
    background-color:rgb(0,0,0);
    border: 3px double rgb(0,0,0);
    border-top:none;
    }
    .layout_page_header
    {
    background-color:inherit;
    background-image: none;
    }
    a#updates_toggle
    {
    background-color:rgb(0,0,0);
    }
    ul.feed .feed_item_body
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    ul.feed .feed_item_link_desc
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    .comments .comments_likes,
    .comments .comments_viewall
    {
    color: rgb(0,0,0);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }
    .profile_status_text
    {
    color: rgb(128,0,128);
    font-style: normal;
    font-weight: normal;
    font-family: Book Antiqua,Palatino,Palatino Linotype,Palatino LT STD,Georgia,serif;
    text-decoration: none;
    }


     

    • 641 posts
    September 2, 2016 5:56 AM EDT

    All this code makes my nose bleed. I think I'll just leave my profile blank from now on.

    • 279 posts
    September 2, 2016 6:24 AM EDT

    I spent countless hours with the Mozilla Firefox code inspector but at last I'm getting somewhere.

    • 17 posts
    September 2, 2016 9:52 AM EDT

    Hmm, that CSS tutorial doesn't show much in the way of actually understanding any of it..

    • 17 posts
    September 2, 2016 9:55 AM EDT

    Wait, missed the whole chapter thingy, nevermind.

    • 279 posts
    September 2, 2016 12:47 PM EDT

    Ok, I'm done (for now). Feel free to visit me and stand in awe :P

    • 312 posts
    September 2, 2016 2:09 PM EDT

    Redoing CSS. :D


    This post was edited by WuYiXiang at September 5, 2016 5:12 PM EDT
    • 312 posts
    September 6, 2016 3:40 AM EDT

    At Phil's behest, I'm going to post a bit about what I know about CSS. I uploaded 2 different versions of the background picture:  One at normal brightness and one turned up 250 on GIMP. The brightened version serves as the background for the feed to provide a false "Opacity" look. If you do this, always remember to specify your image sizes, or else it won't fit together correctly. I'm very bad at actually describing how to do things so I'm including comments to describe what each part of my code is doing.

    Edit:  I like that the photobucket links are automatically hyperlinked so you guys can see which picture I'm using where.

    Addendum:  If you're using Chrome, Inspect the element you want to change for an idea of what id or class to edit.

    Special thanks to Overhate for the help with tackling the double-status. :D

    Resources and Templates (I cobbled together the code from this because I was too lazy to make my own. :P):
    http://www­.socialeng­ineforum.c­om/index.p­hp?/topic/­7314-profi­le-style-f­or-se4samp­le-css-cod­e/
    http://ske­manon.com/­group/soci­al-engine-­theme-tuto­rials/foru­m/topics/b­asic-css-f­or-social-­engine-mem­ber-profil­es

    The following code is up-to-date for Selvaria Bles (currently using Ophelia):

    /*background*/
    body{
    background-color: #000;
    background-image: url(http://i129.photobucket.com/albums/p230/wuweilun/valkyria-chronicles-remastered-screenshot-04-ps4-us-25jan16_zpsrtmww3ye.jpg);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    }

    /*links
    Note: I have both visited and "fresh" links set to the same color. Otherwise, the Like and Comment links are a different color from basically every other link on the page.*/
    a:link,
    a:visited {
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #990000;
    }

    .layout_core_menu_main > ul > li > a:link,
    .layout_core_menu_main > ul > li > a:visited,
    form.activity .compose-menu > a,
    .layout_core_menu_main ul ul li a,
    #global_footer a {
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #f00;
    }


    /*The color of hyperlinks when your cursor is hovering over them*/
    .layout_core_menu_main > ul > li > a:hover,
    form.activity .compose-menu > a:hover,
    .layout_core_menu_main ul ul li a:hover,
    #global_footer a:hover {
    background-color: transparent;
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #990000;
    }

    /*text
    This is where you edit the text on your page.*/
    div,
    td,
    ul.feed .feed_item_bodytext {
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #000;
    }

    /*heading text
    Them big headings.*/
    #global_header .layout_theme_header_menu_bar .layout_core_menu_container > div.header_Top {
    background-color: #000;
    background-image: url(http://i129.photobucket.com/albums/p230/wuweilun/valkyria-chronicles-remastered-screenshot-04-ps4-us-25jan16_zpsrtmww3ye.jpg);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    }

    h2,
    h3,
    h4 {
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #f00;
    font-weight: bold;
    }

    /*that awkward bar up top*/
    #global_header #global_search_form_container > form input,
    #global_header #global_search_form_container > form button #global_search_button,
    form.activity .compose-content,
    form.activity .compose-container .overTxtLabel {
    background-image: url(http://i129.photobucket.com/albums/p230/wuweilun/Selvaria_zpsdxbla4cf.jpg);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #990000;
    }

    /*site header-footer and main navigation
    AKA the Tamriel Vault logo and the nav under it as well as the very bottom of the page.*/
    .layout_page_header,
    #global_footer {
    background-color: transparent;
    background-image: url(http://s129.photobucket.com/user/wuweilun/media/valkyria-chronicles-remastered-screenshot-04-ps4-us-25jan16_zpsrtmww3ye.jpg.html);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    }

    /*the background behind your theme (defaults to a white block)*/
    .layout_page_user_profile_index{
    background-color: #000;
    background-image: url(http://i129.photobucket.com/albums/p230/wuweilun/valkyria-chronicles-remastered-screenshot-04-ps4-us-25jan16_zpsrtmww3ye.jpg);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    }

    /*main navigation submenu*/
    .layout_core_menu_main ul ul {
    background-color: #000;
    border: 1px solid #900;
    }

    /*main_tabs - form tabs - buttons*/
    .tabs_alt,
    form.activity .compose-menu,
    #advanced_activity_body {
    background-color: #000;
    background-image: url(http://i129.photobucket.com/albums/p230/wuweilun/Selvaria_zpsdxbla4cf.jpg);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    }

    .tabs_alt {
    border: 1px solid #fff;
    }

    .tabs_alt > ul > li > a {
    border-right: 1px solid #fff;
    }

    .tabs_alt > ul > li > a {
    color: #000;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-weight: bold;
    }

    .tabs_alt > ul > li.tab_active > a,
    .tabs_alt > ul > li.active > a,
    .tabs_alt > ul > li.tab_active > a:hover,
    .tabs_alt > ul > li.active > a:hover,
    .tabs_alt > ul > li > a:hover,
    button,
    a.button:link,
    a.button:visited {
    background-color: #900;
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #fff;
    }

    /*buttons on friend list*/
    .pulldown {
    background-color: #fff;
    background-image: url(http://);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    border: 1px solid #000;
    border-radius: 3px;
    }

    .pulldown > a {
    background-color: transparent;
    color: #000;
    font-family: Georgia, Times, "Times New Roman", serif;
    }

    .pulldown > a:hover {
    background-color: transparent;
    color: #900;
    font-family: Georgia, Times, "Times New Roman", serif;
    }

    /*name and status message
    The one UNDER your Cover Photo*/
    #profile_status {
    background-color: transparent;
    background-image: url(http://);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    width: 838px;
    padding: 10px;
    border: 1px solid #000;
    border-radius: 3px;
    margin: 0px;
    }

    /*status container - input containers
    Comment boxes, etc.*/
    .wallFeed .wallTextareaContainer,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input.text, textarea,
    form.activity .compose-container .overTxtLabel {
    background-color: #fff;
    border-color: #000;
    border-style: solid;
    border-width: 1px;
    color: #000;
    }

     

    /*Everything behind the feed. Defaults to white.*/
    .generic_layout_container
    {
    background-color: #000;
    background-image: url(http://i129.photobucket.com/albums/p230/wuweilun/valkyria-chronicles-remastered-screenshot-04-ps4-us-25jan16_zpsrtmww3ye.jpg);
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: 1920px 1080px;
    color: #fff;
    font-style: normal;
    font-weight: normal;
    font-family: Georgia, Times, "Times New Roman", serif;
    }

     

    /*modules
    Affects activity feed and everything on the left-hand side.*/
    div#compose-container.compose-container,
    .aaf_tabs_feed,
    #global_wrapper .layout_left > div,
    #global_wrapper .layout_right > div,
    #global_wrapper .layout_middle > div {
    background-color: transparent;
    background-image: url(http://i129.photobucket.com/albums/p230/wuweilun/Selvaria_zpsdxbla4cf.jpg);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    border: 1px solid #fff;
    color: #000;
    font-weight:bold;
    }

    .adv_post_container_tagged_cont {
    background-color: transparent;
    background-image: url(http://i129.photobucket.com/albums/p230/wuweilun/Selvaria_zpsdxbla4cf.jpg);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    border-bottom: 1px solid #fff;
    color: #000;
    font-weight:bold;
    }

    #global_wrapper .layout_left > div,
    #global_wrapper .layout_right > div,
    #global_wrapper .layout_middle > div,
    #global_wrapper .layout_middle > div.layout_core_container_tabs > .generic_layout_container,
    .browsemembers_criteria,
    .chat_container,
    #global_content > .headline,
    #global_content > form.global_form,
    #global_content > table,
    .compose-content,
    .notifications_layout,
    body .layout_right > .generic_layout_container,
    body .tl_left > .generic_layout_container,
    body .timeline-profile-tabs .he-tab-pane:not(:last-child),
    .like_interests_wrapper,
    #global_page_like-interests-index .headline + .description,
    .wall-stream {
    border: 1px solid #fff;
    }

    /* Removes padding to remove some of that white. */
    #global_content {
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    background-color: transparent;
    }

    /* Infinite Scrolling */
    form.activity,
    div.feed_viewmore a.icon_viewmore,
    div#feed_loading,
    ul.feed .feed_item_body,
    .browsemembers_results > ul > li,
    .paginationControl,
    .content_feed_time_line .wall-action-item,
    body .pinfeed .wall-action-item,
    #global_page_pinfeed-index-index #global_wrapper .layout_left > div {
    background-image: urlhttp://i129.photobucket.com/albums/p230/wuweilun/Selvaria_zpsdxbla4cf.jpg);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    border: 1px solid #990000;
    }

    /*feeds
    Yes, more feeds. Reduced padding to 0 in order to minimize white space.*/
    #adv_activityfeed,
    #activity-feed {
    background-image: url(http://i129.photobucket.com/albums/p230/wuweilun/Selvaria_zpsdxbla4cf.jpg);
    background-size: 1920px 1080px;
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center center;
    padding: 0px;
    border: 1px solid #fff;
    }

    /*list borders*/
    ul.profile_friends > li + li,
    ul.feed .feed_item_body .comments > ul > li:first-child {
    border-color: #fff;
    }

    /*Making things transparent - adjust at your own risk*/

    h4 {
    border: 0px solid transparent;
    }

    h4 > span,
    .layout_core_menu_main ul ul li a:hover {
    background-color: transparent;
    }

    form.activity,
    div.feed_viewmore a.icon_viewmore,
    div#feed_loading,
    ul.feed .feed_item_body,
    .browsemembers_results > ul > li,
    .paginationControl,
    .content_feed_time_line .wall-action-item,
    body .pinfeed .wall-action-item,
    #global_page_pinfeed-index-index #global_wrapper .layout_left > div,
    .wall-feed .wall-action-item,
    #global_wrapper .layout_middle > div.layout_core_container_tabs > .generic_layout_container,
    .browsemembers_criteria,
    .chat_container,
    #global_content > .headline,
    #global_content > form.global_form,
    #global_content > table,
    .compose-content,
    .notifications_layout,
    body .layout_right >
    .generic_layout_container,
    body .tl_left >
    .generic_layout_container,
    body .timeline-profile-tabs .he-tab-pane:not(:last-child),
    .like_interests_wrapper,
    #global_page_like-interests-index .headline + .description,
    .wall-stream,
    #memberphotomenu_photo,
    ul.feed .feed_item_body .comments > ul > li {
    background-color: transparent;
    }

    /* Effacing the double Propic/Username/Status as well as the drop-down menu for the activity feed items */
    div#memberprofile_cover_details,
    #memberprofile_cover_status,
    #memberprofile_cover_img,
    .memberprofile_cover_linkimg
    img.thumb_profile.item_photo_user,
    .aaf_pulldown_btn,
    .aaf_pulldown_contents {
    opacity: 0.0;
    width: 0px;
    height: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    font-size: 0;
    border: 0px;
    }

    /* Like/Share buttons on right */
    .sitelike_button,
    #advanced_compose-menu {
    float: right;
    }


    This post was edited by WuYiXiang at September 12, 2016 2:37 PM EDT
    • 1422 posts
    September 6, 2016 4:52 AM EDT

    Thank you so much Wu :) Pretty soon we'll be wearing pages as lovely as yours!

    • 312 posts
    September 6, 2016 4:54 AM EDT

    Hahaha. It was good practice for me anyhow. Need to start coding my own website soon.

    • 279 posts
    September 6, 2016 5:12 AM EDT

    Am I the only one annoyed by the double profile pic, username and status?

    • 312 posts
    September 6, 2016 5:16 AM EDT

    No. No, you are not. I'm experimenting with ways to make the problem... disappear.

    • 279 posts
    September 6, 2016 5:17 AM EDT

    I already made it disappear :P

    You need to set the dimensions of some objects to 0px.

    • 279 posts
    September 6, 2016 5:19 AM EDT

    I even set the float of the like button to "right" so now it's on the other side, on the same level as the username. Looks more tidy this way.

    • 312 posts
    September 6, 2016 5:27 AM EDT

    Bleh. Oversight. Sec.


    This post was edited by WuYiXiang at September 6, 2016 5:27 AM EDT
    • 279 posts
    September 6, 2016 5:30 AM EDT

    Try this maybe:

     

    #memberprofile_cover .memberprofile_cover_linkimg > img {

    max-width: 0px; max-height: 0px;
    }

    #memberprofile_cover div#memberprofile_cover_details #memberprofile_cover_status * {
    color: red; font-size: 0px !important;
    }

    • 312 posts
    September 6, 2016 5:53 AM EDT

    Nah, my issue is getting rid of the 6 padding that doesn't want to go away. xD

    Update:  Got it. :D Edited previous code so it's up to date now.


    This post was edited by WuYiXiang at September 6, 2016 6:22 AM EDT