Control Elements The Wrong Color

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
3/9/2012 10:00:10 AM
Gravatar
Total Posts 148

Control Elements The Wrong Color

I am creating a control that contains a few links.  I develop the control inside VS2010 as a Web User Control that I will install manually I.e, no Resource File or Feature Config. file.  

When I set the style like this in the control:

<style type="text/css">

a{color:Red}

</style>

The links are red. However when I install to my page the links are Black.  I have added the above selector to the bottom of my style sheet used by my skin.  I even tried this:

<a href="somepage.aspx" class="myredfont">MyPage</a>

and the links are still black.  The a:hover selector is working however.  I can change that to any color I want.  The only way I have found to change the color is to do this:

<a href="somepage.aspx" style="color:red">MyPage</a>

but then my a:hover stops working.

3/9/2012 12:18:00 PM
Gravatar
Total Posts 115
mojoPortal Community Expert

Re: Control Elements The Wrong Color

You need to use something like Firebug or the developer tools in Chrome to see what style is being applied. You have to remember that CSS has a style precedence and specificity. It sounds like there is another style that takes precedence over yours.

And the fact you inline style works would lead me down this path.

3/12/2012 11:50:02 AM
Gravatar
Total Posts 148

Re: Control Elements The Wrong Color

If I set a <div class="myclass"></div>.... "myclass" should take precedence over anything else, correct?

3/12/2012 1:13:30 PM
Gravatar
Total Posts 2254

Re: Control Elements The Wrong Color

Not necessarily, it depends on a few things. 1) where is your css for "myclass" located in your stylesheet. Is it above or below the general css for links? 2) How specific are the selectors for "myclass" and links in general? If your css for links is more specific, it will take precedence, regardless of location in the stylesheet. For instance:

a,
a:link,
a:active,
a:visited { color: red; }

.myclass a { color: green; }

In this example, ".myclass a" is after the general link css but it isn't as specific so the general css will apply. For my example, you would use this to make the "myclass" selector more specific.

.myclass a,
.myclass a:link,
.myclass a:active,
.myclass a:visited { color: green; }

Links ("a" or "anchor" elements) tend to be one of the pickier elements to style with CSS because there are so many states. Just using "a" as your selector doesn't usually cut it.

HTH,
Joe D.

3/12/2012 1:22:59 PM
Gravatar
Total Posts 115
mojoPortal Community Expert

Re: Control Elements The Wrong Color

In addition to what Joe has mentioned this is an extremely good read.

3/13/2012 12:17:39 PM
Gravatar
Total Posts 148

Re: Control Elements The Wrong Color

I have cut and pasted this:

.myclass a,
.myclass a:link,
.myclass a:active,
.myclass a:visited { color: green; }

before, after and in between all my other defined styles.  The color still won't change.

3/13/2012 1:00:02 PM
Gravatar
Total Posts 18439

Re: Control Elements The Wrong Color

You should not add style directly inside your control using <style> tags. All style should be in your skin css files.

Note that the order in which the css files are listed in style.config is the order in which they will be combined so files closer to the bottom will have css that takes precedence over css higher up. This is known as the cascade part of cascading style sheets.

After editing the css files in your skin you should go to Administration > Advanced Tools > Design Tools > Cache Tool and click the button to reset the skin guid. This will make sure the browser loads the latest css.

Hope that helps,

Joe

3/13/2012 2:36:53 PM
Gravatar
Total Posts 148

Re: Control Elements The Wrong Color

OK

This is working....kind of.

 .myclass
  {
    font-family: 'Arial Black';
  }

 a.mynewclass,  a:link.myclass
  {
   color:Red;
  }

 a.mynewclass:hover, a:visited.mynewclass:hover, a:link.myclass:hover
  {
   color: #00FF00;
  }

 a:visited.myclass
  {
   color: #C0C0C0;
  }

When I edit the control with the "Edit" link and edit the html with the mojo Portal editor, the WYSIWYG view looks correct but in the page itself, all the links are grey. In the editor, the non-visited links are red, like they should be, but the page itself shows them all grey :(

3/13/2012 2:47:00 PM
Gravatar
Total Posts 18439

Re: Control Elements The Wrong Color

next you need to learn how to use Firebug or Chrome dev tools or IE dev tools to inspect the element and find out which css rules are applied to it ie where it is getting it color from, then you can figure out what in the css is styling it and contradicting your style rules. Then you can figure out how to make your rule have more precedence probably by moving it lower than the one that is contradicting your rule.

Hope that helps,

Joe

3/13/2012 2:59:02 PM
Gravatar
Total Posts 2254

Re: Control Elements The Wrong Color

Your selectors are wrong. They should be in the form of ELEMENT.CLASS:PSEUDO-CLASS. So, where you have a:visited.mynewclass:hover, you should just have a.mynewclass:hover. Where you have a:link.myclass, you should have a.myclass:link.

You must sign in to post in the forums. This thread is closed to new posts.