Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAndres Barbudo-Rodriguez
2,663 Pointschange the color of the .navbar rule for style.css does not apply the change
hi, i am changing the navbar color by copying the color from the footer to my navbar on the CSS, but when i refresh it does not take place. I'm on a local server. here is my style.css
/*
Theme Name: Twenty Thirteen Child
Theme URI: http://http://wordpresstreehouse.com//
Description: Child theme for the Twenty Thirteen theme
Author: Zac Gordon
Author URI: http://wp.zacgordon.com/
Template: twentythirteen
Text Domain: twenty-thirteen-child
Version: 1.0
*/
@import "../twentythirteen/style.css";
.navbar {
background-color: #220e10;
}
thank you!
12 Answers
Robert Gouveia
Courses Plus Student 1,714 PointsLooks like it is based on a child theme with the fact you are importing the css.
If you do this, it should work, if the navigation does have a class of navbar.
.navbar {
background-color: #220e10 !important;
}
I am not a huge fan of using the !important; but sometimes if the css is being loaded before the existing class in css you need to use it else its impossible to change.
Robert Gouveia
Courses Plus Student 1,714 Pointscan you link it to the course work and I will take a look for you ;)
Andres Barbudo-Rodriguez
2,663 Pointsyes but, excuse my ignorance what is the course work? how can i link it??
Andres Barbudo-Rodriguez
2,663 Pointsmmm we have no course work for this particular video
Robert Gouveia
Courses Plus Student 1,714 PointsCourse work is the online editor that comes in the project.
have you tried the #navbar instead of .navbar?
Without seeing it live I cant really see what is happening and what css is stopping yours from working.
Andres Barbudo-Rodriguez
2,663 Pointsyes, i tried the #navbar but still does not change.
Andres Barbudo-Rodriguez
2,663 Pointsnow, i've tried also
navbar {background-color: #220e10; !important;}
.navbar {background-color: #220e10; !important;}
#navbar {background-color: #220e10; !important;}
but none of them work, i cleaned the cache and erased the history
Sandra Hogan
8,657 PointsIs it possible that the syntax you have tried isn't quite right? From a quick search, it looks like you might have an extra semi-colon in your examples above.
#example {
font-size: 14px !important;
}
Robert Gouveia
Courses Plus Student 1,714 PointsIs this on your own server?
Link to url if it is?
Andres Barbudo-Rodriguez
2,663 Pointsi have it on MAMP Apache: 80 Ngynx: 7888 MySQL: 3306
Robert Gouveia
Courses Plus Student 1,714 PointsThis may be a silly question but have you activated the child theme in the admin area?
Andres Barbudo-Rodriguez
2,663 Pointsjaja Yes Sir, i did activated it
Robert Gouveia
Courses Plus Student 1,714 PointsHave you made the functions.php show the css correctly?
For instance:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'twentythirteen-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
That is the only other thing I can think of
Andres Barbudo-Rodriguez
2,663 Pointsi tried, i tried with functions.php linking the css correctly but it doesn't works. maybe i should contact the support team and tell them this story...
:s
Andres Barbudo-Rodriguez
2,663 Pointsthanks Sandra Hogan, i tried the examples without the extra semi-colons. it didn't worked.
i'm trying to figure out what can be missing.
Alena Holligan
Treehouse TeacherI would guess that the css is not being included correctly for some reason.
- Go the the website
- View Source
- look for the style.css file
- see if the file matches the one you're expecting: "Theme Name: Twenty Thirteen Child" with you .navbar style
Jessica Murillo
9,119 PointsI'm really late but is your parent theme folder in the same folder as your child them?
Andres Barbudo-Rodriguez
2,663 PointsAndres Barbudo-Rodriguez
2,663 Pointstried adding the !important with the exclamation sign and does not change the color. hmm...