editing blue.rss in child theme

Resolved sionlanini
(@sionlanini)

10 years, 7 months ago

Hi there,

I have set up a child theme and copied blue.rss (entirely) into the respective inc/rss childtheme folder.

I want to change the background colour as the mouse hovers on the submenu items from a lighter blue to a darker blue. I have made this change in the blue.rss in the child theme:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
text-decoration: none;
color: white;
background-color: #00477F; /* change here */
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff0088cc’ , endColorstr=’#ff0077b3′ , GradientType=0);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: white;
text-decoration: none;
outline: 0;
background-color: #00477F; /* change here */
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ff0088cc’ , endColorstr=’#ff0077b3′ , GradientType=0);
}

When I use firebug, it still shows the original hex value, not the modified one.

My understanding from browsing the forums is that the childtheme settings should override the parent theme – any idea why this isn’t happening?

Thanks

Sion

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

(@electricfeet)

I have set up a child theme and copied blue.rss (entirely) into the respective inc/rss childtheme folder.

I presume you mean blue.css, not rss.

You should use a file called style.css in your child theme, with only the CSS that you want to overwrite, not the whole contents of blue.css file. Otherwise, you unnecessarily slow down the page load time.

My favourite link for how to create a child themes is here.

Thread Starter

sionlanini

(@sionlanini)

10 years, 7 months ago

Hi Electric Feet

Thanks for your message. I have deleted blue.css in the child theme and just added the following to style.css:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a { background-color: #00477F; }

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus { background-color: #00477F; }

…but unfortunately there is not change in the colour of the submenu as you hover over it..

Any thoughts?

rdellconsulting

(@rdellconsulting)

10 years, 7 months ago

Link to site?

Thread Starter

sionlanini

(@sionlanini)

10 years, 7 months ago

http://www.worldatplay.org.uk/wordpress/

Thanks

Sion

ElectricFeet

(@electricfeet)

10 years, 7 months ago

Ah. You’re changing the background colour, but the theme has a gradient on top of it. The full css in blue.css that you are trying to target is as follows:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  text-decoration: none;
  color: white;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc' , endColorstr='#ff0077b3' , GradientType=0);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: white;
  text-decoration: none;
  outline: 0;
  background-color: #f78636;
  background-image: -moz-linear-gradient(top, #f78c40, #f67d28);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f78c40), to(#f67d28));
  background-image: -webkit-linear-gradient(top, #f78c40, #f67d28);
  background-image: -o-linear-gradient(top, #f78c40, #f67d28);
  background-image: linear-gradient(to bottom, #f78c40, #f67d28);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff78c40' , endColorstr='#fff67d28' , GradientType=0);
}

To overwrite all the background colours currently set, you need to have the following:

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a {
  background-color: #00477F;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: white;
  background-color: #00477F;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

Thread Starter

sionlanini

(@sionlanini)

10 years, 7 months ago

Thank you very much indeed. That works a treat.

Sion

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

The topic ‘editing blue.rss in child theme’ is closed to new replies.