opensuse forum redesigned with userstyle

This is a redesign of this forum that you can use on firefox with the stylish]( plugin. I’ve been using stylish for years. It is safe and stable.

What this style does:

  • fix nicknames left shifted (I hope so)
  • suppress the right sidebar
  • set a more approriate column width in forum pages
  • get rid of the grey gradient
  • increase font size to 14px on the home page
  • reduce icon size to 32x32 on homepage
  • customize colors
  • replace the ugly icons

Feel free to take what you like from this style by commenting out what you don’t want (using CSS comments /* … */ ), set the font size according to your eyes and replace the colors according to your tastes - like pink, yellow purple … and post the result here. lol! … and let’s hope the forum designer(s) won’t change the CSS next week (as the style won’t work then).

I don’t post the whole style here, as it has some icons encoded in base64. This is uninteresting and too long. But you can see the entire code on openSUSE forum redesigned. You’ll also use this link to install it. Once it is installed in stylish, you can enable/disable it any time.

The styles are stored in a single sqlite file in your firefox profile: stylish.sqlite. Stylish puts its stuff in ~/.mozilla/firefox/<profile>/extensions/{46551EC9-40F0-4e47-8E18-8E5CF550CFB8}

Here’s the CSS code (except for the icons):

/* openSUSE Forum - redesigned (readable again)                           */
/* by Agnelo de la Crotche - 03.01.2011  -      */
/* - fix nicknames left shifted                                           */
/* - suppress the right sidebar                                           */
/* - set a more approriate column width in forum pages                    */
/* - get rid of grey gradient                                             */
/* - increase font size to 14 px on the home page                         */
/* - reduce icon size to 32x32 on homepage                                */
/* - customize some colors                                                */
/* - replace the ugly icons                                               */

@namespace url(;

@-moz-document domain( {
* { -moz-appearance: none !important; }

/* **** FIX NICKNAMES LEFT SHIFTED BUG ***************************** */
.username_container * { left: 0px !important }
/* ***************************************************************** */

/* **************   SIDEBAR  *************************************** */
/* removing right sidebar */
#sidebar_container { display: none !important; }
#content_container, #content { margin-right: 0px !important; }
/* ***************************************************************** */

/* **************   COLUMN WIDTH  ********************************** */
/* Changing column width in forums */
.threadlisthead span.threadinfo {width: 70% !important}
.threadlisthead span.threadstats {width: 10% !important}
.threadlisthead span.threadlastpost {width: 10% !important}
.threadbit .threadinfo {width: 70% !important}
.threadbit .threadstats {width: 10% !important} 
.threadbit .threadlastpost, .threadbit .threaddeleted {width: 10% !important}
/* ***************************************************************** */

/* **************   FONT SIZE  ************************************* */
/* increasing fontsize on homepage (14px) */
.forumbit_nopost * {font-size: 14px !important;}
/* ***************************************************************** */

/* **************   ICON SIZE  ************************************* */
/* reducing icon size on homepage (32x32) */
.forumicon { width: 32px !important }
/* ***************************************************************** */

/* **************   REMOVE GREY GRADIENT *************************** */
/* and set white background to forum headers */
.forumdata, .forumrow {background: transparent !important} 
.forumrow {background-color: #ffffff !important}
.threadbit .threadinfo, .threadbit .threadstats, .threadbit .threadlastpost, 
.threadbit .sticky, .threadbit .nonsticky {
background: transparent !important; background-color: #ffffff !important} 

/* **************   MISC COLORS  ************************************ */
/* Changing some colors for fun */
html {background-color: #e6ffe6 !important}
.body_wrapper {background-color: #e6ffe6 !important} 
.forumhead {background-color: #123a17 !important}
.forumhead h2 span {color: #daf0dc !important}
.subforumdescription {background-color: #DEEBBB !important}
.threadlisthead {background-color: #87B987 !important}
.thread_controls {background-color: #BAD695!important}
.postbit {background-color: #ABDE67 !important }
.posthead {background-color: #D0DEBC !important}
.postfoot * {background-color: #D0DEBC !important}
.bbcode_code {background-color: #FFFDBB !important}
.bbcode_quote {background-color: #E4FF9F !important}

/* info box title bars */
.wgo_block h2 span {background-color: #1F4921 !important}
.forum_info .optiontitle {background-color: #1F4921 !important}
.thread_info .optiontitle {background-color: #1F4921 !important}

/* links colors */
.forumhead .forumtitle a {color: #80ff01 !important}
.forumhead .forumtitle a:hover {color: #ffffff !important}

a.title { color: #29509D !important}
a.title:visited { color: #466195 !important; font-weight: normal !important}
a.title:hover { color: #464a95 !important}

.threadlisthead a, h2.searchlisthead a {color: #000000 !important}
.threadlisthead a:hover, h2.searchlisthead a:hover {color: #000340 !important}

/* ***************************************************************** */

You might also use only the part above - withouth the icons.

Some screenshots:](…](

If you don’t like the green, just change the RRGGBB values in the color section or comment out this section. I didn’t spend too much time choosing colors.

Works and looks good. Thanks!

I use Chrome mostly. I saw a selection for chrome. Does it work for that browser also?

Yes it does. There is a Stylish version for Chrome (from the same author). It’s not as mature as the FF version but it works.

Yes got it installed on chrome and looks fine. Thank you.

Some funny hacks besides:

  • hide avatars
.postuseravatarlink {display: none !important}
  • hide users’ reputation
img.repimg {display: none !important}
  • hide users’ ranks
span.rank img {display: none !important}
  • anonymous forum - hide names
.contact {display: none !important}
  • hide caf4926’s scaring avatar
.postuseravatarlink img[src*="caf4926"] {display: none !important}
  • diminish caf4925’s exagerated reputation lol!
img.repimg[title^="caf4926"] + img.repimg[title^="caf4926"] {display: none !important}
  • give jdmcdaniel3 all the stars he deserves :slight_smile:

img[alt*="jdmcdaniel3"] + img.repimg { 
height:0px !important; width:17px !important;padding-top:10px !important;
background-repeat:no-repeat !important;
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAKCAYAAABSfLWiAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sBBQU6Cn0kakIAAADlSURBVCjPhdI9TgJBGAbgZ3YXkzVEgo2lsfAMnIJbWOApTGy8AueQU3AGCw5gIXER2D+w2IVCYXmbmfnmycx8yQSYzEbPeMNAk088Tcfz93bdacJkNoqRPdzv02GfJOYr42MRFnicjuf1JROhHyLpsM9NyiDlbghu0W9v7TQJBM3pvZjrHtXOv3SZBPaoasqatWb8my6THCY/ZVuIyUsnc84kh2uyNcUVSURROfmUc+bYTpazqYgC9e50O+dMgpW9TZ5Ly6gp7urjP1i1rtNE0/G8xkvxHertMtgugyILG7y2ey6ZX+vTiXQikxcDAAAAAElFTkSuQmCC") !important;

  • introduce some trolls :open_mouth:
img[src*="lizards.png"] {
height:0px !important; width:22px !important;padding-top:23px !important;
background-repeat:no-repeat !important;
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAXCAYAAAAP6L+eAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB9sBBQUNEv5PUiAAAAAdaVRYdENvbW1lbnQAAAAAAENyZWF0ZWQgd2l0aCBHSU1QZC5lBwAAA0NJREFUOMvdlLtvXEUUh7+59+57sy+/k2CHgEBCcRCksCCKFMmCYIJkIyj5DxAVDRU9SoVAFOkQpRF0CSAKIyiIQCKKUGIwtuWX/Ei8a99d38fM3BmKLDZ+rAFRwVSj+c35zpwzMz/4rw3xdzeOjVAylqcdwfzNWyz/K/CL5ykUKrznuM5EJpst9vd59sGDyPjbKnEc+6nby1uTkyT/CPzSc4wW8ulPLj7fVTs37GSEiAgCRX0rRU/N47tvm8H0dPD9lsPVqSmig/HuUdDxS7z7yOnK+6+93tU90NfwZFQnjiJufK3RMqZWbjE4dCKllBhobqgnphf47CDDObjw8gjj3b2Vt8cn8iXHLhOGAUrBnXse84uGXE6glGWn2WD4XC4LYuzyZbLHgsdGeKpYzn/8ytVyKdpZQ8YGJUFKl9t3wVqHnqpFKVDKImXE4FDGzYZMHAvOZvngypXesklWkdK0AbCwkqKxlVAtuzjCIiVICXEYU6umS16KZw6CvT8mL1zkZC5fvFCrRgQtiTFgDGBd7v4qSLShv8dDyj9pQBRZEsX9juAsvDl8vlIIdjZRit3gVpBmYUUBDt1VUHJPQwiiyEhraXQEuy6vnjqZ8aIg3A00BuYXPZQMKRaylIsaqcC2Ncf1qDdsYAVzHcEWp4RIkO3TWvNQXlkzGANnBzPI2N+XVLhZGo3t6MtbTHUEC5ycScy+UhOTZmNT46UynOrRKGX3oCLN+rqOjDYfArYjODFJImN3X383/TRx3OTsUAlrfJR+WIm1AkSepaVWaGKuH/XJ9p6bsZ8vLYfWkkdK0Fpwv+6CcDndZ4njBKVAKsApc++X0JeRfuPmT4dfxD6w1Hw0N+tve6kaOnFRyqXZEjz5aIm000JJSLSL41aZndOtIIivffEjNzp5za5XzK6wPtinLjR9e6a/vyuttUE4RXoqPlpbHDeH1CeYmdnx61vh9a9+4Bqgj+rvIROaWWJyoCLPbNbl44KsVy5nHSU9/KabrK3qcGnFX7szo9+5/RvfAOn2Hal2gr+0zcKzj3GpUGA0n2HUWJK6z8/1JrOLq0wn0AR8YBtoABtw2JPFMS1KAzmgAOTb9xEBARC255L/zfgdiRW6pAHVNUoAAAAASUVORK5CYII=") !important;