Child theme css

  • 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 - 16 through 30 (of 51 total)
  • Thread Starter HeistheSource

    (@heisthesource)

    the child is already enabled. its taking on the parent CSS even though inside the child theme as per above I modified, for instance, the size of the logo and the colors of some of the elements!

    Thanks for the kudos, glad you’re enjoying it ??

    Dave

    Okay, so this is weird and maybe a clue – this file path is weird:

    https://www.workingmagician.com/wp-content/themes/formfunction/_/main.css?ver=20130422'

    What’s the name of your child theme folder?

    And is it in the themes folder like:

    themes
    formfunction
    formfunctionchild

    Thread Starter HeistheSource

    (@heisthesource)

    the name of the child them folder is formfunction-child

    yes it is in the themes like you suggest

    And you’ve activated it? I’m not seeing it – that file path should show up as:

    https://www.workingmagician.com/wp-content/themes/formfunction-child/main.css?ver=20130422'

    But that empty space in their is weird too…I’m thinking there’s something about the way the file structure is set up that is weird.

    BTW, are you just wanting to make CSS changes? Cause you can do that using custom CSS plugin without all this :).

    Thread Starter HeistheSource

    (@heisthesource)

    Yep, thats true…but I’m also interested in learning something along the way. Breaking stuff usually equals learning.

    Oh yeah, I’m totally with you on that :). Some people are of the opposite mindset – they just want it FIXED NOW (preferably by someone else) – LOL!

    Thread Starter HeistheSource

    (@heisthesource)

    Yeah – I like to be proactive – break shit and then find someone who knows more. I’ll put in the work if it means I’m going to know more:)

    You’re right though I think – there’s something inherently different about the file structure that is throwing this off because the twentythirteen child was easy to make like all the tutorials espouse.

    Thread Starter HeistheSource

    (@heisthesource)

    Hey this perhaps is the problem…like you were saying

    in the formfunction directory there is the styles.css that has this

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

License: GNU General Public License
License URI: /_/license.txt

Tags: one-column, fixed-width, light, right-sidebar, flexible-width, custom-menu, featured-images, theme-options

*/

.wp-caption {}
.sticky {}
.gallery-caption {}
.bypostauthor {}

/* TO EDIT THE CSS, GO TO FOLDER /_/ AND EDIT MAIN.CSS */

    and inside the formfunction directory is that weird “_” directory with main.css in it. That’s not like the other themes such as twentythirteen

    Dave

    Yeah, that looks VERY likely – that’s not typical at all. You might see if you can get the file paths to work – not sure it’s doable or not…

    Thread Starter HeistheSource

    (@heisthesource)

    How would you go about getting them to work..what would i need to change?

    Thanks,
    Dave

    I’m not sure. But I’m also quite puzzled – because you said the child is activated? But your site is not showing it as active…

    In the Dashboard, does the child theme show up under themes? And you’ve clicked activate?

    Did you try:

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

    Because I can see the theme’s CSS here: https://www.workingmagician.com/wp-content/themes/formfunction/_/main.css – which is the main CSS for the theme.

    Thread Starter HeistheSource

    (@heisthesource)

    Yep -here ill show you a screenshot..whats your twitter?

    Dave

    Thread Starter HeistheSource

    (@heisthesource)

    I did originally i think but I can change it again ModularBase

Viewing 15 replies - 16 through 30 (of 51 total)
  • The topic ‘Child theme css’ is closed to new replies.