Forums » Off-Topic and Casual Chatter

My Custom Profile [CSS Style]

    • 6 posts
    July 8, 2018 3:09 PM PDT

    First time posting on the forums, sup everyone!

    I just finished the first pass of my custom profile design and layout and wanted to share it with you all.

    https://www.pantheonmmo.com/content/profile/yopi

    I will update the CSS code in this post if I make any changes. Please note, i'm not a programmer...I tried my best to add comments to the code and keep it clean so you know what it does.

    Copy the code below and paste it in your profile at Edit My Profile > Profile Style and your profile page will look like mine.

    CSS Code Last Updated: July 14, 2018 (5:35pm EST)

    Enjoy!

     

    ----------------------------------------

     

    /* Background Color and Border */
    .layout_page_user_profile_index .layout_left, .layout_page_user_profile_index .layout_middle {
    background-color: #000;
    border: 1px solid #a7b9cf !important;
    }

    /* Profile Photo */
    #profile_photo img {
    border-bottom: 1px solid #a7b9cf;
    margin-top: -20px;
    }

    /* Profile Photo Size */
    img.thumb_profile {
    max-width: 220px;
    max-height: 220px;
    }

    /* Basic Profile Info Header */
    .ybo_headline h3, .ybo_headline h4 {
    text-align: absolute;
    display: none;
    }

    /* Misc Text Link Color */
    a:link, a:visited {
    color: #dee9f7;
    }

    /* Member Info Header */
    ybo_headline {
    display: none;
    }

    /* Remove Empty Space Above Basic Profile Info and Font */
    .layout_left>div+div, .layout_right>div+div, .layout_middle>div+div {
    margin-top: 10px;
    font-family: "Trebuchet MS", Helvetica, Tahoma, Arial, Verdana, sans-serif !important;
    }

    /* Center Edit Profile, Add Friend Section and Font */
    div#profile_options {
    font-family: "Trebuchet MS", Helvetica, Tahoma, Arial, Verdana, sans-serif !important;
    text-align: center;
    padding-right: 22px;
    }

    /* Basic Profile Info */
    .layout_user_profile_info>ul>li {
    color: #a7b9cf;
    font-size: 0.35cm;
    font-weight: bold;
    text-align: center;
    background-color: #000;
    }

    /* Small Dividers Between Profile Info */
    .layout_user_profile_info>ul {
    background-color: #000;
    }

    /* NavBar Font */
    .layout_core_container_tabs .tabs_alt {
    font-family: "Trebuchet MS", Helvetica, Tahoma, Arial, Verdana, sans-serif !important;
    }

    /* NavBar Tabs */
    .tabs_alt>ul {
    text-align: center !important;
    text-transform: uppercase;
    border: none;
    }

    /* NavBar Tabs Selected */
    .tabs_alt>ul>li>a {
    color: #a7b9cf;
    }

    /* NavBar Tabs Selected */
    .tabs_alt>ul>li.tab_active>a, .tabs_alt>ul>li.active>a {
    font-weight: 200;
    color: #63687f;
    }

    /* Activity Feed Text Section Background */
    .activity-post-container {
    background: #000;
    }

    /* Activity Feed Text Section Content Background */
    .compose-content {
    background: #cedbea;
    }

    /* Activity Feed Text Section Border*/
    div.compose-content {
    border: 000;
    }

    /* Activity Feed Text */
    ul.feed .feed_item_bodytext {
    color: #a7b9cf;
    }

    /* Activity Feed User Name and Font*/
    ul.feed .feed_item_username {
    font-size: 0.5cm;
    font-family: "Trebuchet MS", Helvetica, Tahoma, Arial, Verdana, sans-serif !important;
    }

    /* Activity Feed Background Minimum Height */
    .layout_activity_feed {
    min-height: 0px;
    }

    /* Add To List Button Background */
    .pulldown>a {
    background-color: #000;
    }

    /* Profile Fields Headers and Font*/
    .profile_fields {
    font-family: "Trebuchet MS", Helvetica, Tahoma, Arial, Verdana, sans-serif !important;
    text-align: center;
    font-weight: bold;
    }

    /* Profile Fields Header Text Background */
    h4>span {
    background-color: #000;
    }

    /* Profile Fields Text */
    div, td {
    color: #a7b9cf;
    }

    /* Friends List - Friend's Profile Pictures */
    img.main, img.thumb_normal, img.thumb_profile, img.thumb_icon {
    border: none;
    }

    /* Friends List Font */
    ul.profile_friends {
    font-family: "Trebuchet MS", Helvetica, Tahoma, Arial, Verdana, sans-serif !important;
    }

    /* Friends List Name Font Size */
    ul.profile_friends .profile_friends_status>span {
    font-size: 22px;
    }

    /* Friends List Name Alignment */
    ul.profile_friends .profile_friends_body {
    margin-top: -4px;
    }

    /* Profile Fields Title and Text*/
    .profile_fields>ul>li>span {
    border: 0px solid #e6e6e6;
    width: 214px;
    }

    /* Profile Fields Info */
    .profile_fields>ul>li>span+span {
    width: 200px;
    }

    /* Center Profile Fields and Info */
    .profile_fields>ul>li {
    padding-left: 277px
    }

    /* Remove Space Between Profile Fields */
    .profile_fields>ul {
    padding: 0px;
    }

    /* Activity Feed Emoji Icon */
    .emoticons-activator::before {
    color: #7990ad;
    }

    /* Activity Feed Comments Background */
    .comments>ul>li {
    background-color: #000;
    }

    /* Activity Feed Link Icon */
    #compose-link-activator:before, #compose-link-menu span:before {
    color: #dee9f7;
    }

    /* Activity Feed Share Button */
    div.activity-post-container .compose-menu button {
    float: right;
    border: 2px solid #a7b9cf
    }

    /* Submit Post Button */
    button {
    background-color: #000;
    }

    /* Submit Link Text Box Background Color */
    input[type=text], input[type=email], input[type=password], input.text, textarea {
    background: #cedbea;
    }

    /* Activity Feed Divider */
    ul#activity-feed.feed>li+li {
    border-top: 0px solid #637d9b;
    }

    /* Privacy Share Button Border */
    .privacy_list {
    border: 1px solid #a7b9cf;
    }

    /* Privacy Share Button Text */
    a.privacy_pulldown_button:link {
    color: #a7b9cf;
    }

    /* Remove Lines Between NavBar Tabs */
    .tabs_alt>ul>li {
    border-right: 0px solid #000;
    }

    /* Fix Activity Feed Alignment */
    #activity-feed {
    padding-left: 20px;
    }

    /* Fix Friends List Alignment */
    ul.profile_friends {
    padding-left: 430px;
    }

    /* Friends List Add and Remove Button */
    ul.profile_friends .profile_friends_options {
    text-align: left;
    margin-right: 348px;
    margin-top: -21px;
    }

    /* Hide The Create List For Friends Button */
    ul.profile_friends .profile_friends_lists {
    display: none;
    }

    /* Only Display First Line of Forum Post Text */
    .forum_topic_posts_info_body {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    }

    /* Adjust Forum Post First Line Ellipsis End Point */
    .forum_topic_posts_info_body {
    padding-right: 200px;
    }

    /* Adjust The Forum Post Feed To Be More Centered */
    ul.forum_topic_posts {
    padding-left: 194px;
    }

    /* Remove Forum Section Divider */
    ul.forum_topic_posts>li+li {
    border-top: 0px solid #000;
    }

    /* Misc Remaining Font Changes For Profile Content Section */
    .layout_page_user_profile_index .layout_left, .layout_page_user_profile_index .layout_middle {
    font-family: "Trebuchet MS", Helvetica, Tahoma, Arial, Verdana, sans-serif !important;
    }

    /* Change Font Size For Forum Post Feed */
    ul.forum_topic_posts .forum_topic_posts_info_top {
    font-size: 0.42cm;
    }

    /* Change Font Size For Post Feed Date, Like, Edit Set of Buttons and Move Left */
    ul.feed .feed_item_date {
    font-size: 0.30cm;
    margin-left: -20px;
    }

    /* Alignment Adjustment For Like, Comment Set of Buttons */
    ul.feed .feed_item_icon, .feed_item_body ul.feed .feed_item_icon {
    margin-top: 5px;
    }

    /* Hide Activity Status Icon */
    .activity_icon_status:before {
    display: none;
    }

    /* Privacy ToolTip Background and Border Color */
    .tip>span {
    background: #444444;
    border: 1px solid #a7b9cf;
    }

    /* Center Location of Privacy ToolTip Box */
    .profile_fields li>.tip>span {
    margin-left: 22px;
    }


    This post was edited by Yopi at July 14, 2018 2:36 PM PDT
    • Moderator
    • 9115 posts
    July 8, 2018 5:05 PM PDT

    Welcome Yopi, I have moved this post to Off-Topic as it does not belong in the General Pantheon thread, we only allow Pantheon related topics in that section, my friend. :)

    • 6 posts
    July 8, 2018 5:19 PM PDT

    Oops my mistake, thanks!

    • 769 posts
    July 9, 2018 11:43 AM PDT

    I like it man. Thanks for sharing. 

    • 6 posts
    July 10, 2018 4:29 PM PDT

    Thanks Tralyan, glad ya like it! I did a few more updates since posting, the code is updated.

    • 6 posts
    July 14, 2018 2:41 PM PDT

    I updated the CSS code for my profile layout. Polished things up and fixed alignment issues for various elements.


    This post was edited by Yopi at July 14, 2018 2:57 PM PDT
    • 6 posts
    April 27, 2019 11:28 AM PDT

    Bump - for new backers. :)

    • 116 posts
    May 6, 2019 7:11 AM PDT

    Very nice, thank you for sharing. 

    • 2886 posts
    May 6, 2019 3:42 PM PDT

    Just saw this now - this is awesome! Good work :) Even though this website will be overhauled later this year, I'm all for a sprucing up my profile as much as possible in the meantime lol

    • 6 posts
    May 24, 2019 5:22 AM PDT

    Anytime! Glad you all like it. Excited to see the new webstie! :)