Announcement

Collapse
No announcement yet.

Styles Editor

Collapse
X
Collapse
  •  

  • Styles Editor

    Styles

    The Style tool allows you to select a pre-existing theme for use on your site and sets it as the default. It also allows you to apply CSS customizations to your site.

    Themes

    Click image for larger version  Name:	themes.png Views:	24 Size:	129.8 KB ID:	4433598

    The Theme Selection tool will show all Styles installed in your vBulletin Site. Selecting one of the themes shown will provide a preview image and select it. If you decide that you do not like it, simply select a new theme. Your selection is saved when you click the .

    All Themes

    vBulletin Connect ships with 16 custom themes in addition to the "Default Style." These themes primarily provide variations on colors, headers, and fonts. Below you can see a small preview of each theme.

    Click image for larger version  Name:	blackred.png Views:	10 Size:	39.8 KB ID:	4433599Click image for larger version  Name:	bluegreen.png Views:	10 Size:	40.0 KB ID:	4433600Click image for larger version  Name:	blueyellow.png Views:	10 Size:	45.9 KB ID:	4433601
    Click image for larger version  Name:	coolblue.png Views:	10 Size:	42.9 KB ID:	4433602Click image for larger version  Name:	dark.png Views:	10 Size:	40.6 KB ID:	4433603Click image for larger version  Name:	denim.png Views:	10 Size:	84.8 KB ID:	4433604
    Click image for larger version  Name:	gradient.png Views:	10 Size:	47.1 KB ID:	4433605Click image for larger version  Name:	greystripes.png Views:	10 Size:	50.2 KB ID:	4433606Click image for larger version  Name:	grunge.png Views:	9 Size:	87.0 KB ID:	4433607
    Click image for larger version  Name:	lightblue.png Views:	9 Size:	40.0 KB ID:	4433608Click image for larger version  Name:	oldschool.png Views:	9 Size:	65.2 KB ID:	4433609Click image for larger version  Name:	orangepurple.png Views:	9 Size:	39.4 KB ID:	4433610
    Click image for larger version  Name:	pink.png Views:	9 Size:	40.2 KB ID:	4433611Click image for larger version  Name:	red.png Views:	9 Size:	39.4 KB ID:	4433612Click image for larger version  Name:	stripes.png Views:	9 Size:	54.5 KB ID:	4433613
     Click image for larger version  Name:	wood.png Views:	9 Size:	93.2 KB ID:	4433614 

    CSS Editor

    Click image for larger version  Name:	css.png Views:	9 Size:	35.9 KB ID:	4433615

    Using the CSS Editor, you can alter how your site look and feel, hide elements, and create a unique experience. There are currently two templates available for editing in this tool.

    • css_additional.css: This template is used for general layout changes across the web client.
    • css_sprite_icons_general.css: A special purpose template that can be used to customize the SVG graphics used in vBulletin's user interface. When editing this template, the sprite for your current style will be shown under the editor.

    If you do not know CSS, you can find tutorials online. Two popular tutorials can be found at:

    Note: Editing the CSS is for advanced users. Technical support is not guaranteed for custom CSS.

      Posting comments is disabled.

    About the Author

    Collapse

    Wayne Luke A curious juxtaposition of nature, technology and sustainability. Find out more about Wayne Luke

    Article Tags

    Collapse

    Latest Articles

    Collapse

    • Styles Editor
      by Wayne Luke

      Styles

      The Style tool allows you to select a pre-existing theme for use on your site and sets it as the default. It also allows you to apply CSS customizations to your site.

      Themes

      The Theme Selection tool will show all Styles installed in your vBulletin Site. Selecting one of the themes shown will provide a preview image and select it. If you decide that you do not like it, simply select a new theme. Your selection is saved when you click the Save Changes. All Themes vBulletin C...
      Tue 4th Feb '20, 4:34pm
    • Site Builder Overview
      by Wayne Luke
      Introduction to Site Builder Site Builder is the newest innovation in vBulletin’s line of site management products. It allows an administrator user, with the correct permissions, to change and edit the content and look of their site without logging in to the AdminCP. Where Site Builder deals with the outward facing portion of a site, the AdminCP controls the nuts and bolts of the system. The Site Builder allows an administrator to add various functionalities, dictate what they do, and where they’re place...
      Mon 3rd Feb '20, 4:40pm
    Working...
    X