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

Revision as of 18:05, 23 March 2012

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 4409 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 the "background" CSS under "Masthead top half".

I changed the background color behind "admin" too. In the CSS it is the "background" CSS under "UserProfileMasthead .masthead-info .group".

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:35, February 2, 2012 (UTC)

Last thing wikia would want is to hire me :)

Kirby wiki has the "best" profile CSS that I'm aware of. At the very least it's the most recent and most updated.

Try the following code, maybe it would fit your colors better. You could work on improving it from there:

/* ***************************************************************************************** */
/* USER profile box and tabs, adapted from http://kirby.wikia.com/wiki/MediaWiki%3AWikia.css */
 
.WikiaUserPagesHeader {
    width: 1000px;
    float: left;
    padding-top: 10px;
    background: transparent;
}
 
.UserProfileMastheadSearch .WikiaSearch {
    float: right;
    margin-right: 3px;
    margin-bottom: -39px;
    z-index: 1002;
}
 
.UserProfileMastheadSearch .WikiaSearch input[type="text"] {
            width: 250px;
}
 
/* Establish top line of floated elements */
.UserProfileMasthead {
    padding: 0px 10px;
    position: relative;
    z-index: 999;
}
 
.UserProfileMasthead .masthead-avatar {
    height: 140px;
    width: 140px;
    position: relative;
    float: left;
    left: 0px;
    top: 0px;
    margin-top: -5px;
    margin-bottom: 0px;
    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;
    width: 828px;
    z-index: 1000;
    border: 1px solid transparent;
    background: #000;
}
 
.UserProfileMasthead .masthead-info-lower:before {
     content: none;
}
 
/* Masthead top half */
.UserProfileMasthead .masthead-info hgroup {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(50%, #008000), color-stop(100%, #000));
    background-image:    -moz-linear-gradient(top, #008000 50%, #000 100%);
    background-image:      -o-linear-gradient(top, #008000 50%, #000 100%);
    background-image:         linear-gradient(top, #008000 50%, #000 100%);
    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;
    color: #c4c5ca;
    background: transparent;
}
 
.UserProfileMasthead .masthead-info h2 span {
    color: #918250;
}
 
.UserProfileMasthead .masthead-info .group {
            border: 1px solid #005b00;
            background: #000;
            top: -1px;
            color: #fff;
            font-size: 11px;
            text-transform: capitalize;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
         -o-border-radius: 10px;
            border-radius: 10px;
}
 
.WikiaUserPagesHeader div.tabs-container {
    overflow: hidden;
    min-width: 500px;
    margin: 0px;
}
 
.WikiaUserPagesHeader .tabs {
    border-bottom: 1px solid #3e4258;
    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;
            border: 1px solid #3e4258;
            font-size: 12px;
            color: #c4c5ca;
            margin-top: 4px;
            margin-bottom: -3px;
            padding: 3px 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;
}
 
.WikiaUserPagesHeader .tabs li a:hover {
            display: inline-block;
            border: 1px solid #3e4258;
            font-size: 12px;
            color: #fff;
            margin-top: 4px;
            margin-bottom: -3px;
            padding: 3px 10px;
            background: transparent;
    -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 .selected a, .WikiaUserPagesHeader .tabs .selected a:hover {
            background: #0f142f;
            border: 1px solid #3e4258;
            color: #fff;
            font-weight: bold;
            margin-top: 0px;
            padding: 6px 10px;
            background: transparent;
    -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;
}
 
/* USER profile box and tabs submenu end */
/* ************************************* */

If you use Firefox you could download the Firebug addon, it lets you inspect and change CSS which makes it a lot easier. --IK ^Talk 16:58, February 2, 2012 (UTC)

(unindent). That green gradient is really cool! I also like how the user profile box has now disappeared altogether. The lack of tab borders is different, but it is growing on me, since it helps make the user profile box disappear.

On the Wikia.css page I separated the sets of top and bottom section break lines to keep them from wrapping.

I sometimes install the Firebug addon. But it seems to mess up the browser sometimes. So I usually uninstall it when I am done using it. I am still a relative newb with CSS. Much to learn.

I just realized that one of the reasons the profile box is so huge for me is that I use a minimum font size of 14 or 15 in the Firefox browser. See:

http://cannabis.wikia.com/wiki/Portal:Firefox_minimum_font_size_problems

"My favorite wikis" then needs 3 lines. Can you give me the CSS for widening the space allocated to "My favorite wikis"? That would put it back to 2 lines. See my user page here on community central to see what I mean. ----Timeshifter (talk) 17:43, February 2, 2012 (UTC)

The borders are invisible on the blue background. I have the impression that there was a brightly colored background when I was setting the border colors ;) I changed the above code to fix the borders, try it out.

~~The code for the width of the favourite wikis should be this:~~ Actually ignore this, it causes alignment issues with minimal changes...

--IK ^Talk 18:04, February 2, 2012 (UTC)

Perfect! I may send in something via Special:Contact about "My favorite wikis".

Uh oh. I noticed a problem. The navigation menus go under the search form instead of over the search form as it normally does on user pages and other pages. ----Timeshifter (talk) 18:50, February 2, 2012 (UTC)

Adjust the z-index properties as follows:

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

.UserProfileMasthead {
    padding: 0px 10px;
    position: relative;
    z-index: 500;
}

I'm not sure why Changtau has set them to 1002 though, maybe there was a good reason for it. --IK ^Talk 19:31, February 2, 2012 (UTC)

Woohoo! It worked. Thanks! ----Timeshifter (talk) 21:18, February 2, 2012 (UTC)

(unindent). I had to remove this CSS. On Internet Explorer the navigation menus were showing up under ads on some pages. For example on this page:

http://cannabis.wikia.com/wiki/Basic_2012_Global_Marijuana_March_city_list

It may not have to do with the page, but with the type of ad. I don't know. It was not happening on Firefox. I have been removing CSS from all CSS pages in order to narrow down the causal possibilities for various problems. See:

http://cannabis.wikia.com/wiki/JS_and_CSS_cheatsheet_links ---Timeshifter (talk) 18:05, March 23, 2012 (UTC)

@@ Line 462: / Line 462: @@
 ::::Woohoo! It worked. Thanks! ----[[User:Timeshifter|Timeshifter]] ([[User talk:Timeshifter|talk]]) 21:18, February 2, 2012 (UTC)
+(unindent). I had to remove this CSS. On Internet Explorer the navigation menus were showing up under ads on some pages. For example on this page:
+*http://cannabis.wikia.com/wiki/Basic_2012_Global_Marijuana_March_city_list
+It may not have to do with the page, but with the type of ad. I don't know. It was not happening on Firefox. I have been removing CSS from all CSS pages in order to narrow down the causal possibilities for various problems. See:
+*http://cannabis.wikia.com/wiki/JS_and_CSS_cheatsheet_links ---[[User:Timeshifter|Timeshifter]] ([[User talk:Timeshifter|talk]]) 18:05, March 23, 2012 (UTC)