Forum Index >  glFusion >  glFusion Support New Topic Post Reply
 Moorotator CSS question
   |  Printable Version
By: Lou (offline)  Mar 13 2012 12:15 pm (Read 632 times)  
Lou

I'm baffled by something with the moorotator widget. The sample data in the widget displays on moorotator with white text on a dark background.

The images I'm choosing to use have a white background so I need to change the text color to something dark or provide viewers with special glasses for viewing invisible ink. I'm speaking of the text inside this tag on the moorotator widget code - <div class="gl_moorotatortext">

I will be the first to raise my hand to say that I am far from a CSS expert and the CSS code with glFusion is so far above my head it's nearly as invisible as the text. But I am game to try and learn.

In the style.css file, around line 2300 or so is this section which I believed to be the necessary area to modify;

PHP Formatted Code
#gl_moorotator .gl_moorotatortext {
position:relative;
top:150px;
z-index:2;
margin-left:10px;
display:block;
color:#FFF;
}



Changing the value of the color makes no difference at all and if I examine the widget with firebug inspector, it seems to show that the color code I kept changing is being overridden by an inherited value but I don't understand how to resolve it:

Lou


Forum Chatty
Chatty

Group Comfort
Level:
: +2

Registered: 07/27/11
Posts: 65

Profile Email    
  Quote
By: Lou (offline)  Mar 16 2012 09:52 am  
Lou

Anybody have any suggestion for a CSS novice on how to change the text color in Moorotator?

Forum Chatty
Chatty

Group Comfort
Level:
: +2

Registered: 07/27/11
Posts: 65

Profile Email    
  Quote
By: Geiss (offline)  Mar 16 2012 14:09 pm  
Geiss

Hi Lou,

The best way to change the color in public_html/layout/nouveau/style.css is to add the !important value after the color property, like this:

PHP Formatted Code
#gl_moorotator .gl_moorotatortext {
position:relative;
top:150px;
z-index:2;
margin-left:10px;
display:block;
color:#FFF !important;
}



The reason we need the !important value is that style-colors.css is loaded after style.css, so the value in style-colors.css takes precedence over the value in style.css.

Also, make sure to clear your glFusion cache (Command & Control >> Clear Cache), and your browser cache (CTRL + F5). To make sure that you don't lose your customizations on a glFusion upgrade, I recommend using a custom css file.

Hope this helps,

Eric


Forum Active Member
Active Member

Group Comfort
Level:
: +58

Registered: 02/15/07
Posts: 2097
Location: Boise, Idaho

Profile Email Website  
  Quote
By: Lou (offline)  Mar 16 2012 14:43 pm  
Lou

Thanks for the reply Eric.

Fortunately, I am using a custom css file, a wonderful benefit of glFusion.

Unfortunately, adding the !important; value after the color choice is making no difference. Cleared the cache via command&control and also cleared browser cache, but no matter what value I place in the color field, it never appears on screen. The only way I can get it to be anything other than white is by using a <font color> tag with the text in the moorotator code.

Lou

Forum Chatty
Chatty

Group Comfort
Level:
: +2

Registered: 07/27/11
Posts: 65

Profile Email    
  Quote
By: Geiss (offline)  Mar 16 2012 15:04 pm  
Geiss

Lou,

Specificity in CSS can be tricky, but there are a couple of other things we can try:

1. Create a custom style-colors.css file, and at the bottom of that file include

PHP Formatted Code
#gl_moorotator .gl_moorotatortext {
color:#FFF !important;
}



2. Just like you already indicated, wrap the text in a font tag in the markup. The font tag is actually depreciated in HTML4, and removed in HTML 5, so I would recommend using a span tag instead. Then you could use a new class selector tag for those markup items so you can continue to target them with css in the stylesheet. For example, in your markup:

PHP Formatted Code
<span class="white">this text in white</span>



and in your stylesheet:

PHP Formatted Code
span .white {
color:#ffffff;
}



That should override any other inheritance. At least I hope! Wink

Eric


Forum Active Member
Active Member

Group Comfort
Level:
: +58

Registered: 02/15/07
Posts: 2097
Location: Boise, Idaho

Profile Email Website  
  Quote
New Topic Post Reply


 All times are CST. The time is now 11:25 pm.
Normal Topic Normal Topic
Locked Topic Locked Topic
Sticky Topic Sticky Topic
New Post New Post
Sticky Topic w/ New Post Sticky Topic w/ New Post
Locked Topic w/ New Post Locked Topic w/ New Post
View Anonymous Posts 
Able to Post 
HTML Allowed 
Censored Content