/ Register

  1. REGISTRATION REQUIREMENTS:

    Your username here MUST MATCH your XenForo username (connected to your XF license).

    Once you have registered here, then you need to start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

css question

Discussion in 'Sportsbook Support' started by SneakyDave, Oct 25, 2014.

  1. Oct 25, 2014 #1
    SneakyDave

    SneakyDave Member Sportsbook

    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.
    Code:
    .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

    Code:
    .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?
     
  2. Oct 25, 2014 #2
    Bob

    Bob Developer Staff Member

    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"?



    Selection_391.png
     
  3. Oct 25, 2014 #3
    Bob

    Bob Developer Staff Member

    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).
     
  4. Oct 25, 2014 #4
    SneakyDave

    SneakyDave Member Sportsbook

    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
     
  5. Oct 25, 2014 #5
    Bob

    Bob Developer Staff Member

    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
     
  6. Oct 25, 2014 #6
    SneakyDave

    SneakyDave Member Sportsbook

    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.
     
  7. Nov 24, 2014 #7
    leeooing

    leeooing New Member Sportsbook

    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
     
  8. Nov 24, 2014 #8
    Bob

    Bob Developer Staff Member

    Are you editing the correct template? Each style has its own Extra.css template.
     
  9. Nov 24, 2014 #9
    leeooing

    leeooing New Member Sportsbook

    Yeah i did. You can try edit . it wont happened
     
  10. Nov 24, 2014 #10
    Bob

    Bob Developer Staff Member

    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
    HTML:
    .sportsbookEventListItem .main .status .open {
font-size: 10px !important;
color: #eeeeee !important;
background-color: #ff0000 !important;
}
    Selection_435.png

    Selection_436.png
     
    SneakyDave and leeooing like this.
  11. Dec 9, 2014 #11
    SneakyDave

    SneakyDave Member Sportsbook

    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.


    upload_2014-12-9_9-52-22.png

    It uses the "open" class:
    upload_2014-12-9_9-54-33.png

    I tried to use this:
    Code:
    .strong .sportsbookStatusIndicator .open{
    background-color: blue !important;
}
    But that doesn't change it at all. I can change it with this:
    Code:
    .open{
    background-color: blue !important;
}
    But that's a pretty generalized class, and this element is affected.
    upload_2014-12-9_9-58-54.png

    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.
     
  12. Dec 9, 2014 #12
    Bob

    Bob Developer Staff Member

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

.nflj_sportsbook_event .open span
{
    background-color: blue;
}
     
  13. Dec 9, 2014 #13
    SneakyDave

    SneakyDave Member Sportsbook

    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?
     
  14. Dec 9, 2014 #14
    Bob

    Bob Developer Staff Member

    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
    HTML:
    .sportsbookStatusIndicator.open
{
    background-color: blue;
    border-color: blue;
}

.sportsbookStatusIndicator.open span
{
background-color: blue;
}
     
  15. Dec 9, 2014 #15
    Bob

    Bob Developer Staff Member

    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;
    }
     
  16. Dec 9, 2014 #16
    SneakyDave

    SneakyDave Member Sportsbook

    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.
     
  17. Dec 9, 2014 #17
    Bob

    Bob Developer Staff Member

    I have to look CSS crap up all the time. Drives me nuts sometimes lol
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Accept Learn More...