Changing Color of Header Text using CSS in Child Theme

[queenidella]

I watched the videos about Child Themes and about using Firebug to identify and change things (which are great!), and I read the tutorial in the developer docs about adding your own CSS file between framework styles and style.css.

I wanted to change the color of the header text, and I have done it in Theme Options/Styles/Custom CSS, but I would rather do it in the Child theme and learn to write my own CSS.

According to Firebug (and by looking at it in the files) it’s defined in alyeska/assets/css/theme.css and theme.min.css. So merely putting the change from

#branding 
.header-text {
    color: #FFFFFF;
    
to #branding 
.header-text {
    color: #FF0000;

in the Child style.css file will not make it work because in the Parent theme the theme.css gets called before style.css. And we definitely do not want to edit the original Parent theme file.

Reading the article about adding your own CSS, there’s a lot in there that is too advanced for me, so here are my dummy questions.

When you say “you need a CSS file intricately placed in between the framework styles and your style.css file”, is this file written and placed physically in the Child Theme folder under assets/css along with custom.css?

(Method One)

1. Where is this global variable located?

2. Am I supposed to put this into functions.php in the Child theme?:

function my_stylesheets() {
    global $themeblvd_framework_styles;
    wp_enqueue_style( 'my-stylesheet', get_stylesheet_directory_uri() . '/myfile.css', $themeblvd_framework_styles );
}
add_action( 'wp_enqueue_scripts', 'my_stylesheets' );

3. Do I create a separate CSS file in the Child Theme, say, in alyeska-child/assets, along with the existing custom.css?

(Method Two)
1. Would I add the function of my_stylesheets to the functions.php file in the Child theme? Is my_stylesheets an example and I would have to name mine something different?

2. How much of this is something I have to write? (like ‘/myfile.css would not be exactly that, but something I would write myself; would ‘my-stylesheet’ also be something I have to define?) If so, where would they belong?

function my_stylesheets() {
    global $themeblvd_framework_styles;
    wp_enqueue_style( 'my-stylesheet', get_stylesheet_directory_uri() . '/myfile.css', $themeblvd_framework_styles );
}
add_action( 'wp_enqueue_scripts', 'my_stylesheets' );

Again, apologies for not knowing a lot of this stuff, but I really would like to learn how to edit this myself instead of just using Custom CSS on the Theme Options/Style page.

Thanks!

Topic

[Jason Bobich]

Hello,

I totally understand the confusion here, but let’s pull the reigns and step back a second. 😉

With your download package, there is a sample child theme included that already sets this up for you. It includes a custom.css file that is placed for you in the functions.php.

Start with watching this video: http://vimeo.com/41331677

After watching, let me know if this still doesn’t make sense, and we can go from there.

Note: You’re not the only one confused by this, and in the next update we’ve got it setup so style.css gets called after all framework styles to avoid this type of confusion. So in other words, after the next update, whether you’re using this current method or putting styles in style.css of your Child theme, you’ll get the same result.

[queenidella]

I did look at that video, and I tried to put the change into both custom.css and style.css (and each one separately)
(with the same code that worked in the Theme Options/Style/Custom CSS) –

#branding 
.header-text {
    color: #FF0000;

but it did not seem to do anything.

This is the functions.php – –

<?php
/*-------------------------------------------------------*/
/* Run Theme Blvd framework (required)
/*-------------------------------------------------------*/

require_once ( TEMPLATEPATH . '/framework/themeblvd.php' );

/*-------------------------------------------------------*/
/* Start Child Theme
/*-------------------------------------------------------*/

// Start the party ...

// Add stylesheet - Level 4, will get added after EVERYTHING
themeblvd_add_stylesheet( 'custom_styles', get_stylesheet_directory_uri().'/assets/css/custom.css', 4 );

and this is what I put in the custom.css – (which is the same as what worked in the Theme Options/Style/Custom CSS)

/* Add your custom CSS here. */

#branding .header-text {
    color: #339999;
    line-height: 30px;
    text-align: right;
    text-shadow: 1px 1px 1px #000000;

So, not sure what I’m doing wrong there…

[Jason Bobich]

Are these exact CSS snippets you’re using? I’ve noticed now that in all of the CSS you’re posting you’re not closing your selectors like:

.whatever {
     ...
}
.whatever-else {
     ...
}

Instead, you’re doing it like:

.whatever {
     ...
.whatever-else {
     ...

Could that be the issue? If not, feel free to show me a link where you have your custom styles in your custom.css file. I’m sure there’s a simple explanation.

Also, please post your code snippets in the forum with < pre > tags so they’re easier for everyone to read. 😉

[queenidella]

Also, please post your code snippets in the forum with ‘pre’ tags so they’re easier for everyone to read. 😉
Sure – I didn’t know what that tag meant 🙂
I’ve noticed now that in all of the CSS you’re posting you’re not closing your selectors

That was a good question – I checed it and the first one was not closed, but I fixed it and it is still not showing up. Now, the tag is closed in custom.css, like so (I’m trying a different color to see which one works):

/* Add your custom CSS here. */

#branding 

.header-text {
    color: #339999;
    line-height: 30px;
    text-align: right;
    text-shadow: 1px 1px 1px #000000;
  }

– here are links to the files:
http://aliciamorgan.com/voicemama/wp-content/themes/alyeska-child/assets/css/custom.css
http://aliciamorgan.com/voicemama/wp-content/themes/alyeska-child/style.css

Thanks…

[Jason Bobich]

Where can I see the frontend of the website? I’m not seeing anything here: http://aliciamorgan.com/voicemama/

[queenidella]

Here:

http://voicemamastudios.com

[Jason Bobich]

You don’t have the Child theme activated. So anything you’re doing there wouldn’t have any effect on your site.

[queenidella]

Could I be more stupid? I guess not. That accounts for a great deal. Sigh. Thank you for your patience. I am learnig slowly but surely.

[queenidella]

Thanks again so much for your help. You are awesome. Do you have a tip jar anywhere?

[Jason Bobich]

haha it’s all right don’t worry about it. Those things happen to all of when posting various places. I just have the benefit of being on home turf in this case, receiving the questions.

[queenidella]

Now, I’m cooking with gas! I’ll be able to do all kinds of customizing, now that I’m on the right path.

[Author]

Replies