Can't edit the CSS of the Navbar, through an option in Customize
-
Hello everyone,
Thanks for taking the time to read this post. Now, I am aware this question has been asked quite a number of times, but the results I found always ended up in directly editing the theme’s CSS. I’m afraid this isn’t an option for me.
See, I’m editing the function.php and header.php to create a colour picking option in Customize Site – Color.
Everything seems to work just dandy. The content, widgets, sidebars, backgrounds, everything. But for some peculiar reason the navigation bar seems to elude this succesful streak. And frankly, it’s kind of bugging me since I can’t seem to figure it out.
// THEME COLOUR CUSTOMIZATION add_filter( 'customize_register', 'hg_customize_register' ); function hg_customize_register($wp_customize) { $colors = array(); // Main Content $colors[] = array( 'slug'=>'content_link_color', 'default' => '#88C34B', 'label' => __('Content Link Color', 'Toppen' ) ); $colors[] = array( 'slug'=>'content_text_color', 'default' => '#000000', 'label' => __( 'Content Text Color', 'Toppen' ) ); // Side Bar $colors[] = array( 'slug'=>'content_sidebar_color', 'default' => '#ffffff', 'label' => __( 'Sidebar Header Color', 'Toppen' ) ); $colors[] = array( 'slug'=>'sidebar_bg_color', 'default' => '#ffffff', 'label' => __( 'Sidebar Background Color', 'Toppen' ) ); $colors[] = array( 'slug'=>'sidebar_content_color', 'default' => '#000000', 'label' => __( 'sidebar Content Color', 'Toppen' ) ); $colors[] = array( 'slug'=>'sidebar_bg2_color', 'default' => '#ffffff', 'label' => __( 'Sidebar Header Background Color', 'Toppen' ) ); // Navigatie Bar $colors[] = array( 'slug'=>'nav_bg_color', 'default' => '#000000', 'label' => __( 'Navigatie Background Color', 'Toppen' ) ); // Extra $colors[] = array( 'slug'=>'button_bg_color', 'default' => '#000000', 'label' => __( 'Search Button Color', 'Toppen') ); foreach($colors as $color) { // SETTINGS $wp_customize->add_setting( $color['slug'], array( 'default' => $color['default'], 'type' => 'option', 'capability' => 'edit_theme_options' )); // CONTROLS $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $color['slug'], array( 'label' => $color['label'], 'section' => 'colors', 'settings' => $color['slug'] ))); } }And in the header, I’m using:
<?php wp_head(); // Main Content $content_link_color = get_option('content_link_color'); $content_background_color = get_option('content_background_color'); $content_text_color = get_option('content_text_color'); // Side Bar $content_sidebar_color = get_option('content_sidebar_color'); $sidebar_text_color = get_option('sidebar_text_color'); $sidebar_bg_color = get_option('sidebar_bg_color'); $sidebar_content_color = get_option('sidebar_content_color'); $sidebar_bg2_color = get_option('sidebar_bg2_color'); // Navigatie Bar $nav_bg_color = get_option('nav_bg_color'); // Extra $button_bg_color = get_option('button_bg_color'); ?> <style> <!-- Main Content --> body a { color: <?php echo $content_link_color; ?>; } .container:before { background-color: <?php echo $content_background_color; ?>; } body { color: <?php echo $content_text_color; ?>; } <!-- Side Bar --> #sidebar h3 { color: <?php echo $content_sidebar_color; ?>; } #sidebar h3 { color: <?php echo $content_sidebar_color; ?>; } .widget ul { background-color: <?php echo $sidebar_bg_color; ?>; } .page-content a { color: <?php echo $sidebar_content_color; ?>; } #sidebar h3 { background-color: <?php echo $sidebar_bg2_color; ?>; } <!-- Navigatie Bar --> .navbar { background-color: <?php echo $nav_bg_color; ?>; border-bottom: <?php echo $nav_bg_color; ?>; }Now, as you can see, there are three parts responsible for the navigation bar. I’ll copy them so you won’t have to read that monster sized code if you don’t want to:
In Functions.php we’ve got:
$colors[] = array( 'slug'=>'nav_bg_color', 'default' => '#000000', 'label' => __( 'Navigatie Background Color', 'Toppen' ) );And in Header we got both:
$nav_bg_color = get_option('nav_bg_color');and
.navbar { background-color: <?php echo $nav_bg_color; ?>; border-bottom: <?php echo $nav_bg_color; ?>;Now, you’re probably smirking, saying to yourselves “This is child’s play, how can you not get this?” And honestly, it probably is easy. That was what I was thinking at the very least when I started this. After all, with Firebug (in Firefox) I managed to deduce that by editing the colors directly under, you got it, navbar, it changed, therefore concluding that it was indeed ‘.navbar’ that I needed.
And yet it doesn’t seem to work. So if anyone has any suggestions, maybe a wake up hammer or something to point out something I’ve been missing or a correction, I’d fully appreciate it.
Also, if this isn’t the right place to ask this kind of question, sorry to y’all, feel free to move, delete or destroy this topic with an Planet Buster.
With friendly regards,
E. D. -
You did not specify a blog address or reason for posting when you created this topic.
This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.
If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.
If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.
This is an automated message.
-
See, I’m editing the function.php and header.php to create a colour picking option
Means you are in the wrong forum – see the supportbot above for where to get help
-
-
- The topic ‘Can't edit the CSS of the Navbar, through an option in Customize’ is closed to new replies.
WordPress.com Forums 