SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Applying styling to my counter elements. Im stuck!

    Would like to apply separate styling to days, hours, seconds etc. Any ideas on how to do this? I am assuming this will take some breaking into the jquery code.

    Thanks ahead of time!


    http://steelcitycreative.com/count/test.html

  2. #2
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Seeing as there were no HTML elements on your page to target like the hours, minutes, etc., you'll probably have to use JavaScript to do this.

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You have 1 HTML element in the body with the id of defaultCountdown, which is the only element you can specifically target for styles. I'd suggest trying to re-structure the JS to accept four different fields, which you could put into 4 different h1 elements that would be the actual numbers of days, hours, minutes, seconds. That's my idea.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    You can set some styles with CSS, but the tricky part is seeing what actual HTML is generated by that JS so that styles can be applied. (It's hard to read through the JS file and work out what code is generated, but Firebug won't show the code either.)

    You could do a few simple things like this:

    Code:
    span {color: red;}
    span.countdown_amount {color: blue;}
    I also tried styling each .countdown_amount span with CSS3 pseudo classes like :nth-child(n), but that didn't work.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,383
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    With the web developer toolbar you can just view generated source.

    Code:
      <span id="defaultCountdown" class="countdown hasCountdown"><span class="countdown_row countdown_show4"><span class="countdown_section"><span class="countdown_amount">2660</span><br>Days</span><span class="countdown_section"><span class="countdown_amount">14</span><br>Hours</span><span class="countdown_section"><span class="countdown_amount">1</span><br>Minute</span><span class="countdown_section"><span class="countdown_amount">42</span><br>Seconds</span></span></span>
    As there are no unique classes on each you could use the adjacent selector (ie7+) to style the items.
    Code:
    .countdown_section{background:red}
    .countdown_section + .countdown_section{background:blue}
    .countdown_section + .countdown_section + .countdown_section{background:yellow}
    .countdown_section + .countdown_section + .countdown_section + .countdown_section{background:orange}

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    With the web developer toolbar you can just view generated source.
    Thanks Paul! Never noticed that option.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    With the web developer toolbar you can just view generated source.

    Code:
      <span id="defaultCountdown" class="countdown hasCountdown"><span class="countdown_row countdown_show4"><span class="countdown_section"><span class="countdown_amount">2660</span><br>Days</span><span class="countdown_section"><span class="countdown_amount">14</span><br>Hours</span><span class="countdown_section"><span class="countdown_amount">1</span><br>Minute</span><span class="countdown_section"><span class="countdown_amount">42</span><br>Seconds</span></span></span>
    As there are no unique classes on each you could use the adjacent selector (ie7+) to style the items.
    Code:
    .countdown_section{background:red}
    .countdown_section + .countdown_section{background:blue}
    .countdown_section + .countdown_section + .countdown_section{background:yellow}
    .countdown_section + .countdown_section + .countdown_section + .countdown_section{background:orange}
    PERFECT! This did the trick... thank you!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •