Helper Classes
Weaver Xtreme provides quite a few helper classes that can be used to help style your content. You can used these in the any of the Xtreme Plus options as well. Here’s a short summary.
- .aligncenter, .alignleft, .alignright – used to align an element as described
- .content-2-col,.content-2-col-left, .content-2-col-right – used to display two column content
- .content-3-col – used to display 3 columns.
NOTE: when you use the 2 or 3 column classes, you should wrap all the content in a div, and follow with a clear div like this:<div> <div class="content-3-col">Column 1</div> <div class="content-3-col">Column 2</div> <div class="content-3-col">Column 3</div> </div><div style="clear:both;"></div>
- .clearfix – use in a <div> after the column classes to reset for normal display
- #page-top, #page-bottom – defined on every page as <a> links at top and bottom of page, link using ↑ and ↓ to the opposite link/anchor. Display hidden by default, so use custom CSS to display these links.
- .post-even, .post-odd, .post-order-nn – Weaver Xtreme adds these class names to every post displayed on a blog page. You can use these class names to create custom css styling for posts – like adding a different background for even and odd posts, or to display something for a specific numbered post on each page. (The nn starts at 1 on each blog page, and starts over at 1 if your posts are paged.)
- #comment-title.no-comments-made – .no-comments-made is added to the #comments-title <div> if no comments have been made yet.
- .show-desktop – show on devices; add these classes to show or hide by device
.show-mobile
.show-smalltablet
.show-phone - .hide-desktop – hide on devices
.hide-mobile
.hide-smalltablet
.hide-phone - .is-desktop – prefix selectors to make rules apply on specific devices
.is-mobile (either small-tablet or phone)
.is-smalltablet – note: many phones will be considered smalltablet when in landscape view
.is-phone – usually when in portrait mode only
.is-ios – an iOS device: iPhone, iPod, iPad
.is-ipad – an iPad
.is-ipod – an iPod
.is-iphone – an iPhone
.is-android – any Android device
.is-windows – any Windows OS
.is-macos – any Mac OS - .clear-both – add to clear floating, useful with at end of content column classes
- .border – add the standard border around area
.border-bottom - .shadow-1 – wrap div with shadows, number is thickness
.shadow-2
.shadow-3
.shadow-4
.shadow-rb – shadow on right and bottom
.shadow-lb – left an bottom
.shadow-tl – top and left
.shadow-tr – top and right - .rounded – rounded corners on area – only works if border or bg color specified
.rounded-top
.rounded-bottom
.rounded-right
.rounded-left - .overflow-visible – allow content overflow of area to be visible
.overflow-hidden – hide overflow - .smooth-transition – adds smooth transition effect when content is displayed