Style Changes to v7.6.0 · Article

What Is Covered

• Summary
• Style Names for /install/styles/
• Required Style Adjustments, When Upgrading FROM UBB.threads 7.5.x to 7.6.x
     • Adjustments to Stock Styles
     • Adjustments to Custom Styles
• Build your own custom style, based off of one of the new "UBBCentral" Styles


 

Summary

We have several new, upcoming, themes to UBB.threads v7.6.0, and you can import into your existing UBB.threads installation through the Style Editor. There are also several adjustments that you can make to your existing styles to bring them in line with various changes.

We'll also cover what changes you can do to your existing styles to bring them up to date with changes to the v7.6.0 series. Additionally, you'll learn how to build a style based off of the guidelines used for the new v7.6.0 themes!


 

Style Names for /install/styles/

UBB.threads 7.5.x Series

1 - ubb (or ubbthreads)
2 - new_light (or ubbthreads-light)
3 - new_dark (or ubbthreads-dark)
4 - original_stock
5 - original_dark

UBB.threads 7.6.x Series

1 - UBB.threads
2 - UBB.threads - Dark
3 - UBB.threads - Light
4 - UBBCentral
5 - UBBCentral - Crimson (Red-White)
6 - UBBCentral - Lime (LightGreen-Green)
7 - UBBCentral - Marshmallow (Blue-Green)
8 - UBBCentral - Mocha (Brown-DarkGreen)
9 - UBBCentral - Zen (BlueGrey-Grey)


 

Required Style Adjustments, When Upgrading FROM UBB.threads 7.5.x to 7.6.x

For the responsive design to work correctly on your forums

 

** If you are using stock, unmodified styles from UBB.threads 7.5.x series **

1. Go to Control Panel > Styles
2. Click the "Import Style" bottom tab.
3. Click "Browse" and navigate to: ubbthreads-7-6-x/install/styles/ -- This is at the location you've extracted the ubbthreads-7-6-x.zip to on your local computer.
4. Select "1_UBB.threads.txt" (for "UBB.threads" Style) and Continue.
5. Once your chosen style has been imported, you'll be at the "Edit or Add a Style" page. Confirm that Images and Wrappers within "Name, Images & Wrapper" are set to "default" (or "ubb" for the new images) and click the "Update or Add Style" button.
6. From the Styles list page; now you can mark your older stock styles Inactive, or Delete them if you choose. Dont forget to set a Default style for your forums.
Done.


 

** If you are using customized styles **

1. In the following Style Settings, find the width property and its % or px value. Remove it.

General CSS Properties
.body_col
Left/Right Column Properties
.left_col
.right_col
Post Properties
.post-content
UBBCode Properties
.ubbcode-block
.ubbcode-header
.ubbcode-body
2. Click the "Update or Add Style" button when you're done.
3. Do step 1 and 2 for each of your custom styles.
Done.


 

Build your own custom style, based off of one of the new "UBBCentral" Styles

Four of the colored UBBCentral styles (Lime, Marshmallow, Mocha, Zen) are inspired by Google's Material Design color palettes. You can use one of these styles as a foundation to build your own custom color combinations.

Within each of these colored UBBCentral styles, there is a comment/notation next to each color property.
For example: "/* 900p */"

The 900 corresponds hue of the color palette.
The "p" corresponds to the PRIMARY color palette.
An "s" would correspond to the SECONDARY color palette.

The colored UBBCentral styles only use two color palettes, and a shade of WHITE or GREY or BLACK.
For example: "/* white */" or "/* grey */" or "/* black */"

This should make creating your new custom theme easy.

"Mocha" uses a custom hue of green (#006341) for its secondary (s) color, not picked from Google's Material color palette.
"Crimson" uses a single palette of deep-red shades, and does not have any comments/notations next to each of its CSS colors.
The primary "UBBCentral" style is not based on Google's Material Design color palette, and does not have any comments/notations next to each of its CSS colors.
Posted on June 26th, 2016

Return to the Article Index
Return to the Category "Documentation"
Submit a Article for Review