Post by Mandark on Apr 15, 2020 17:41:51 GMT
[attr="class","sectionheaderbg"] [attr="class","sectionheader"]//Style Guide (AR) [attr="class","paracontentfull"]The purpose of this guide is to outline a few things you may want to know about how we've achieved the styling on this forum. We utilize a plugin called Style Tags that allows for you to add CSS classes and IDs to your post content. I've built a lot of the custom styles you see all over the site into the site's CSS, so all you have to do is call them and it will do styling automatically for you. The sections below will detail various style options we have available as well as their code to use them. [attr="class","subheaderbgfull"] [attr="class","subheader"]//Post-Wrapper [attr="class","paracontentfull"]This wrapper content goes at the start and end of your post. All it does is limit the post width to exactly 600 pixels wide and center it, but it's essential for making some things look good. [table style="margin-left:auto;margin-right:auto;width:600px;"][tr][td][attr="class","sectionheaderbg"] [attr="class","sectionheader"]//HEADER [attr="class","paracontentfull"]The style of the element above is called a header. I usually use it for major divisions in post content. It can be invoked with: [div][attr="class","sectionheaderbg"][div][attr="class","sectionheader"]//HEADER[/div][/div][attr="class","subheaderbgfull"] [attr="class","subheader"]//Subheader [attr="class","paracontentfull"]This is a smaller version of above. Proboards really doesn't like not-processing this code, so remove the "\" before "attr" before using it. [div][\attr="class","sectionheaderbg"][div][\attr="class","sectionheader"]//HEADER[/div][/div][attr="class","subheaderbgfull"] [attr="class","subheader"]//Paragraph Content [attr="class","paracontentfull"]This is some padding, as well as the bar on the left of this paragraph. [div][attr="class","paracontentfull"]CONTENT HERE[/div][attr="class","subheaderbgfull"] [attr="class","subheader"]//Paragraph Content No Border [attr="class","paracontentfullnoborder"]This is the same as above, but without the border on the left edge. Again, Proboards really wants to run this code. Remove the \ before attr [div][\attr="class","paracontentfullnoborder"]CONTENT HERE[/div]
[attr="class","subheaderbgfull"] [attr="class","subheader"]//Side by Side as above |