Community Forums › Forums › Archived Forums › Design Tips and Tricks › Custom CSS for individual pages or groups of pages
Tagged: Custom Classes
- This topic has 3 replies, 3 voices, and was last updated 6 years, 7 months ago by Brad Dalton.
-
AuthorPosts
-
September 11, 2017 at 5:43 pm #211333barbaradavisMember
I have to build a monster site with three large content sections. Each section is almost a website in itself, and requires visual and style differentiation from the other two. Within my chosen Studiopress theme (not chosen yet), I need three different styles for background color, background image, header images, navigation colors, widget background colors, text colors, footer background, etc. BUT ALL WITHIN THE SAME DOMAIN, ALL WITHIN THE SAME STUDIOPRESS THEME. (E.g., I might need 30 pages with blue background and header/widget/menu colors, 30 pages with red, and 30 pages with green.) I searched Plugins and found Genesis Simple Hooks, but that doesn't seem to allow for individual styling PER PAGE of existing basic boxes, blocks, divs, widgets, backgrounds etc. Also found a Studiopress Category-style customization plugin, to change background color per category. Still not quite enough. Can anybody point me in the right direction? Thanks!
http://www.hawk-media.comSeptember 11, 2017 at 6:21 pm #211334Victor FontModeratorThere are a couple of ways to do this. You can either add custom classes to the body tag based on the page using the genesis_attr_body filter. https://victorfont.com/genesis-framework-add-a-custom-css-class-to-elements/. Or, you can call different style sheets for the page groups.
The way you would use this is to add code to functions.php similar to this:
function my_custom_body_classes( $attributes ) { $blue_pages = array( '1','2','3' ); $red_pages = array( '20','21','22' ); $green_pages = array( '30','31','32' ); if ( is_page( $blue_pages ) ) { $attributes['class'] = $attributes['class'] . ' my-custom-blue-class'; } if ( is_page( $red_pages ) ) { $attributes['class'] = $attributes['class'] . ' my-custom-red-class'; } if ( is_page( $green_pages ) ) { $attributes['class'] = $attributes['class'] . ' my-custom-green-class'; } return $attributes; } add_filter( 'genesis_attr_body', 'my_custom_body_classes' )
;
In your style sheet, you would precede each individual css block with .my-custom-blue-class, .my-custom-red-class. or .my-custom-green-class as in this example:
.my-custom-blue-class .entry-title {
}.my-custom-red-class .entry-title {
}.my-custom-green-class .entry-title {
}Loading separate style sheets requires using a similar conditional structure as the above class example.
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?September 12, 2017 at 1:49 am #211349Brad DaltonParticipantYou could use post formats for this and add CSS for 3 different styles based on the post format selected.
Or
3 custom templates each containing a custom body class with different CSS. When you select the template, the page/post is styled differently
September 12, 2017 at 7:39 am #211353Brad DaltonParticipant -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.