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

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;
 * }


 * -- 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...
 * -- 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. -- 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. :) Timeshifter (talk) 15:10, February 2, 2012 (UTC)