css question

[SneakyDave]

I hate workin with css, but I'm trying to just change the color of the status span.

From Chrome inspector, I just want to change the backgroun-color, font-size, and color of this element.

.sportsbookEventListItem .main .status .open {
font-size: 9px;
float: right;
color: #80C480;
background-color: #EDFAED;
border: 1px solid #80C480;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
padding: 1px 2px;
margin-top: 3px;
margin-left: 5px;
}

I try to put this in EXTRA.css

.sportsbookEventListItem .main .status .open {
font-size: 10px !important;
color: #eeeeee !important;
background-color: #ff0000 !important;
}

But it doesn't change the span. I can see my css that I'm trying to use to override in Chrome inspector, but it must be being overwritten somehow.

Is it better to just change the SportsbookER templates themselves?

 

[Bob]

I cut and pasted your CSS into EXTRA.css and it worked just fine. As you can see, it is using the RED background instead of the lightish green (the most obvious of the 3 changes).

You sure you were viewing the right "style"?

 

[Bob]

Is it better to just change the SportsbookER templates themselves?

I wouldn't say "better", but you CAN if you want to. In this particular case, its easier to override via extra css as each pages CSS file would have to be edited (this is so you can have different looks for different area's). Just don't make changes to the MASTER templates as those get overridden on upgrade (as do all core XF MASTER TEMPLATES).

 

[SneakyDave]

Yeah, correct style. It must be a caching problem then, or the "store templates as files" issue. Seems to always happen on EXTRA.css, but never in the style properties. Will turn that shit off while I'm doing that stuff. Doesn't help that I'm using libmemcached, templates as files, and Cloudflare all at once.

EDITed to add, yeah, that's what it was, some caching thing, what a PITA

 

[Bob]

Someone that was using cloudflare was having an almost identical issue. They ended up having to clear cache on cloudflare (I don't use it so I am not 100% sure if that is the correct terminology lol). I don't use any caching on my Development environments for this exact reason. Drives me nuts when developing and CACHING kicks in lol

 

[SneakyDave]

Yeah, you can turn on "development mode" with Cloudflare too, but normally I don't have to do that. Just depends on the template I think, and the timing.

 

[leeooing]

I did change style from EXTra.CSS or theme css but still not affect any thing
but when i use firebug to modified and it works. i dont know why

 

[Bob]

Are you editing the correct template? Each style has its own Extra.css template.

 

[leeooing]

Are you editing the correct template? Each style has its own Extra.css template.

Yeah i did. You can try edit . it wont happened

 

[Bob]

You can see it in action right here: http://addons.nfljunkies.com/sportsbook/ the OPEN status is now RED

I edited the template: EXTRA.css

.sportsbookEventListItem .main .status .open {
font-size: 10px !important;
color: #eeeeee !important;
background-color: #ff0000 !important;
}

 

[SneakyDave]

ok, here's another one. I thought this was an easy change, but it messed up another element using the same class.

I want to just change the color of this banner to blue, for example.




It uses the "open" class:


I tried to use this:

.strong .sportsbookStatusIndicator .open{
    background-color: blue !important;
}

But that doesn't change it at all. I can change it with this:

.open{
    background-color: blue !important;
}

But that's a pretty generalized class, and this element is affected.


So I just want to change the "open" class that is part of the sportsbookStatusIndicator, but I can't figure out what the correct CSS would be.

 

[Bob]

.nflj_sportsbook_event .open
{
    background-color: blue;
    border-color: blue;
}

.nflj_sportsbook_event .open span
{
    background-color: blue;
}

 

[SneakyDave]

That worked great bob. How would a person know from the Chrome tool that the nflj_sportsbook_event class needs to be specified in that?

 

[Bob]

That class is the first PARENT class available to the .open class on that particular template. .parent .child

.sportsbookStatusIndicator is in the same element as .open so you can't reference is as the parent class.

.sportsbookStatusIndicator.open (space removed) will work as well

.sportsbookStatusIndicator.open
{
    background-color: blue;
    border-color: blue;
}

.sportsbookStatusIndicator.open span
{
background-color: blue;
}

 

[Bob]

where there are 2 CSS classes in the same element and you want to use them as "identifiers" you have to concatonate them..

<div class="sneaky dave"> <span>blah blah blah></span></div>

.sneaky.dave span
{
font-size: 12pt;
font-weight: bold;
}

 

[SneakyDave]

oh, I got it now, I was just using .sportsbookStatusIndicator.open incorrectly. If I just would have looked at the chrome tool more closely....

Christ, I need a css lesson.

 

[Bob]

Christ, I need a css lesson.

I have to look CSS crap up all the time. Drives me nuts sometimes lol