• Hey there gang,

    Having a little problem with child theme CSS not over-riding the parent theme CSS. I’m just trying to change a few colors and a logo size.

    I’m very newb when it comes to modifying but learning as I go.

    Here’s the child them style.css

    /*
    Theme Name: My Child Theme
    Theme URI: http: //mysite.com/
    Description: This is a custom child theme I have created.
    Author: David Allan
    Author URI: http: //workingmagician.com/
    Template: formfunction
    Version: 0.1
    */
    
    @import url("../formfunction/style.css");
    
    #logo { }
    	#logo img { max-width: 410px; height: auto; }
    	#logo a { display: block; margin: 0 auto 1em auto; max-width: 35em; color: #262626; font-weight: 300;  font-size: 1.75em; }
    	#logo a:hover { color: 00008D; }
    
    #nav, .menu { padding: 0 0 1em 0; }
    	#nav li, .menu li { display: inline-block; font-weight: 700; font-size: 0.55em; }
    	#nav a, .menu a { padding: 15px; color: #737373; text-transform: uppercase; }
    	#nav a:hover, .menu a:hover { color: FF0000; }
    	#nav .current-menu-item a, #nav .current_page_item a { color: FF0000; }
    
    h2 { margin: 0; letter-spacing: -1px; font-weight: 300; font-size: 2.25em; }
    	h2.post-title { margin-bottom: 1em; text-align: center; color: FF0000; }
    	h1 a, h2 a { }
    	h1 a :hover, h2 a:hover { }
    	h2 a.post-edit-link { color: #d9d9d9; }
    
    h4 { font-size: 1.5em; }
    	h4.cat-title { padding-top: 3em; color: FF0000; text-align: center; text-transform: uppercase; font-weight: 400; font-size: 0.55em; }
    	h4 a { }
    
    img { }
    	section img { margin: 0 0 1em 0; max-width: 100%; }
    	section .wp-caption img { margin-bottom: 0.25em; color: #999; font-weight: 400; }
    	section .gallery img { margin: 0; border: 2px solid #fff !important; }
    
    blockquote { margin: 1em 0; padding: 0 0 0 1em; border-left: 2px solid 00008D; color: #999; font-weight: 300; font-size: .85em; }
    	article blockquote p { padding: 0; }
    	cite { font-style: normal; }
    
    a { color: 00008D; -webkit-transition: color .6s ease; -moz-transition: color .6s ease; -o-transition: color .6s ease; transition: color .6s ease; }
    	a:hover { color: FF0000; }
    
    	input, textarea { padding: 10px; max-width: 90%; border-radius: 5px; font: 300 1em/1.6 'lato', sans-serif; }
    	input[type="submit"], button { padding: 10px; border-radius: 5px; background: FF0000; color: #fff; }
    
    .cat-list, .more, #pagi a { margin: 0 0 3em 0; color: #999; text-align: center; text-transform: uppercase; font-weight: 400; font-size: .55em; }
    	.cat-list a, footer small a { color: 00008D; }
    	.more a { color: #d9d9d9; }
    	#pagi a { margin: 0 2em 3em 2em; padding: 10px 20px; border-radius: 5px; background: #fff; }
    	.cat-list a:hover, footer small a:hover, .more a:hover { color: #999; }
    
    .meta { margin: 2em auto 3em auto; padding: 1em 0; border-top: 2px solid #e5e5e5; border-bottom: 2px solid #e5e5e5; text-align: center; font-weight: 400; font-size: 0.75em; }
    	.meta a { color: FF0000; }
    
    	.filters a { margin: 0 5px; padding: 5px 10px; color: FF0000; }
    
    .button { margin: 0 5px; padding: 10px 20px; border-radius: 5px; background: 00008D; color: #fff; font-weight: 400; font-size: 0.75em; -webkit-transition: background .6s ease; -moz-transition: background .6s ease; -o-transition: background .6s ease; transition: background .6s ease; }
    	.button:hover { background: FF0000; color: #fff; }

    I do have the child theme activated but alas none of the above changes over-ride the parent. I do have the child theme in the right directory etc. but know I’m probably missing something small yet crucial:)

    Thanks!

    Dave
    workingmagician.com

Viewing 15 replies - 31 through 45 (of 51 total)
  • Thread Starter HeistheSource

    (@heisthesource)

    Okay – changed the import line to include formfunction/_/main.css

    Still no child css appearing.

    DAve

    Just to clarify,
    The parent theme is Form/Function
    and your child theme’s name is …?

    Thread Starter HeistheSource

    (@heisthesource)

    formfunction-child

    At the top of your CSS, does it look like this exactly?

    /*
    Theme Name: formfunction-child
    Theme URI: http: //workingmagician.com/
    Description: This is a custom child theme I have created.
    Author: David Allan
    Author URI: http: //workingmagician.com/
    Template: formfunction
    Version: 0.1
    */
    
    @import url("../formfunction/_/style.css");

    Notice how in the parent theme, the Theme Name.

    Theme Name: Form/Function Theme
    Theme URI: http://pjrvs.com/ff
    Version: 1.1
    Description: The razor's edge of form and function.
    Author: Paul Jarvis
    Author URI: http://pjrvs.com

    Your child theme should have it’s name at the top of your child theme CSS, as well as any other files in your child theme except the functions.php which should, for starters, only have:

    <?php
    
    ?>
    Thread Starter HeistheSource

    (@heisthesource)

    the actual name is My Child theme

    formfunction-child is the directory

    the rest is exact to what you have there

    Thread Starter HeistheSource

    (@heisthesource)

    The “My Child Theme” is activated on my wordpress backend thats how I know its in the right directory etc. but it doesn’t overwrite the parent CSS – which is the problem

    The “Theme Name” can be anything…except identical to the parent theme’s name.

    If you look at the Codex, those names are not the same –

    http://codex.wordpress.org/Child_Themes

    Thread Starter HeistheSource

    (@heisthesource)

    Yep. No problems there

    “The “Theme Name” can be anything…except identical to the parent theme’s name.”

    This is true. I was only trying to establish that this was correct.

    Perhap Form/Function does not support child themes? You could ask them: https://creativemarket.com/pjrvs/4780-FormFunction-WordPress-Theme

    Thread Starter HeistheSource

    (@heisthesource)

    Yep – I sent an email to the developer but haven’t heard back as of yet.

    Dave

    Thread Starter HeistheSource

    (@heisthesource)

    here’s some screenshots i took

    screenshot

    screenshot2

    just to show that the info is accurate

    Dave

    I wasn’t doubting you :)… but that’s helpful – though I still don’t get a few things – LOL!

    But try this:

    @import url("../formfunction/_/main.css");

    Have you tried that one?

    What still seems really weird is that the child theme folder should show up when you look at the “View Source” in the header – in the file path…

    Is there caching on your site?

    Thread Starter HeistheSource

    (@heisthesource)

    I’m on Dreamhost…not sure if there is caching..but recall that the twentythirteen shctuff showed up right away

Viewing 15 replies - 31 through 45 (of 51 total)

The topic ‘Child theme css’ is closed to new replies.