Solved

css style not changing. why?

Posted on 2014-04-01
1
390 Views
Last Modified: 2014-04-21
Hi;

I have the following css.

.aui-header .aui-nav .aui-buttons .aui-button-primary,
.aui-header .aui-nav .aui-buttons .aui-button-primary:link,
.aui-header .aui-nav .aui-buttons .aui-button-primary:visited {
    background: #336ea9;
    background-image: -moz-linear-gradient(top, #3b7fc4, #336ea9);
    background-image: -ms-linear-gradient(top,  #3b7fc4, #336ea9);
    background-image: -webkit-linear-gradient(top,  #3b7fc4, #336ea9);
    background-image: -o-linear-gradient(top,  #3b7fc4, #336ea9);
    background-image: linear-gradient(top,  #3b7fc4, #336ea9);
    height: 28px;
    border: 0;
    box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0 0 inset, rgba(0, 0, 0, 0.2) 0 1px 1px 0;
    color: #fff;    
    text-shadow: 0 1px 0 #295989;
}

Open in new window


and following jquery

$('.aui-buttons').css({ 'background-color': '#FF6633', 'background-image': '-webkit-gradient(linear, left top, left bottom, from(#FF6633), to(#FF6633))',
'background-image': '-webkit-linear-gradient(top, #FF6633, #FF6633)',
'background-image': '-moz-linear-gradient(top, #FF6633, #FF6633)',
'background-image': '-ms-linear-gradient(top, #FF6633, #FF6633)',
'background-image': '-o-linear-gradient(top, #4ba614, #FF6633)',
'background-image': 'linear-gradient(to bottom, #FF6633, #FF6633)',
'background-color': '#FF6633',
'background': '#FF6633'
});

Open in new window


and background doesn't become from:
'background': '#336ea9'
to:
'background': '#FF6633'

Why?

Regards.
0
Comment
Question by:jazzIIIlove
1 Comment
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39969719
It's because your CSS is styling the .aui-button-primary element and your jQuery is applying the style to it's parent (.aui-buttons). You need to apply the jQuery CSS to the same child:

$('.aui-buttons .aui-button-primary').css({
   ...
}

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question