overriding body/html class only on front page
Question
I have a Wordpress site bringing in some full page slider functionality on my index.php. To work it sets the css to be
html, body {
overflow: hidden;
margin:0;
padding:0;
}
but I want my interior pages to overflow: auto;
I have two header.php files set up (one for interior pages one for index.php) with header-int.php set with the following
html
<body <?php body_class('auto'); ?> > ...
css
.auto { overflow: auto; }
Problem is I need to override the html css to be auto as well, not sure how to do that. OR have the html, body css target only the index.php and not any other page.
3 answers
solution1
1 2016-01-28 09:19:29
I would revisit your header files here. There's plenty of functions that Wordpress provide which resolve this type of issue. I would add the following function to your header file: is_front_page() . More info on this here: https://codex.wordpress.org/Function_Reference/is_front_page
<?php if(is_front_page()) { ?>
<body class="homepagebodyclass">
<?php } else { ?>
<body class="auto">
<?php } ?>
Doing the above would remove the need to have more than one header file...
solution2
0 2016-01-28 08:41:11
On your index.php file. You can use inline styling.
Set your CSS like this:
html, body {
overflow: auto;
margin:0;
padding:0;
}
Now, on your index.php file your body tag will look like:
<body style='overflow: hidden;'>
solution3
0 2016-01-28 08:55:02
Use This code in your header file before body tag:
if ( is_page_template( 'index.php' ) ) {
<style>
html, body {
overflow: hidden;
margin:0;
padding:0;
}
</style>
You can also use it for body tag in header file like this:
if ( is_page_template( 'index.php' ) ) {
<body style='overflow: hidden;'>
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.