SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)

    user.css to "fix" forum skin.

    Rather than have my posts in the 'forum upgrade' thread turn into a massive threadjack.

    For many of us the new forum skin is... well... problematic at best, a disaster at worst. Many of us saw this coming with the announcement of upgrading to vBull 4, and it would be a shame to see such a healthy community flushed just because the people who wrote the default skin for vBulletin have zero business writing HTML, CSS or Javascript.

    So... since they're busy trying to just get the new forum stabilized what can we as users do? As a Opera user, my answer is quite simple. Disable javascript and use user.css to correct all the layout problems.

    What layout problems you ask? Fixed width that's uselessly small on my desktop, uselessly large on my netbook, and isn't even useful 'half-width' at 1920? PX metric fonts that are useless for large font/120dpi users? Changing the zoom or width breaking multiple elements site-wide?

    Here's the user.css I've come up with for Opera. Only really tested at large fonts/120 dpi but there's no reason it shouldn't work well at normal font size since again, it's all done with %/em.

    Code:
    * {
    	font-size:100% !important;
    	line-height:140% !important;
    	font-family:arial,helvetica,sans-serif !important;
    }
    
    code,
    pre,
    pre span {
    	font:90%/130% "lucida console","courier new",monospace !important;
    }
    
    body {
    	font-size:85% !important;
    	line-height:140% !important; /* always restate */
    }
    
    html,
    body,
    #vbulletin_html {
    	width:100% !important;
    	padding:0 !important;
    	margin:0 !important;
    }
    
    .pagination span,
    .pagination a {
    	top:0 !important;
    	vertical-align:top !important;
    }
    
    .pagination img {
    	top:0 !important;
    	vertical-align:middle !important;
    }
    
    #globalsearch {
    	width:auto !important;
    	padding-top:0.2em !important;
    }
    
    #globalsearch * {
    	float:none !important;
    	display:inline !important;
    	margin:0 2px !important;
    	vertical-align:middle !important;
    }
    
    #globalsearch span {
    	padding:0 !important;
    	margin:0 !important;
    }
    
    #globalsearch form {
    	right:0 !important;
    }
    
    #navtabs,
    #navtabs * {
    	height:auto !important;
    }
    
    #navtabs a {
    	top:0 !important;
    	padding:0.25em 0.5em !important;
    }
    
    #navtabs a.popupctrl {
    	padding-right:16px !important;
    }
    
    #nrreview li.postbit:nth-child(2n+1),
    #threads li.threadbit:nth-child(2n+1) {
    	background:#F4F8FF !important;
    }
    
    #nrreview li {
    	padding:0 0.5em 0.5em !important;
    	margin:0 !important;
    }
    
    #nrreview .header {
    	padding:0.5em 0 !important;
    	font-weight:bold;
    }
    
    .posthead {
    	padding:0.25em 0 !important;
    }
    
    .postrow {
    	padding:0.5em !important;
    }
    
    .userinfo {
    	width:184px !important;
    	padding:0.5em 0 !important;
    	margin-left:8px !important;
    }
    
    .username_container {
    	padding-bottom:0 !important;
    }
    
    .usertitle,
    .rank {
    	padding-bottom:0.5em !important;
    }
    
    .username span {
    	word-wrap:break-word !important;
    	padding-left:16px !important; /* fixes centering */
    }
    
    .userinfo_extra * {
    	float:none !important;
    	display:block !important;
    	text-align:center !important;
    	line-height:120% !important;
    	word-wrap:break-word !important;
    	color:#444 !important;
    }
    
    .userinfo_extra dt {
    	font-weight:bold;
    	padding-top:0.5em !important;
    }
    
    .userinfo_extra dt:after {
    	display:none !important;
    }
    
    .blockrow {
    	background:none !important;
    }
    
    .section {
    	box-shadow:inset 0 0 32px #E0E8F0;
    }
    
    .section,
    .blockbody {
    	border-radius:0 0 12px 12px;
    }
    
    h3.blockhead {
    	border-radius:12px 12px 0 0 !important;
    }
    
    .body_wrapper {
    	margin:0 0.5em !important;
    }
    
    .popupbody {
    	top:1.5em !important;
    	border-radius:0 0.5em 0.5em 0.5em !important;
    	box-shadow:2px 2px 2px #999;
    }
    
    li.popupmenu:hover a.popupctrl {
    	color:#000 !important;
    	background-color:#E8E8E8 !important;
    	border-radius:0.5em 0.5em 0 0 !important;
    	text-shadow:1px 1px 1px #FFF;
    }
    
    .popuphover a,
    .popupbody a {
    	border-radius:0.5em !important;
    }
    
    #threads h3 a {
    	font-weight:normal !important;
    	color:#678 !important;
    }
    
    #threads .new h3 a {
    	font-weight:bold !important;
    	color:#58B !important;
    }
    It not only fixes all those issues mentioned above, I also took the time to pretty things up a bit with some CSS3 and redoing most of the paddings/margins... it even adds alternating line color highlighting on major lists, and puts back in the support for post you've already read to not be bold.

    For those of you not familiar with user.css and Opera -- save the above to a file called "sitepoint.css" (name really doesn't matter, I like to name them what they are), right click anywhere on these forums there's no content and choose "site preferences". Under the scripting tab, turn javascript off for a WONDERFUL speed boost -- then under the "display" tab point "my stylesheet" at the file you saved the above CSS as. Refresh and poof, you get the modified layout.

    The above code may or may not work in other browsers with user.css support. (you might want to add the -moz and -webkit prefixes to the CSS3 while at it)...

  2. #2
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    First of all, thanks for this. I was beginning to think I'd have to write a user.css myself, but you've done it for me.

    Quote Originally Posted by deathshadow60 View Post
    and puts back in the support for post you've already read to not be bold.
    Isn't happening for me, post title stays bold!

    EDIT: One problem with turning JS off is smilies don't get inserted when clicked on.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I just made this version for Firefox users:

    Code:
    @-moz-document domain(sitepoint.com) {
    
    	* {
    		font-size:100% !important;
    		line-height:140% !important;
    		font-family:arial,helvetica,sans-serif !important;
    	}
    
    	code,
    	pre,
    	pre span {
    		font:90%/130% "lucida console","courier new",monospace !important;
    	}
    
    	body {
    		font-size:85% !important;
    		line-height:140% !important; /* always restate */
    	}
    
    	html,
    	body,
    	#vbulletin_html {
    		width:100% !important;
    		padding:0 !important;
    		margin:0 !important;
    	}
    
    	.pagination span,
    	.pagination a {
    		top:0 !important;
    		vertical-align:top !important;
    	}
    
    	.pagination img {
    		top:0 !important;
    		vertical-align:middle !important;
    	}
    
    	#globalsearch {
    		width:auto !important;
    		padding-top:0.2em !important;
    	}
    
    	#globalsearch * {
    		float:none !important;
    		display:inline !important;
    		margin:0 2px !important;
    		vertical-align:middle !important;
    	}
    
    	#globalsearch span {
    		padding:0 !important;
    		margin:0 !important;
    	}
    
    	#globalsearch form {
    		right:0 !important;
    	}
    
    	#navtabs,
    	#navtabs * {
    		height:auto !important;
    	}
    
    	#navtabs a {
    		top:0 !important;
    		padding:0.25em 0.5em !important;
    	}
    
    	#navtabs a.popupctrl {
    		padding-right:16px !important;
    	}
    
    	#nrreview li.postbit:nth-child(2n+1),
    	#threads li.threadbit:nth-child(2n+1) {
    		background:#F4F8FF !important;
    	}
    
    	#nrreview li {
    		padding:0 0.5em 0.5em !important;
    		margin:0 !important;
    	}
    
    	#nrreview .header {
    		padding:0.5em 0 !important;
    		font-weight:bold;
    	}
    
    	.posthead {
    		padding:0.25em 0 !important;
    	}
    
    	.postrow {
    		padding:0.5em !important;
    	}
    
    	.userinfo {
    		width:184px !important;
    		padding:0.5em 0 !important;
    		margin-left:8px !important;
    	}
    
    	.username_container {
    		padding-bottom:0 !important;
    	}
    
    	.usertitle,
    	.rank {
    		padding-bottom:0.5em !important;
    	}
    
    	.username span {
    		word-wrap:break-word !important;
    		padding-left:16px !important; /* fixes centering */
    	}
    
    	.userinfo_extra * {
    		float:none !important;
    		display:block !important;
    		text-align:center !important;
    		line-height:120% !important;
    		word-wrap:break-word !important;
    		color:#444 !important;
    	}
    
    	.userinfo_extra dt {
    		font-weight:bold;
    		padding-top:0.5em !important;
    	}
    
    	.userinfo_extra dt:after {
    		display:none !important;
    	}
    
    	.blockrow {
    		background:none !important;
    	}
    
    	.section {
    		-moz-box-shadow:inset 0 0 32px #E0E8F0;
    		box-shadow:inset 0 0 32px #E0E8F0;
    	}
    
    	.section,
    	.blockbody {
    		-moz-border-radius:0 0 12px 12px;
    		border-radius:0 0 12px 12px;
    	}
    
    	h3.blockhead {
    		-moz-border-radius:12px 12px 0 0 !important;
    		border-radius:12px 12px 0 0 !important;
    	}
    
    	.body_wrapper {
    		margin:0 0.5em !important;
    	}
    
    	.popupbody {
    		top:1.5em !important;
    		-moz-border-radius:0 0.5em 0.5em 0.5em !important;
    		-moz-box-shadow:2px 2px 2px #999;
    		border-radius:0 0.5em 0.5em 0.5em !important;
    		box-shadow:2px 2px 2px #999;
    	}
    
    	li.popupmenu:hover a.popupctrl {
    		color:#000 !important;
    		background-color:#E8E8E8 !important;
    		-moz-border-radius:0.5em 0.5em 0 0 !important;
    		-moz-text-shadow:1px 1px 1px #FFF;
    		border-radius:0.5em 0.5em 0 0 !important;
    		text-shadow:1px 1px 1px #FFF;
    	}
    
    	.popuphover a,
    	.popupbody a {
    		border-radius:0.5em !important;
    	}
    
    	#threads h3 a {
    		font-weight:normal !important;
    		color:#678 !important;
    	}
    
    	#threads .new h3 a {
    		font-weight:bold !important;
    		color:#58B !important;
    	}
    }
    Just add that to your usercontent.css file... if you have one. If you don't, find your profile directory, and if there's no subdirectory called "chrome", make one. Then create a usercontent.css file in there with the above contents, reboot FF and my changes will be applied when you visit sitepoint.

    Heading to bed soon -- not sure if I'll have time to figure out how to do this in Chrome or Saffy.

    Though beware, they change the skin here, these files may give you a REALLY broken layout -- so when/if they update... remember you did this

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    Isn't happening for me, post title stays bold!
    I should have said thread title -- on a forum index like here:
    http://www.sitepoint.com/forums/foru...HTML-and-XHTML

    Threads you've read should now no longer be bold and appear in a darker blue than the ones you haven't read. Be sure you got the above version with the H3's at the bottom, and not the one I PM'd you earlier.

  5. #5
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    I should have said thread title -- on a forum index like here:
    http://www.sitepoint.com/forums/foru...HTML-and-XHTML

    Threads you've read should now no longer be bold and appear in a darker blue than the ones you haven't read. Be sure you got the above version with the H3's at the bottom, and not the one I PM'd you earlier.
    Sweet, got it working.

    For those looking for this same functionality on the "Whats New" page, heres a quick fix:

    Replace these:
    Code:
    #threads h3 a {
    	font-weight:normal !important;
    	color:#678 !important;
    }
     
    #threads .new h3 a {
    	font-weight:bold !important;
    	color:#58B !important;
    }
    With this:
    Code:
    #threads h3 a, .title {
    	font-weight:normal !important;
    	color:#678 !important;
    }
     
    #threads .new h3 a, a.threadtitle_unread {
    	font-weight:bold !important;
    	color:#58B !important;
    }

  6. #6
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    Heading to bed soon -- not sure if I'll have time to figure out how to do this in Chrome or Saffy.
    In Chrome (and Firefox) you can use a user styles manager addon, might be a bit safer (because the browser won't overwrite these when updating)

    Chrome Stylist: https://chrome.google.com/webstore/d...dgnbmeggkbjdhd
    Firefox Stylish: https://addons.mozilla.org/en-US/firefox/addon/stylish/
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  7. #7
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. This is really nice. It's nice to have the bold text for the unread and normal for the read topics back. I think I will go in and make the unread topics even bigger. I liked that, it was really usable.

    One question though. I notice there is much whitespace at the bottom of each post. Maybe I will try tweaking it just for experience sake. This is the first time I have messed with user CSS profiles for browsers. Very cool.

  8. #8
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is what I mean about the space. Is there a way to get rid of that?

    forum.jpg

  9. #9
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some useful changes in there, DS, although I'd add a bottom border to links (at least in paragraphs) if you haven't already. I could hardly see the links from surrounding text until I sorted that out in user CSS. I'd like to meet the moron at VBulletin who thought that links don't need to be underlined.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sdt76 View Post
    Here is what I mean about the space. Is there a way to get rid of that?
    While the pic hasn't been approved, I know EXACTLY what you are referring to... and it's part of why even though a post page isn't EXACTLY tabular data I'd be using a table on it -- as their NOT using tables means you can't bottom align the signature box... so they put it after BOTH the post and the user info... so a really short post ends up the height of the signature/controls and the user info box.

    Though in a way it is since the columns are the same type of data, and the rows are each post -- that could actually be considered tabular data... I'm not AS offended by that non-table layout as I am say... any of the board indexes which are OBVIOUSLY tabular data, which they went and nest UL, LI, OL, do content cloaking on heading tags instead of having actual relationships, etc, etc... Part of why the average board entry on the board index ends up 3.5k to do 2k's job.

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adh32 View Post
    Some useful changes in there, DS, although I'd add a bottom border to links (at least in paragraphs) if you haven't already. I could hardly see the links from surrounding text until I sorted that out in user CSS. I'd like to meet the moron at VBulletin who thought that links don't need to be underlined.
    Yeah, that's annoying too -- definitely something to fix. I don't mind it on breadcrumbs, headings, etc... but there's no excuse for killing text-decoration:underline inside posts as it is indeed a usability nightmare, especially if the color chosen is indistinguishable from flow text. I'm still not sure how the hell Wikipedia gets away with doing it.

  12. #12
    SitePoint Addict
    Join Date
    Jul 2011
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    While the pic hasn't been approved, I know EXACTLY what you are referring to... and it's part of why even though a post page isn't EXACTLY tabular data I'd be using a table on it -- as their NOT using tables means you can't bottom align the signature box... so they put it after BOTH the post and the user info... so a really short post ends up the height of the signature/controls and the user info box.

    Though in a way it is since the columns are the same type of data, and the rows are each post -- that could actually be considered tabular data... I'm not AS offended by that non-table layout as I am say... any of the board indexes which are OBVIOUSLY tabular data, which they went and nest UL, LI, OL, do content cloaking on heading tags instead of having actual relationships, etc, etc... Part of why the average board entry on the board index ends up 3.5k to do 2k's job.
    Yeah I tend to agree that they are tabular data. The header is the date: (Yesterday 15:55) and the data beneath corresponds directly to the header to let us know what was entered under that time. To me that is no-brainer table.

    So basically it would be pretty tough to get rid of that extra space? I haven't gotten a chance to fiddle with it yet.

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Great thread, Jason and others. I had a stylesheet for the old forum, but hadn't gotten around to doing one for the new design. This is great.

    I like the way you can choose the location of your user style sheet in Opera, rather than having to burrow in to some godforsaken dungeon folder to bury it forever.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    In Chrome ... you can use a user styles manager addon
    It comes with no instructions that I can find. (Why do these geeks always thing this stuff will be obvious?)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •