Post by ProBoards Help Guide on Apr 22, 2013 15:50:20 GMT -8
If you feel like customizing your forum's colors and styles on a more advanced level you may be interested in the visual editor.
The following section is intended for advanced users with a general understanding of forum terminology.
In your admin area select the Themes section. On the following menu, navigate to the Advanced Styles & CSS option. This section has a large amount of categories pertaining to the styles of just about everything on the forum.
Clicking on an item in the list will expand its options. Most of the items on the visual editor list will be either options to change the styles of the item you expanded or another list of sub-items you can expand and change within that item. Every option will be structured similarly to those that exist within the Colors & Theme Creator. If a section is grayed out it means that the elements it affects are not currently visible in the preview pane, however the items in the grayed out section can still be changed.
If you have a firm grasp of CSS knowledge you may be more interested in the Style Sheet tab on the top of the page. This tab will give you direct access to the forum's style sheet where you can manually change each CSS declaration yourself.
The forum software uses both regular CSS and a style sheet language known as LESS which allows variables to be defined within the style sheet for widespread use in multiple declarations. For example, you can add a line with a variable definition called @box_color to the style sheet and assign it a hex color of #FFFFFF. Any regular CSS declarations can use @box_color as their definitions instead of using #FFFFFF over and over again. This way, rather than going through the entire style sheet and changing the hex color of each of those lines you only have to change the variable's line to affect all declarations that use it universally.
Under the preview pane you'll notice another tab called Visual Editor Builder. Clicking this tab allows you to directly edit the structure of the Visual Editor list. You can move existing rows around, add new rows to the list, or edit the contents of an existing row.
You can reset the theme to the default CSS anytime by clicking the reset the CSS Source to default link above the style sheet. You can also reset the Visual Editor's list structure anytime via the link on the following line that says clicking here.
Source: www.proboards.com/admin-guide/themes-styles/styles-css
The following section is intended for advanced users with a general understanding of forum terminology.
In your admin area select the Themes section. On the following menu, navigate to the Advanced Styles & CSS option. This section has a large amount of categories pertaining to the styles of just about everything on the forum.
Clicking on an item in the list will expand its options. Most of the items on the visual editor list will be either options to change the styles of the item you expanded or another list of sub-items you can expand and change within that item. Every option will be structured similarly to those that exist within the Colors & Theme Creator. If a section is grayed out it means that the elements it affects are not currently visible in the preview pane, however the items in the grayed out section can still be changed.
If you have a firm grasp of CSS knowledge you may be more interested in the Style Sheet tab on the top of the page. This tab will give you direct access to the forum's style sheet where you can manually change each CSS declaration yourself.
The forum software uses both regular CSS and a style sheet language known as LESS which allows variables to be defined within the style sheet for widespread use in multiple declarations. For example, you can add a line with a variable definition called @box_color to the style sheet and assign it a hex color of #FFFFFF. Any regular CSS declarations can use @box_color as their definitions instead of using #FFFFFF over and over again. This way, rather than going through the entire style sheet and changing the hex color of each of those lines you only have to change the variable's line to affect all declarations that use it universally.
Under the preview pane you'll notice another tab called Visual Editor Builder. Clicking this tab allows you to directly edit the structure of the Visual Editor list. You can move existing rows around, add new rows to the list, or edit the contents of an existing row.
You can reset the theme to the default CSS anytime by clicking the reset the CSS Source to default link above the style sheet. You can also reset the Visual Editor's list structure anytime via the link on the following line that says clicking here.
Source: www.proboards.com/admin-guide/themes-styles/styles-css