WelcomeForumsCommunityButton in Panel not reflecting added class

Wijmo Team Member
Carl Unternahrer posted on July 2, 2012 at 2:12 pm link

I’m using a panel with a button inside. I’m trying to get a class to add that will change the color and background-color. The class is added to both buttons shown in the attached code but only the button outside the panel visually reflects the added class. Even with the panel created after the class is added to the button is doesn’t work.

Is their something special I need to do inside the panel for this or is this a bug?

css if you want it…
.messagesInfo {
color: #00529B;
/* fallback */
background-color: #BDE5F8;
background-repeat: no-repeat;
}

Attachments:
  1. junk2.htm
Wijmo Team Member
Jon Coulter posted on July 2, 2012 at 3:44 pm link

Looks ok to me, I think you got your classes mixed up. messageSuccess is being applied, but you are styling messagesInfo.

Attachments:
  1. junk21.htm
Answer
Wijmo Team Member
Carl Unternahrer posted on July 3, 2012 at 1:04 pm link

I just copied and pasted the wrong class to the post. This is the class I should have posted (they are both in the css that I include)…
.messagesSuccess {
color: #4F8A10;
/* fallback */
background-color: #DFF2BF;
background-repeat: no-repeat;
}

Sorry for that mix up.

The buttons inside the panel (well I should have said accordion) do not reflect the class.

I took a step back to better show this and created an attachment that should reflect what I’m talking about. Check it out.

Attachments:
  1. junk3.htm
Answer
Wijmo Team Member
Jon Coulter posted on July 3, 2012 at 2:31 pm link

Inside of the accordion your CSS selector isn’t strong enough, ui-state-default overrides it. You just need to make messagesSucess stronger like this.

.container button.messagesSuccess {
            color: #4F8A10;
            /* fallback */
            background-color: #DFF2BF;
            background-repeat: no-repeat;

            /* Safari 4-5, Chrome 1-9 */
            background: -webkit-gradient(radial, 40% 50%, 0, 40% 50%, 100, from(#DFF2BF), to(#FFFFFF));

            /* Safari 5.1+, Chrome 10+ */
            background: -webkit-radial-gradient(40% 50%, closest-corner, #DFF2BF, #FFFFFF);

            /* Firefox 3.6+ */
            background: -moz-radial-gradient(40% 50%, closest-corner, #DFF2BF, #FFFFFF);

            /* IE 10 */
            background: -ms-radial-gradient(40% 50%, closest-corner, #DFF2BF, #FFFFFF);

            /* Opera cannot do radial gradients yet */
        }
Answer
Wijmo Team Member
Carl Unternahrer posted on July 3, 2012 at 3:01 pm link

Thanks Jon! I figured I had to be missing something simple.

We are using wijmo for a intranet application and it has helped a lot. We are getting through the learning curve of those little ins/outs.

Answer

This topic has 2 voices, contains 4 replies, and was last updated by  Carl Unternahrer 319 days ago.

You must be logged in to reply to this topic.