lost in classes

edited July 2007 in Style Development
hi

I need some help

I'm trying to make a style for a forums based on the TB source system
the whole pages are actually tons of td into td and td, and td

of course, there are classes but everything I've tried to change only one class didn't work

2 major problems:

1: how can I change the background color of (and only) a td class=colhead?
2: all this is included in a td (without class, just default td) but 'id like to put a background image to this main td and would without having it appear also in the td (still without classes) that are into it

I'm not sure I'm making myself clear since my english isn't that good at all
anyway, i'll explain further if you need more information

thanks for your help :)

Comments

  • 1. You can use the selector "td[class="colhead"]" or ".colhead" to target just td's with the class colhead.
    2. You can target certain td's by using its values, for example "td[width="30px"]" This will only select the td's with a width of 30 px.
  • thank you!
    I' had tried .colhead but for some reason it didn't work
    anyway, with td[class="colhead"] it works fine :)

    I'll have one more question: how can I now change text and links colors into a given table (like colhead, for example)?
  • You didnt realy Make much sence but i think i get what you are asking.

    links in colhead whould be like this
    /*link color*/
    td[class="colhead"] a {color: #000000 !important;}

    /*link color when hovering over it with mouse*/
    td[class="colhead"] a:hover {color: #000000 !important;}

    /*link color after the link has been visited*/
    td[class="colhead"] a:visited {color: #000000 !important;}

    And for the rest of the fontyou color it like this
    td[class="colhead"] {color: #000000 !important;}

    I hope that answered your question!
  • yes
    thanks again :)

    this extension is really great and thanks to you I'm getting started
  • I'd recommend you get an add-on that I've found incredibly helpful - Aardvark.
    I use it to "walk" up the code - finding the specifics of each container.

    For example:
    If you're looking at the first cell in the first row of the last table... you could put your mouse on the cell and see if there's anything special about it:
    "td width=164"
    Ok, you've got a width to latch onto, and you know it's the first cell.
    Hit W for Wider and it highlights the table row... anything special about it?
    "tr"
    Ok, nothing to latch onto, but you know it's also the first row!
    Hit W again and it highlights the table... anything special about it?
    "table"
    Nothing, but you know it's the last table of the page.
    One more W tap
    "body"
    - ok, you're done.

    In the end, you may end up with something like this:
    body table:last-child tr:first-child td[width="164"]

    Yeah, it can get complicated - especially when you can't change the code of the site.
  • Thanks for the tip about Aardvark. Really helpful.
  • if .colhead doesnt work then try td.colhead
  • Why using Aardvark? DOM Inspector when Stylish installed has same (or better) functionality. This selector:
    body table:last-child tr:first-child td[width="164"]
    might work wrong. This one is better:
    body>table:last-child>tr:first-child>td[width="164"]
    DOMi produces correct selectors...
  • Where do I find DOM Inspector? I've never run across it in Stylish or elsewhere . . .
  • edited August 2007
    tools menu>dom inspector
  • Nope, it's not there! Other addons are present and accounted for.
  • edited August 2007
    I dont have DOM ether, From what I heard it is something you have to select from a list of advanced features when you install firefox.
  • So how do you add it after install?
  • Did a little research and discovered that firefox-dom-inspector was available in the Synaptic repositories. One click and it's now up and running. Linux is wonderful!
  • No mention of Firebug? I've tried all the tools mentioned, and Firebug ownz 'em all...it's the only thing I use now.
  • Posted By: MikadoWhy using Aardvark? DOM Inspector when Stylish installed has same (or better) functionality. This selector:
    body table:last-child tr:first-child td[width="164"]
    might work wrong. This one is better:
    body>table:last-child>tr:first-child>td[width="164"]
    DOMi produces correct selectors...
    Now /that/ is handy... I never realized it was there... especially with the inspect button right below the file menu.
  • edited August 2007
    Posted By: berzingue2: all this is included in a td (without class, just default td)
    td:not([class])
    Posted By: ValacarNo mention of Firebug? I've tried all the tools mentioned, and Firebug ownz 'em all...
    Could Firebug access chrome elements?
  • Posted By: LouCypherCould Firebug access chrome elements?
    Yes it can, sort of.
  • Posted By: LouCypherHow?
    Put the chrome url in the location bar.
  • Then DOMI are far better.
Sign In or Register to comment.