Community Forums › Forums › Archived Forums › Design Tips and Tricks › Setting .site-inner padding-top to 0 for single page
- This topic has 6 replies, 3 voices, and was last updated 9 years, 8 months ago by Ben @ Inbound Creative.
-
AuthorPosts
-
August 7, 2014 at 12:56 am #117524stushMember
Hi
Currently the .site-inner padding-top value is 6rem for all the pages in my site. For one page only, I want to change that value to 0. Seems to me I need to create a custom template (which I already am doing for this page anyway) but I don't know how to make the CSS apply to a single page only. If I change the CSS in my custom style sheet, it applies to all pages.
Can anyone point me in the right direction please.
Thanks
ShaneAugust 7, 2014 at 3:12 am #117534Ben @ Inbound CreativeMemberAdd this at the top of the template just after <?php (or after any scripts if you're loading them).
add_action( 'genesis_meta', 'am_custom_meta' ); function am_custom_meta() { //* Adds body class to the page template add_action( 'body_class', 'am_body_class' ); } //* Adds custom body class to the page function am_body_class( $classes ) { $classes[] = 'home'; return $classes; }
You can change the home class in
$classes[] = 'home';
string to anything you like other than the Genesis/WordPress classes like .single, .page .post etcThen, using that class defined in the string, in your css, prefix this (I'll use the home class as an example).
.home .site-inner { padding-top: 0; }
So if your custom class was say... mug, the code would read:
add_action( 'genesis_meta', 'am_custom_meta' ); function am_custom_meta() { //* Adds body class to the page template add_action( 'body_class', 'am_body_class' ); } //* Adds custom body class to the page function am_body_class( $classes ) { $classes[] = 'mug'; return $classes; }
CSS:
.mug .site-inner { padding-top: 0; }
Does that help? Let me know if you understand how it works. It's a really useful bit of PHP to know for the future.
Ben
August 7, 2014 at 4:46 am #117542stushMemberThanks Ben
Really appreciate the detailed answer - Would have taken me ages to figure that out on my own, but with your sample and explanation, it was very self explanatory. I think I understand almost all of it - only thing I am not sure about is the add_action( 'body_class' line.
If I had to guess I would say that genesis calls a function 'body_class' which by default returns the .site-inner class, and this line is overriding and inherting the original call to add the new class, just for this page.
Did I guess that right?
Cheers
ShaneAugust 7, 2014 at 5:34 am #117545Ben @ Inbound CreativeMemberSort of.
The body_class is a hook used by WordPress – not just Genesis.
Adding the action/function tells the template to override the standard body_class with the your custom body_class.
You can see similar hooks in action when you look at the widget_area hooks on many Genesis themes.
August 7, 2014 at 11:46 pm #117715stushMemberOK - I think I see where I went wrong. I assumed the $classes[ ] was getting the 'home' added to what was already in there, but given $classes is passed by value and not reference it's actually overwriting it.
Thanks again for your help and explaination.
Cheers
ShaneAugust 8, 2014 at 12:27 am #117720Genesis DeveloperMemberI think that you do not need any extra php code for this. Every page and post have unique id. Assume your page ID is 45. Then you can add this css in your style.css file
.page-id-45 .site-inner{padding-top: 0;}
August 8, 2014 at 12:50 am #117727Ben @ Inbound CreativeMemberYou can, true.
Personally, I tend to avoid it because I prefer not to limit CSS to specific page numbers for future compatibility (especially, as I work offline and then deploy to a live server).
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.