Time square Theme change navbar colour

  • mstammor

    (@mstammor)


    10 years, 11 months ago

    Hi,

    I am a WP beginner create my first site. I have chosen the theme “Time Square”. I created a child theme in order to make some customizations.
    I would need help in change color of my navigation bar to blue (“default” is “black” and “inverse” is “white”).
    Here is the link to my site: http://www.fcrhexiatroinex.ch

    I used the following CSS codes but nothing changes:

    .navbar-inverse {
  background-color: #234ca5 !important;
  border-color: #ff931c !important;
}
.navbar-inverse .navbar-brand {
  color: #ecf0f1 !important;
}
.navbar-inverse .navbar-brand:hover, .navbar-inverse .navbar-brand:focus {
  color: #040404 !important;
}
.navbar-inverse .navbar-text {
  color: #ecf0f1 !important;
}
.navbar-inverse .navbar-nav > li > a {
  color: #ecf0f1 !important;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  color: #040404 !important;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
  color: #040404 !important;
  background-color: #ff931c !important;
}
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
  color: #040404 !important;
  background-color: #ff931c !important;
}
.navbar-inverse .navbar-toggle {
  border-color: #ff931c !important;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
  background-color: #ff931c !important;
}
.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #ecf0f1 !important;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: #ecf0f1 !important;
}
.navbar-inverse .navbar-link {
  color: #ecf0f1 !important;
}
.navbar-inverse .navbar-link:hover {
  color: #040404 !important;
}

@media (max-width: 767px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1 !important;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #040404 !important;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #040404 !important;
    background-color: #ff931c !important;
  }
}

    Many thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • schulte

    (@schulte)

    10 years, 11 months ago

    Hi mstammor,

    Based on the CSS you provided, you are probably looking to do more, but let’s start here:

    div.navbar.navbar-inverse {
    background-color: blue;
}
    Thread Starter mstammor

    (@mstammor)

    10 years, 11 months ago

    Thanks for your quick reply.
    I replaced my previous codes by your code in my CSS file, but nothing changes.
    What I actually did was to copy-paste the code generated by the following site : “http://work.smarchal.com/twbscolor/css/234ca5ff931cecf0f10404040” within my theme..what is showing on this site is the end result I want.
    I guess I need to change additional features in CSS or other files??
    Thanks for your reply

    schulte

    (@schulte)

    10 years, 11 months ago

    Well, I added the CSS you provided to styles.css and it switched to a blue/orange combination.

    Thread Starter mstammor

    (@mstammor)

    10 years, 11 months ago

    But that is exactly my problem…it doesn’t switch on my theme…there must be a protection in this theme “Time Square” to prevent changing?. I have no clue…Thanks again for your help Schulte!

    schulte

    (@schulte)

    10 years, 11 months ago

    Are you putting that CSS within your child theme’s styles.css?

    Thread Starter mstammor

    (@mstammor)

    10 years, 11 months ago

    Yes. The child theme style.css file starts with an import function as follows:

    /*
Theme Name: Times Square Child 01
Theme URI:
Description: Child 01 theme for the Times Square theme
Author: <a href="http://www.studiofaca.si/">StudioFACA</a>
Author URI:
Template: times-square
Version: 3.0
*/

/* Generated by Orbisius Child Theme Creator (http://club.orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/) on Mon, 06 Jul 2015 22:38:01 +0000 */ 

@import url('../times-square/style.css');

    Is it something wrong with the “Time Square ” theme? If yes, then I might as well changing theme (I am only at the beginning of my website creation). If so would you have a good reference of a responsive free WP theme suitable for soccer clubs?
    Thanks again,

    schulte

    (@schulte)

    10 years, 11 months ago

    I think it’s simply using the Times Square theme and ignoring the child entirely. That omission would also account for why your CSS changes are not being picked up.

    I would go over everything within https://codex.ww.wp.xz.cn/Child_Themes and create a brand new child theme (leave your existing one) going step by step through that support document.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Time square Theme change navbar colour’ is closed to new replies.