Perfect Circle

Ok, will remove all the duplicate css and include only my changes.

when including these changes, for example, If I wanted to change the look of my shop items, instead I simply modifying the “.product” selector, I might need to put in “#content #main .products .product”.

How/where do I use !important.

oh, regarding copying the parent css into the child, I would thing this would solve any issues of the selectors not be specific enough, as I any only overriding the attributes so selector that are already set up.

Actually I don’t have 785 lines of changes. I think I misunderstood you before. I thought you mean’t that I might have linked the whole parent style sheet to the child instead of importing it. Anyway, I did actually copy and paste all the “SITE STRUCTURE & APPEARANCE” styles from the parent, as I wasn’t yet sure which ones I would be changing. I thought I would just copy them all then change them as I go.

Of all this, I have only changed one attribute – on line 591 i change the background to none, though I didn’t have any effect, the background is still there.

My custom styles are working though, from line 519 up. These where previously from my custom theme. I actually had a basic website set up before, then I wanted to add the shop, but that out of my league, so I needed to start again, with a new template and the ecommerce framework set up. Now I trying to customise the theme to look like the site I intended it to be.

I am using firebug to find the CSS and html elements, (but editing in dreamweaver). This is how I found the layout.css file.

Also with the child’s style.css, will it only override the parent’s style.css, or will it override all stylesheets it the parent’s directories (e.g. including the layout.css). I copied the layout.css into my child because I assumed I would need to override it directly. Perhaps I should use the custom css to override the layout.css.

The child theme stylesheet doesn’t have a copy of any other stylesheets in it. It only has the parents style.css imported as per the wp documentation.

regarding the custom css file, I didn;t know it was there until after I have already created the child theme and made modifications, so I decided to persevere with it this way – as far as I know, it shouldn’t make any difference and I need to change the html too – structure divs, move menus around, so I need a child anyway. I know there is a section in the wp cms to input custom html too, but that doesn’t make any sense to me as how will the cms know where to put the html.

Also i’m not sure what you mean by ‘use more specific selectors’. do you mean, for example the I might need to put #wrapOverall #content #sidebar {width…}. (This is the first site i’ve ever build and just learning as i go, especial php, which I have never dealt with before). If it was just html and css i’s be find, but with nearly everything being created with queries, it’s very difficult to find where changes need to be made.

Cache is clear.

I have no stylesheet connected in my headed.php. I assume, as it is with the parent, all style sheets are pull in with some query. The child theme’s style.css is working, so I assume it must be connected correctly. Don’t no about the layout.css though, the parent is reading it, so it must be connected there. Should I make a direct link to that in my child?

The site is https://www.essentialopals.com.

Thanks.

Regarding the code above the DOCTYPE, if you are referring to the Header.php, I didn’t add that, it was part of the original parent wootheme mystile. The id=”wrapper”, which is in the body, is also part of the parent.

If you are referring to the <div id=”WrapOverall”> in the index.php, yes I added that, but there isn’t any body or head tags in this file. Perhaps they are pulled in with php, but where? Does the get_header(); query pull in the header.php, in which case, should I drop the <div id=”WrapOverall”> in the header.php file, but leave the end tag in the index?

Regarding the CSS, It’s not the cache, so probably one of the other issues, but all I have done is copy a css block from the parent and paste it in my child, then changed some of the attributes, such as setting the background to none, replacing the colour that was there. Is this the normal technique for overriding the parent? If so perhaps I’m not change the correct id or something else is overriding it.

Yeah, tried that before, as well as level by level. Only worked when I included the enture path.

with my templates I need to go up to wp-content before they are read, but with images I need to go up to the root.

Fixed the ‘home’ div alignment issue. just need to delete the default id=”main-nav” and class=”nav fl” from my ‘home’ div.

Thank you. Both methods work. Can edit in Appearance-> Menu section or hard code. CSS needs some work but we’re getting there.

Thanks again.

Ok. thank you so much for all this. I will try it and let you know how it works out.

Just to be clear, I can replace the php code between the <nav> </nav> tags, with the html ul li code without breaking the code elsewhere, right?

Thanks again.

Ok. I figured out that I can remove a menu item simply by setting to the draft (or trashing it) in the pages section of wp CMS. So simple – been staring at the code for so long forgot about the CMS. Still don’t know how to split the Nav though.

Hi. Thanks. Below is the code. I have added in the logo, NavHome & NavMain divs. The remained is from the MyStile Template. I put the NavHome & NavMain in as a reference to show where I want these menu items. So I want the ‘Home’ and ‘Shop’ plus my pages to remain in the Main Nav, adjacent the header, but want to put the ‘Account’ and ‘Track you order’ up the top and remove the rest.

There should be a background image (in CSS) behind the header that is not showing up.

I will paste the whole lot but I think it is mostly the code at the bottom from ‘woo_nav_before();’ that is of concern.

Code start below:

<?php
/**
 * Header Template
 *
 * Here we setup all logic and XHTML that is required for the header section of all screens.
 *
 * @package WooFramework
 * @subpackage Template
 */

 global $woo_options, $woocommerce;

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="<?php if ( $woo_options['woo_boxed_layout'] == 'true' ) echo 'boxed'; ?> <?php if (!class_exists('woocommerce')) echo 'woocommerce-deactivated'; ?>">
<head>

<meta charset="<?php bloginfo( 'charset' ); ?>" />

<title><?php woo_title(''); ?></title>
<?php woo_meta(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	wp_head();
	woo_head();
?>

</head>

<body <?php body_class(); ?>>
<?php woo_top(); ?>

<div id="wrapper">

	<!-- top -->

	<div id="top">
		<nav class="col-full" role="navigation">
			<?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) { ?>
			<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
			<?php } ?>
			<?php
				if ( class_exists( 'woocommerce' ) ) {
					echo '<ul class="nav wc-nav">';
					echo '<li class="cart">'.current(woocommerce_cart_link()).'</li>';
					echo '<li class="checkout"><a href="'.esc_url($woocommerce->cart->get_checkout_url()).'">'.__('Checkout','woothemes').'</a></li>';
					echo get_search_form();
					echo '</ul>';
				}
			?>
		</nav>
	</div><!-- /#top -->

    <?php woo_header_before(); ?>

	<header id="header" class="col-full">

	    <?php /* deleted <hgroup> from original 'mystile' parent theme as at 4-Jan-2013) */ ?>

        <!-- Header -->
        <div class="Header">

            <!-- logo -->
            <a href="index.php"><img class="logo" src="wp-content/themes/eotheme/eoImages/headerTitle_EssentialOpals.png" onmouseover="this.src='wp-content/themes/eotheme/eoImages/headerTitle_EssentialOpals_Colours.png'" onmouseout="this.src='wp-content/themes/eotheme/eoImages/headerTitle_EssentialOpals.png'" width="405" height="115" alt="Essential Opals" /></a>
            <!-- END logo -->

            <!-- NavHome -->
            <div class="NavHome">

            <a href="index.php?page=HomeContent">Home</a>

            </div><!-- END NavHome -->

            <!-- NavMain -->
            <div class="NavMain">

                <ul>
                    <li><a href="index.php?page=Shop">Shop</a></li>
                    <li><a href="index.php?page=AO">About Opals</a></li>
                    <li><a href="index.php?page=AU">About Us</a></li>
                </ul>

            </div><!-- END NavMain -->

        </div><!-- END Header -->

        <?php woo_nav_before(); ?>

		<nav id="navigation" class="col-full" role="navigation">

			<?php
			if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
				wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) );
			} else {
			?>
	        <ul id="main-nav" class="nav fl">
				<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
				<li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
				<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
			</ul><!-- /#nav -->
	        <?php } ?>

		</nav><!-- /#navigation -->

		<?php woo_nav_after(); ?>

	</header><!-- /#header -->

	<?php woo_content_before(); ?>

End Code.