Hi all,
I have questions regarding CSS in child theme.
For the whole child theme, I made this CSS rule in my functions.php
<?php
function pearl_create_stylesheet() {
$templatedir = get_bloginfo('template_directory');
$stylesheetdir = get_bloginfo('stylesheet_directory');
?>
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/reset.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/typography.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/images.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/layouts/2c-r-fixed.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/18px.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/default.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $stylesheetdir ?>/style.css" />
<?php
}
add_filter('thematic_create_stylesheet', 'pearl_create_stylesheet');
?>It works, and I got what I want.
As for my custom home page, I have this code in functions.php, for my custom CSS.
<?php
function pearlhome_css() {
if (is_front_page()) {?>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('stylesheet_directory') ?>/homepage.css"/>
<?php }
}
add_action('wp_head', 'pearlhome_css');
?>Also works, it points to my homepage.css and I can make my own CSS rules in homepage.css.
But looks like it isn't working 100%. In my home page, I am planning to just importing thematic's header, main navigation (the top one) and footer (will modify the footer later)
Problem is, when I start making my own DIVs, somehow it isn't working the way it suppose to be.
Here are my codes:
HTML:
<div id="container">
<!-- top content after main nav starts here -->
<div class="greets">
Hi, welcome to Trial and error. </br>
Lorem ipsum etc etc
</div>
</div>CSS:
.greets{
width: 200px;
height: 400px;
background-color: blue; // just wanted to see if my page use this
}And when I checked my page, turned out .greets' style inherits reset.css from thematic, and none of my custom CSS. I think I've specifically said to use homepage.css for frontpage and I thought my css would/should override the parent's..
So.. anything I should do? What I want to achieve for my homepage is something like this:
-Thematic's header.
-My custom structure and CSS (body)
-Thematic's footer.
Thanks in advance!