Saturday, May 19, 2012

'Stylish' Styles for Ubuntu Forums - How to Change the Look of UF

The overall theme and appearance of the official Ubuntu Forums was revamped recently to match the current Ubuntu branding. Now, it features quite a heavy, orange-coloured header, an orange-coloured navigation bar as well as orange-coloured buttons and an Ubuntu-branded element set. While there are many who are amazed by the new look of the Ubuntu Forums, there are quite a few who don't like this shiny, glowing and quite unfinished* look.

For the latter group, including myself and Krytarik, the 'Stylish' browser add-on is all that is needed to tweak the look of the Ubuntu Forums, or any other website as well, for that matter. Krytarik has created two 'Stylish' styles for the Ubuntu Forums, a light one and a dark one. You can choose any of these and you can also edit the styles to match your liking.

*) added by Krytarik

Ubuntu Forums DefaultKrytarik LightKrytarik Dark

Setup

These instructions are basically targeted on Firefox, but you can adapt them to Chrome / Chromium by following the instructions below.

First of all, you need to install the 'Stylish' add-on in your Firefox browser from here:

https://addons.mozilla.org/en-US/firefox/addon/stylish/

After installing 'Stylish' and restarting Firefox, the add-on bar at the bottom of the Firefox window should show up automatically. If it doesn't, go to 'View > Toolbars' and enable the 'Add-on Bar'. Now, click on the small 'Stylish' icon at the left edge of that bar, go to 'Write new style > Blank style...' and add a new entry as shown in the screenshot below:


You can change the name and tag of these styles to anything for your own convenience.

For the Light style, copy & paste this code into the Stylish editor (use 'Ctrl + V' or the context menu for pasting):

/*************************************************/
/******** Ubuntu Forums - Krytarik Light *********/
/******** Author: Krytarik Raido *****************/
/*************************************************/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("ubuntuforums.org") {


body,
.page,
.vbclean_bottomfg,
.vbclean_bottom *,
ul.tab_list li.thead:hover,
ul.tab_list li.thead:hover *,
ul.tab_popup li.vbmenu_option:hover,
ul.tab_popup li.vbmenu_option:hover * {
background: #f7f6f5 !important;
}

.vbclean_newthreadfg {
text-shadow: 1px 1px 1px rgb(51, 51, 51) !important;
}

.ubuntu_quotebackground {
background: #ededed !important;
border-color: #d3d3d3 !important;
}

.vbclean_postbitmsgfg,
.vbclean_postbitmsg * {
background: #e0e0e0 !important;
}

.vbclean_postbitleg * {
background: none !important;
}

.tborder,
.tfoot {
border: none !important;
box-shadow: none !important;
}

.vBulletin_editor,
#vB_Editor_001_iframe,
#vB_Editor_QR_hider,
#vB_Editor_QR_iframe {
border-width: 1px !important;
}

textarea,
.bginput {
border: 1px inset !important;
}

.smallfont .time {
color: inherit !important;
}

.vbclean_topfg,
#searchbox,
img[src*="icon14.gif"],
img[src*="icon13.gif"],
img[src*="icon12.gif"],
img[src*="icon11.gif"],
img[src*="icon10.gif"],
img[src*="icon9.gif"],
img[src*="icon8.gif"],
img[src*="icon7.gif"],
img[src*="icon6.gif"],
img[src*="icon6.gif"],
img[src*="icon5.gif"],
img[src*="icon4.gif"],
img[src*="icon3.gif"],
img[src*="icon2.gif"],
img[src*="icon1.gif"] {
display: none !important;
}

img[src*="thread_dot_hot.gif"],
img[src*="thread_dot_hot_lock.gif"],
img[src*="thread_dot.gif"],
img[src*="thread_dot_lock.gif"],
img[src*="thread.gif"],
img[src*="thread_lock.gif"],
img[src*="thread_hot.gif"],
img[src*="thread_hot_lock.gif"] {
width: 0px !important;
height: 7px !important;
background: #3e3e3e !important;
margin-left: 8px !important;
padding-left: 7px !important;
}

img[src*="thread_dot_hot_new.gif"],
img[src*="thread_dot_hot_lock_new.gif"],
img[src*="thread_dot_new.gif"],
img[src*="thread_dot_lock_new.gif"],
img[src*="thread_new.gif"],
img[src*="thread_lock_new.gif"],
img[src*="thread_hot_new.gif"],
img[src*="thread_hot_lock_new.gif"] {
width: 0px !important;
height: 7px !important;
background: #dd4814 !important;
margin-left: 8px !important;
padding-left: 7px !important;
}

img[src*="moved"] {
width: 0px !important;
height: 7px !important;
background: #556b2f !important;
margin-left: 8px !important;
padding-left: 7px !important;
}

}

Last updated: 7/13/2012

For the Dark style, copy & paste this code into the Stylish editor (use 'Ctrl + V' or the context menu for pasting):

/************************************************/
/******** Ubuntu Forums - Krytarik Dark *********/
/******** Author: Krytarik Raido ****************/
/************************************************/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("ubuntuforums.org") {


* {
background: #262626 !important;
border-color: #3e3e3e !important;
box-shadow: none !important;
color: #f2f2f2 !important;
}

.vBulletin_editor,
#vB_Editor_001_iframe,
#vB_Editor_QR_hider,
#vB_Editor_QR_iframe {
border-width: 1px !important;
}

.vbclean_topfg,
#searchbox,
img[src*="icon14.gif"],
img[src*="icon13.gif"],
img[src*="icon12.gif"],
img[src*="icon11.gif"],
img[src*="icon10.gif"],
img[src*="icon9.gif"],
img[src*="icon8.gif"],
img[src*="icon7.gif"],
img[src*="icon6.gif"],
img[src*="icon6.gif"],
img[src*="icon5.gif"],
img[src*="icon4.gif"],
img[src*="icon3.gif"],
img[src*="icon2.gif"],
img[src*="icon1.gif"] {
display: none !important;
}

img[src*="user_online.gif"] {
width: 0px !important;
height: 7px !important;
background: #556b2f !important;
padding-left: 7px !important;
}

img[src*="user_offline.gif"] {
width: 0px !important;
height: 7px !important;
background: #7b3303 !important;
padding-left: 7px !important;
}

img[src*="thread_dot_hot.gif"],
img[src*="thread_dot_hot_lock.gif"],
img[src*="thread_dot.gif"],
img[src*="thread_dot_lock.gif"],
img[src*="thread.gif"],
img[src*="thread_lock.gif"],
img[src*="thread_hot.gif"],
img[src*="thread_hot_lock.gif"] {
width: 0px !important;
height: 7px !important;
background: #3e3e3e !important;
margin-left: 8px !important;
padding-left: 7px !important;
}

img[src*="thread_dot_hot_new.gif"],
img[src*="thread_dot_hot_lock_new.gif"],
img[src*="thread_dot_new.gif"],
img[src*="thread_dot_lock_new.gif"],
img[src*="thread_new.gif"],
img[src*="thread_lock_new.gif"],
img[src*="thread_hot_new.gif"],
img[src*="thread_hot_lock_new.gif"] {
width: 0px !important;
height: 7px !important;
background: #dd4814 !important;
margin-left: 8px !important;
padding-left: 7px !important;
}

img[src*="moved"] {
width: 0px !important;
height: 7px !important;
background: #556b2f !important;
margin-left: 8px !important;
padding-left: 7px !important;
}

img[src*="report.gif"] {
width: 0px !important;
height: 14px !important;
background-color: #dd4814 !important;
padding-left: 14px !important;
}

}

Last updated: 6/21/2012

You can switch between these two, or any other styles, by clicking the 'Stylish' icon in the add-on bar, and you can also switch them off completely.

If you want to adjust the background colour of the Dark style to your liking, for example, to make it a bit lighter, change the settings in the first block of its code.

Chrome / Chromium

Deviating from the instructions above, follow these different / additional steps:
  • Install the 'Stylish' extension for Chrome / Chromium.
  • Spare the blue-marked lines at the beginning and the end of the styles' code.
  • Set the 'Applies to' setting of the styles to 'URLs on the domain' and 'ubuntuforums.org' as shown in the screenshot below.

New Style

3/7/2013: If you are looking for a way to vastly improve the look of the new Ubuntu Forums setup, introduced with the switch to vBulletin 4 last week, I've just created a new style for that, just handle it according to the instructions above.

P.S.: I want to mention that this time, the people in charge of the administration/design of the Ubuntu Forums know of my work and have got copies of it - what they do with it, is up to them, obviously.

-- Krytarik Raido

/*************************************************/
/******** Ubuntu Forums - Krytarik New ***********/
/******** Author: Krytarik Raido *****************/
/*************************************************/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("ubuntuforums.org") {

body a {
    color: #000000 !important;
}

body a:hover {
    color: #dd4814 !important;
    text-decoration: underline !important;
}

.navlinks a {
    color: #5d5d5d !important;
}

.forum_info a,
.thread_info a {
    color: #3e3e3e !important;
}

.announcerow .announceinfo a {
    text-decoration: none !important;
}

.announcerow .announceinfo a:hover {
    text-decoration: underline !important;
}

.signature a {
    text-decoration: underline !important;
}

.toplinks a,
.navtabs a,
.navbar_advanced_search a,
.announcerow a,
.footer_links a,
.blockhead a {
    color: #ffffff !important;
}

.announcerow a:hover,
.footer_links a:hover {
    color: #ffffff !important;
}

.popupmenu .popupbody li label,
.popupmenu .popupbody a,
.navtabs li.selected a.navtab,
.toplinks ul .popupbody li {
    color: #000000 !important;
}

.toplinks a:hover,
.navtabs a:hover,
.navbar_advanced_search a:hover,
.blockhead a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.toplinks a.popupctrl,
.toplinks a.popupctrl:hover,
.toplinks a.popupctrl.active {
    background: transparent url("http://ubuntuforums.org/images/ubuntu-VB4/misc/arrow.png") no-repeat right center !important;
}

.toplinks > ul > li > a,
.toplinks > ul > li > a:hover,
.toplinks ul li .logindetails {
    background: none !important;
}

.toplinks ul li .loginbutton {
    background: transparent !important;  /*old: #efefef*/
    margin-top: 2px !important;
}

.blocksubhead a {
    color: #000000 !important;
}

.navtabs li.selected a.navtab:hover,
.threadlisthead a:hover,
.toolsmenu a:hover,
.blocksubhead a:hover,
.cke_panel_listItem a:hover {
    color: #000000 !important;
    text-decoration: none !important;
}

.popupmenu .popupbody a:hover,
#usercp_nav a:hover,
#admincp_nav a:hover {
    background-color: #ffeb90 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

.toolsmenu .menusearch .popupbody a:hover {
    background: none !important;
}

a.newcontent_textcontrol,
#searchtypeswitcher.floatcontainer li.selected a {
    color: #ffffff !important;
}

#searchtypeswitcher.floatcontainer li a:hover {
    color: #000000 !important;
    text-decoration: none !important;
}

a.newcontent_textcontrol:hover,
#searchtypeswitcher.floatcontainer li.selected a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.navbit a,
.forumtitle a,
.pagetitle a,
.postbody .content a,
.pagination a,
.notices li a,
.blockrow.restore a,
.attachment a,
#attachmentlist .thumbnail_link a,
#new_subscribed_threads .threadbit .threadmeta a[href^="newreply"],
#new_subscribed_threads .threadbit .threadmeta a[href^="subscription"],
.popupbody span.selected {
    color: #dd4814 !important;
}

.pagination .selected a {
    color: #ffffff !important;
}

.blockrow.signature.restore a {
    color: #000000 !important;
}

a.username span:hover,
.postdetails .username span:hover {
    color: #dd4814 !important;
}

.postfoot a:hover,
.pagination a:hover {
    text-decoration: none !important;
}

.pagination span a:hover {
    border-color: #dd4814 !important;
}

.attachment a:hover {
    background: none !important;
    border-color: transparent !important;
}

a.textcontrol,
.navpopupmenu.popupmenu.nohovermenu a.textcontrol,
.navpopupmenu.popupmenu.nohovermenu a.popupctrl,
#inlinemod_formctrls a.popupctrl {
    color: #424242 !important;
}

a.textcontrol:hover,
.navpopupmenu.popupmenu.nohovermenu a.textcontrol:hover,
.navpopupmenu.popupmenu.nohovermenu a.popupctrl:hover,
#inlinemod_formctrls a.popupctrl:hover,
.blockrow .button:hover,
.popupbody .button:hover,
.lightbox .buttonrow .button:hover,
.button[onclick="window.close();"]:hover,
.button[value="Show Threads"]:hover {
    color: #424242 !important;
    text-decoration: none !important;
}

.moreactivity a {
    color: #3E3E3E !important;
}

.moreactivity a:hover {
    color: #3E3E3E !important;
    text-decoration: none !important;
}

a.firstunread {
    font-size: 12px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin-right: 7px !important;
}

.attachment a {
    display: inline !important;
}

/** hotfix for nasty Topic Review bug **/
a#collapse_nrreview {
    background: transparent url(http://ubuntuforums.org/images/ubuntu-VB4/buttons/collapse_collapsed_40b.png) !important;
    height: 16px !important;
    width: 16px !important;
}

/*************** END Hyperlinks ***************/

/*body {
    min-width: 890px !important;
}*/

.lastedited .time,
.blocksubhead {
    color: #000000 !important;
}

.threadlisthead,
.blockbody,
#usercp_nav .blockbody,
#usercp_nav .blockbody .blockrow,
#admincp_nav .blockbody,
#admincp_nav .blockbody .blockrow {
    background: #ffffff !important;
}

.threadlisthead {
    box-shadow: none !important;
}

.body_wrapper {
    padding-top: 5px !important;
}

.toolsmenu,
.forum_info .blockhead,
.thread_info .blockhead,
.wgo_block .blockhead,
.navlinks,
.notices li,
.forumhead,
.forumrow,
.threadbit .sticky,
.bbcode_quote,
.postfoot .textcontrols,
.searchlisthead,
.toolsmenu .menusearch .popupbody,
.pagination .popupbody {
    background: #efefef !important;
}

.bbcode_code {
    overflow: auto !important;
    word-wrap: normal !important;
    background: #efefef !important;
    font-size: 14px !important;
}

.postbody,
.bbcode_quote .bbcode_code {
    background: #fcfcfc !important;
}

.postcontainer .postbody .after_content {
    clear: none !important;
    margin-top: 2em !important;
}

.popupbody li.formsubmit {
    background: none !important;
}

.activitybit.forum_post,
.activitybit.forum_thread {
    background: #f5f5f5 !important;
}

.formcontrols input.textbox {
    height: auto !important;
}

.formcontrols .blockrow input.textbox,
.formcontrols .blockrow textarea {
    font-size: 13px !important;
}

.formcontrols .blockrow input.textbox:focus,
.formcontrols .blockrow textarea:focus {
    background: #ffffff !important;
}

.newactivity,
.moreactivity {
    height: 20px !important;
    padding-top: 7px !important;
    font-size: 10px !important;
}

.postbit .userinfo_extra {
    width: 110px !important;
}

.postbit .userinfo_extra dl.userstats {
    width: 95px !important;
}

.postbit .userinfo_noavatar .contact .username_container {
    margin-left: 0 !important;
}

.postbit .userinfo_noavatar .contact {
    font-size: 12px !important;
}

#nrreview .postbit {
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.threadlisthead .threadinfo,
.threadbit .threadinfo {
    padding-right: 35px !important;
}

.threadlisthead .threadstats,
.threadlisthead .threadlastpost,
.threadbit .threadstats,
.threadbit .threadlastpost {
    padding-left: 5px !important;
    text-align: left !important;
}

.threadbit .threadlastpost dd {
    margin: 0 !important;
}

.threadlisthead .threadstats,
.threadbit .threadstats {
    width: 115px !important;
}

.threadlisthead .threadlastpost,
.threadbit .threadlastpost {
    width: 150px !important;
}

.threadbit a.threadstatus {
    width: 46px !important;
}

.threadlisthead img.sortarrow,
.threadbit img,
.thumbnail_link img {
    vertical-align: middle !important;
}

.threadlisthead img.sortarrow {
    padding-left: 1px !important;
}

.threadbit .threadtitle img[src^="http://ubuntuforums.org/images/icons/"] {
    display: none !important;
}

#searchbits .threadbit .searchtitle {
    height: auto !important;
}

#searchbits .threadbit .threadlastpost {
    width: 170px !important;
}

#searchbits .threadpostedin {
    padding-right: 10px !important;
}

#searchbits .threadlastpost .time {
    display: none !important;
}

.threadbit .threadpostedin p {
    margin-left: 5px !important;
}

.memberaction .popupbody {
    min-width: 140px !important;
    width: 140px !important;
}

.memberaction .popupbody li.right {
    float: left !important;
    clear: left !important;
}

.bbcode_quote,
.formcontrols,
.faqblock .blockbody,
#searchform_tagcloud .blockbody,
.textbox, textarea, select,
#registerform #forumrules,
.pagination span a,
#usercp_nav .blockbody,
#admincp_nav .blockbody,
.sortrow,
.pmlist .blockrow,
.settings_form_top_border,
.blockbody.settings_form_border,
.userprof_headers_border,
.profile_content .actionbuttons,
.userprof_editor,
.requestlist > li,
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd,
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-bd,
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-ft,
.popup_title,
#upload_controls_container,
div#uploadprogress_container,
div.uploadprogress_footer {
    border-color: #c4c4c4 !important;
}

.memberaction .popupbody,
.toolsmenu .menusearch .popupbody,
.pagination .popupbody,
.searchlisthead,
.userlist_showavatars li {
    border: 1px #c4c4c4 solid !important;
}

.postcontainer .postbody {
    border: 1px #dddddd solid !important;
    border-right: 0 none !important;
}

.formcontrols .blockrow {
    border-color: #dddddd !important;
}

#usercp_content .threadlisthead {
    border-bottom: 1px #c4c4c4 solid !important;
}

ul.avatarlist li div.avatar,
#smilies ul.smilielist li div.smilie {
    border-top: 1px #c4c4c4 solid !important;
}

ul.avatarlist li div.label,
#smilies ul.smilielist li div.label {
    border-top: 1px #dddddd solid !important;
    border-bottom: 1px #c4c4c4 solid !important;
}

.attachment_title {
    font-size: 14px !important;
}

span.cke_skin_kama {
    padding: 0 !important;
}

.cke_skin_kama .cke_wrapper.cke_ltr,
.cke_skin_kama .cke_wrapper.cke_rtl {
    background-color: #d5d5d5 !important;
}

.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd h2,
.yui-skin-sam .yui-layout .yui-layout-unit div.yui-layout-hd div,
.popup_title {
    background-color: #dd4814 !important;
}

.ygtvfocus, .assetclick {
    background-color: #e9e9e9 !important;
}

#sidebar_container .underblock {
    height: 0 !important;
    background: none !important;
}

.formcontrols .blockrow.texteditor {
    border-top: 0 none !important;
}

dl.icon_legends dt,
.permissions dl dt {
    clear: both !important;
}

.toplinks,
.toplinks ul li a {
    padding-top: 3px !important;
}

.toplinks ul.isuser li.welcomelink {
    padding: 3px 10px !important;
    -webkit-padding-before: 1px !important;
}

.navtabs ul li {
    margin-top: 0 !important;
    border-right-color: transparent !important;
}

.navtabs .popupbody {
    margin-top: -7px !important;
    padding: 1px !important;
    border: 0 none !important;
}

.navtabs .popupbody li {
    border-left-color: #d05630 !important;
    border-right-color: #d05630 !important;
    border-top-color: #e1e1e1 !important;
    border-bottom-color: #e1e1e1 !important;
}

.navtabs .popupbody > li:first-child {
    border-top-color: #d05630 !important;
}

.navtabs .popupbody > li:last-child {
    border-bottom-color: #d05630 !important;
}

.navtabs .popupbody li {
    border-left-color: #d05630 !important;
    border-right-color: #d05630 !important;
}

.globalsearch,
.globalsearch .textboxcontainer span {
    width: auto !important;
}

.globalsearch .buttoncontainer {
    margin-right: 15px !important;
}

.navbar_advanced_search li {
    padding-top: 1px !important;
    height: auto !important;
}

#searchtypeswitcher {
    border-bottom: 0 none !important;
}

.notices li {
    margin-bottom: 10px !important;
}

.forumhead {
    margin-bottom: 6px !important;
}

.faqblock .blockhead {
    margin-top: 6px !important;
}

.forumhead .forumtitle,
.forumhead .forumtitle a {
    font-size: 16px !important;
}

.forumhead .forumtitle {
    text-indent: 0 !important;
    margin-left: 10px !important;
}

.forumhead h2 {
    padding: 0 !important;
}

.forumhead .forumtitle {
    padding: 3px 0 !important;
}

.forumhead .forumtitle a {
    margin-left: -3px !important;
}

.footer_links {
    margin-top: 5px !important;
}

/*** enable to disable dotted page background ***/

/*body {
    background: #ffffff !important;
}

.body_wrapper {
    box-shadow: none !important;
}*/

/*** enable to hide middle row in navbar ***/

/*#navtabs > li,
#navbar_search {
    display: none !important;
}

.navbar {
    height: 26px !important;
}

.navtabs ul {
    top: 0 !important;
}

.navtabs .popupbody {
    top: 28px !important;
}

.globalsearch {
    top: 3px !important;
}*/

/*** enable to hide Quick Reply ***/

/*.qrcontainer,
a.quickreply[title^="Quick reply"] {
    display: none !important;
}*/

}

Last updated: 5/24/2014

Related Posts:

Appearance , Web Browser