This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Changing Color of Header Text using CSS in Child Theme

  • Creator
    Topic
  • #7457
    queenidella
    Participant

    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!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Author
    Replies
  • #7461
    Jason Bobich
    Keymaster

    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.

    #7469
    queenidella
    Participant

    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…

    #7470
    Jason Bobich
    Keymaster

    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. 😉

    #7471
    queenidella
    Participant

    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…

    #7472
    Jason Bobich
    Keymaster

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

    #7474
    queenidella
    Participant
    #7475
    Jason Bobich
    Keymaster

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

    #7476
    queenidella
    Participant

    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.

    #7477
    queenidella
    Participant

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

    #7478
    Jason Bobich
    Keymaster

    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.

    #7479
    queenidella
    Participant

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.