Forum:CSS to narrow and customize user profiles on a wiki

Forums: Index → General Discussion → CSS to narrow and customize user profiles on a wiki

Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.

Note: This topic has been unedited for 4460 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.

I want to completely remove "my favorite wikis" from my user profile. It is impossible to put only one wiki in it. So I would prefer to just hide it with CSS or JS.

If possible, I would also like to force the profile to use regular characters instead of all caps in many places. All caps is ugly.

Finally, I would like to move it all up so that it is squeezed into a much more narrow space. It is all so ugly and huge as it is now. If "my favorite wikis" is removed, covered, or made invisible, then there is no need for the vertical height used by the profile. Click on my user page link to see: ----Timeshifter (talk) 13:19, February 1, 2012 (UTC)

Kirby wiki has improved the profile box so that it looks much better, maybe that would help? I'm using a slightly modified version of it on my wikis.

To remove the favorite wikis, you could try adding the following to your Wikia.css or personal css:

.UserProfileMasthead .wikis {

display: none;

}

--IK ^Talk 22:57, February 1, 2012 (UTC)

Thanks! The Kirby wiki profile box looks much better. I think I will go with that. Is it everything under "User pages" here?:

http://kirby.wikia.com/wiki/MediaWiki:Wikia.css

Is it possible to force the "favorite wikis" list to default to no wikis listed, and to expand as necessary (as decided by the user)? I can't believe it is so poorly designed. The wikis it lists for me are not my favorite wikis, except for one of them. But they force you to list 4 wikis. ----Timeshifter (talk) 11:27, February 2, 2012 (UTC)

The Kirby code should be just this (not including blog code, which might need an adjustment as well):

/*--------- USER PAGES ----------*/
.WikiaUserPagesHeader {
    width: 1000px;
    float: left;
    margin-top: -10px;
    padding-top: 10px;
    background-color: transparent;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0.8)));
    background-image:    -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
    background-image:      -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
    background-image:         linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%);
}


.UserProfileMastheadSearch .WikiaSearch {
    float: right;
    margin-right: 3px;
    margin-bottom: -39px;
    width: 260px;
    z-index: 1002;
}

.UserProfileMastheadSearch .WikiaSearch input[type="text"] {
            width: 200px;
            background: #FFFFFF;
            border: 2px solid #AA4444;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;
    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.6) inset;
       -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.6) inset;
         -o-box-shadow: 1px 1px 1px rgba(0,0,0,0.6) inset;
            box-shadow: 1px 1px 1px rgba(0,0,0,0.6) inset;
}

/* Establish top line of floated elements */
.UserProfileMasthead {
    position: relative;
    padding: 0px 10px;
    z-index: 999;
}

.UserProfileMasthead.zero-state {
    min-height: 100px;
}

.UserProfileMasthead .masthead-avatar {
    height: 140px;
    width: 140px;
    position: relative;
    float: left;
    left: 0px;
    top: 0px;
    margin-top: -5px;
    margin-right: 0px;
    padding: 0px;
    border: none;
    background: none;
}
 
.UserProfileMasthead .masthead-avatar .avatar {
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
         -o-border-radius: 5px;
            border-radius: 5px;
            border: none;
}
 
.UserProfileMasthead .masthead-info {
    position: relative;
    float: left;
    margin-left: 10px;
    margin-top: -5px;
    margin-bottom: 10px;
    width: 830px;
    z-index: 1000;
}
 
/* Remove chevron */
.UserProfileMasthead .masthead-info-lower::before {
    display: none;
}
 
/* Masthead top half */
.UserProfileMasthead .masthead-info hgroup {
    background: url("http://images3.wikia.nocookie.net/kirby/en/images/6/6f/Tex-Curtain-Headerstrip.jpg");
    padding: 1px 15px 1px 15px;
    height: auto;
    min-height: 40px;
}
 
.UserProfileMasthead .tally {
    padding-left: 0px;
    margin-bottom: 10px;
}
 
/* Username field */
.UserProfileMasthead .masthead-info h1 {
    font-size: 16px;
}
 
/* Real name field */
.UserProfileMasthead .masthead-info h2 {
    margin-bottom: 5px;
    font-size: 14px;
}
 
/* Masthead bottom half */
.UserProfileMasthead .masthead-info > div {
    padding: 6px 15px 6px 15px;
}
 
.UserProfileMasthead .masthead-info h2 span {
    color: #FFCC33;
}
 
.UserProfileMasthead .masthead-info .group {
            background: url("http://images3.wikia.nocookie.net/kirby/en/images/e/e8/Tex-Ribbon-Buttonsecondary.png");
            border: 1px solid #AA0000;
            top: -1px;
            color: #FFFFFF;
            font-size: 11px;
            text-transform: capitalize;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;
    -webkit-box-shadow: 1px 1px 2px #880000;
       -moz-box-shadow: 1px 1px 2px #880000;
         -o-box-shadow: 1px 1px 2px #880000;
            box-shadow: 1px 1px 2px #880000;
}

There should be a way to reset the favourite wikis field, but I don't know how. I don't ever want to touch it...

--IK ^Talk 14:02, February 2, 2012 (UTC)

Looks great! Only problem is that the other tabs (to the right of the profile tab) do not show up unless you mouse over them. See:

http://cannabis.wikia.com/wiki/User:Timeshifter

http://cannabis.wikia.com/wiki/MediaWiki:Wikia.css ----Timeshifter (talk) 14:30, February 2, 2012 (UTC)

I'm using this for my tabs here:

.WikiaUserPagesHeader div.tabs-container {
     overflow: hidden;
     min-width: 500px;
     margin: 0px;
}
 
.WikiaUserPagesHeader .tabs {
     border: 1px solid transparent;
     margin-left: 10px;
     margin-right: 10px;
}
 
.WikiaUserPagesHeader .tabs .selected {
     -webkit-border-radius: 8px 8px 0px 0px;
        -moz-border-radius: 8px 8px 0px 0px;
          -o-border-radius: 8px 8px 0px 0px;
             border-radius: 8px 8px 0px 0px;
}
 
.WikiaUserPagesHeader .tabs li a {
     display: inline-block;
     font-size: 12px;
     color: #e8e1c5;
     margin-top: 4px;
     margin-bottom: -3px;
     padding: 3px 10px;
     background: transparent url(http://images3.wikia.nocookie.net/patrician3/images/f/f0/Opacity80.png);
     -webkit-border-radius: 5px 5px 0px 0px;
        -moz-border-radius: 5px 5px 0px 0px;
          -o-border-radius: 5px 5px 0px 0px;
             border-radius: 5px 5px 0px 0px;
}
 
.WikiaUserPagesHeader .tabs li a:hover {
     color: #e9cf72;
}
 
.WikiaUserPagesHeader .tabs .selected a {
     background: transparent url(http://images3.wikia.nocookie.net/patrician3/images/f/f0/Opacity80.png);
     border-color: transparent;
     color: #e9cf72;
     font-weight: bold;
     margin-top: 0px;
     padding: 6px 10px;
     -webkit-border-radius: 5px 5px 0px 0px;
        -moz-border-radius: 5px 5px 0px 0px;
          -o-border-radius: 5px 5px 0px 0px;
             border-radius: 5px 5px 0px 0px;
}

Shouldn't be hard to add different colors. --IK ^Talk 14:54, February 2, 2012 (UTC)

Thanks again! I added it, and the tabs now show up fine. You are good, really good. Wikia should hire you. At least on a consultant basis. :)

I found where to change the color for the top bar. I changed it from red to green for now. May try other combinations later. In the CSS it is under "Masthead top half".

Can you link to a user page on one of your wikis that you think has the best CSS for dealing with the profile problems. I may try it too. ----Timeshifter (talk) 15:26, February 2, 2012 (UTC)