You are not logged in.

René

Administrator

  • "René" is male
  • "René" started this thread

Posts: 1,590

Location: Berlin

Occupation: KB

  • Send private message

1

Sunday, October 11th 2009, 8:11am

useful CSS snippets for WBB 3.1

In this thread we'll collect useful CSS declarations to modificate the Look of WBB 3.1 (Volcano).
We start with a post concerning the mainMenu Icons...

hide the mainMenu Icons

As you know WBB 3 uses a lot of icons and maybe you don't want them to show everywhere. At first sight there is no option in the acp to hide the mainMenu Icons. You can choose to hide the text but the icons will stay.

But you have the "Additional CSS Declarations" and with a little knowledge of CSS ans some the declaration you can quickly achieve the desired results: The Code for the mainMenu is:

Cascading style sheet

1
#mainMenu ul li img {display: none !important;}
Kein Support via PN, E-Mail oder Messenger.

René

Administrator

  • "René" is male
  • "René" started this thread

Posts: 1,590

Location: Berlin

Occupation: KB

  • Send private message

2

Tuesday, April 20th 2010, 11:53am

smallButtons without spaces

From time to time you may wish to have the smallButtons not to be sepearated by spaces. To show what I mean, here's a screenshot first in the standard view of Blue Sunrise.



To remove the spaces between the buttons you have to put the following CSS to the additional CSS declarations:

Cascading style sheet

1
2
3
4
#tplThread .smallButtons li {margin-left: 0; margin-right: 0; border-right: 0;}
#tplThread .smallButtons li a {border-right: 0;}
#tplThread .smallButtons li:first-child {border-right: solid 1px #colorcode;}
#tplThread .smallButtons li:first-child a {border-right: solid 1px #colorcode;}


You should get something like this:



Some Explanations: To only have the effect in the thread view I added the ID #tplThread. I did this because there are sites in the Burning Board (where it can happent that) there's only a single smallButton - in cases like that you would have a problem when the border at the right side is missing and that's the weak point of this example.

The first line removes the outer spaces between the buttons and the right outer border.
The second line removes the right inner border.
The third line creates a right outer border for the first button (first-child).
The fourth line creates a right inner border for the first button.

Attention: The code will only work as shown if the buttons are aligned right. If the buttons are aligned left the code will have to be modified.

The phenomenon that you have to remove the right border from the first button and the first button (first-child) is the las to be shown is a result of the buttons being aligned right.
Kein Support via PN, E-Mail oder Messenger.

René

Administrator

  • "René" is male
  • "René" started this thread

Posts: 1,590

Location: Berlin

Occupation: KB

  • Send private message

3

Saturday, May 8th 2010, 12:31pm

Change the icon in the search box

If you're using an own iconset for a style you have the problem that several icons are not replaced automatically. in some cases thats for a technical reason because the icons are build in via script and some other icons are build in via CSS - and that's where you have the possibility to change the icons for the style. One of these icons is the search icon in the header's search box. To change it, simply add the following code to your style's additional CSS declarations:

Cascading style sheet

1
#search #searchInput {background-image: url("../icon/iconsetDirectory/searchHeadOptionsS.png") !important;}


iconsetDirectory has to be replaced by the name of the directory that contains your iconset.

If you overwrite the standard iconset of WBB you (logically) won't have that problem.
Kein Support via PN, E-Mail oder Messenger.

Social bookmarks