0
Welcome Guest! Login
0 items Join Now

Isolatiing CSS?

Last Post
Search Topic

  • Isolatiing CSS?

    Posted 13 years 1 month ago
    • I fully admit to being a css noob... but I am trying to learn this inheritance piece.

      I have a bit of css I would like to implement for a table. Offline, it works just fine and produces the look I want. When I incorporate it into my component and it lives within joomla, it does not render the same at all. I don't think I am duplicating any style names but rather am probably inheriting some values that are causing issues.

      Is there a way to tell my particular batch of html to only use the very specific bit of css I want and to ignore any inheritance?
    #794592
    • J!eremy's Avatar
    • J!eremy
    • Elite Rocketeer
    • Posts: 2108
    • Thanks: 8

    Re: Isolatiing CSS?

    Posted 13 years 1 month ago
    • its kind of hard to tell what you mean without seeing it, but! I think I have it.. :)

      if you add !important to the end of the line it will make it priority like below
      body.f-larger {
     font-size: 14px!important;
}
    • Send moderators PMs ONLY if they request it.
      James' First Blog Post lol
      Top Tips for Support
      Be SPECIFIC when posting.
    #794596
    • J!eremy's Avatar
    • J!eremy
    • Elite Rocketeer
    • Posts: 2108
    • Thanks: 8

    Re: Isolatiing CSS?

    Posted 13 years 1 month ago
    #794597

  • Re: Isolatiing CSS?

    Posted 13 years 1 month ago
    • So, if I understand this correctly, and had a style block like so:
      .table-2 thead {
          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
          padding: .2em 0 .2em .5em;
          text-align: left;
          color: #4B4B4B;
          background-color: #C8C8C8;
          background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3));
          background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);
          border-bottom: solid 1px #999;
}

      I would want to update it to something like:
      .table-2 thead {
          font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif!important;
          padding: .2em 0 .2em .5em!important;
          text-align: left!important;
          color: #4B4B4B!important;
          background-color: #C8C8C8!important;
          background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3))!important;
          background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%)!important;
          border-bottom: solid 1px #999!important;
}

      Even better of course would be for me to actually figure out which sections are causing my issue and just designate those as important I assume.
    #794606
    • J!eremy's Avatar
    • J!eremy
    • Elite Rocketeer
    • Posts: 2108
    • Thanks: 8

    Re: Isolatiing CSS?

    Posted 13 years 1 month ago
    #794615

  • Re: Isolatiing CSS?

    Posted 13 years 1 month ago
    • I took your advice and it has cleared up most of the problems. Thanks!

      The only remaining issue I seem to have is a problem with an inherited border-collapse: collapse from the component-content module.
      .component-content table {
     border-collapse: collapse;
}

      I need to override this but obviously don't want to change it everywhere, just for my table.

      You should be able to see an example at www.tabsuwear.com/mistrhanky/index.php?o...pick_play&Itemid=304 . Login rocket/rocket. The element I am working on is the row with the two teams matched up. If I drop the border collapse, the boxes are nicely separated, which is what I am looking for. Again, thanks for all the help.
    #794849
    • J!eremy's Avatar
    • J!eremy
    • Elite Rocketeer
    • Posts: 2108
    • Thanks: 8

    Re: Isolatiing CSS?

    Posted 13 years 1 month ago
    • Try just adding this.. but each table is going to need a separate class this one happens to be table-2

      .table-2 {
     border-collapse: separate!important;
}
    • Send moderators PMs ONLY if they request it.
      James' First Blog Post lol
      Top Tips for Support
      Be SPECIFIC when posting.
    #794865

  • Re: Isolatiing CSS?

    Posted 13 years 1 month ago
    • Thanks. That worked great. I had actually tried that, but I think my problem was that I was trying to apply it to a table row instead of the whole table. Thanks again.
    #795141
    • J!eremy's Avatar
    • J!eremy
    • Elite Rocketeer
    • Posts: 2108
    • Thanks: 8

    Re: Isolatiing CSS?

    Posted 13 years 1 month ago
    #795227

Time to create page: 0.064 seconds