WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] child theme css (14 posts)

  1. jrcollins
    Member
    Posted 1 year ago #

    Changes in my child theme css file are not taking effect. From what I've been able to work out so far the problem is with the following line in my header file:
    <link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet" type="text/css" />
    Does anyone know exactly what changes I need to make?

  2. keesiemeijer
    moderator
    Posted 1 year ago #

    Try changing it to:

    <link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css" />

    or

    <link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" type="text/css" />

    http://codex.wordpress.org/Function_Reference/get_stylesheet_uri
    http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

    "template_directory" is the directory of the parent theme.

  3. jrcollins
    Member
    Posted 1 year ago #

    I tried both and after adding the code the layout of my site is totally messed up. :(

  4. keesiemeijer
    moderator
    Posted 1 year ago #

    Did you import the stylesheet of the parent theme in your child theme's stylesheet?
    http://codex.wordpress.org/Child_Themes#Example_of_a_basic_Child_Theme

    Can you post a link to your site?

  5. jrcollins
    Member
    Posted 1 year ago #

    Yes I did. I can't give you a link to the site because I'm working on it locally using instant wordpress.
    Here's my child theme style.css file but not much to get wrong there.

    /*
    Theme Name: Flexibility3 Child
    Description: Child theme for Flexibility3 theme
    Template: Flexibility3
    Version: 3.0
    */
    @import url('..\flexibility3\style.css');
  6. jrcollins
    Member
    Posted 1 year ago #

    I also tried the following line of code in my header to link to my style.css file but no luck.
    <link href="<?php echo get_stylesheet_uri(); ?>" rel="stylesheet" type="text/css" />

  7. keesiemeijer
    moderator
    Posted 1 year ago #

    The "Template" directory name of the parent theme is case-sensitive. Try it with:

    /*
    Theme Name: Flexibility3 Child
    Description: Child theme for Flexibility3 theme
    Template: flexibility3
    Version: 3.0
    */
    @import url('..\flexibility3\style.css');

    NOTE. You have to switch to a different theme and back to the child theme when you modify this line.

    (Or is your parent theme direrectory "Flexibility3"?)

  8. jrcollins
    Member
    Posted 1 year ago #

    It is "Flexibility3" so no luck there either. I think the problem is in my header. It seems there's more than one way to link to the style sheet and I'm not quite sure how to do it.

  9. keesiemeijer
    moderator
    Posted 1 year ago #

    If it's "Flexibility3" then use that for the @import rule as well:

    @import url('..\Flexibility3\style.css');
  10. jrcollins
    Member
    Posted 1 year ago #

    Nothing's working! There's no styling applied to the page at all now.

  11. I may have missed it and apologize if I did (coffee): can you post a link to your site? That often helps us figure out what's wrong.

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The slashes are backwards in that @ import line.

  13. keesiemeijer
    moderator
    Posted 1 year ago #

    [edit] well spotted WPyogi

  14. jrcollins
    Member
    Posted 1 year ago #

    Ok, finally got it. Hahaha...Feeling a bit stupid now. I thought it was probably something simple like that. You have to be careful when copying and pasting code!
    Thanks everyone for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.