0
Welcome Guest! Login
0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

CSS overrides

Last Post
Search Topic

  • CSS overrides

    Posted 13 years 4 weeks ago
    • First of all, if this is not really appropriate to ask here and I should go to some more general coding site, just say so.

      I have what I think is a simple question about css overrides.
      I have a simple table class which is normally fine. However, in some cases I want to reduce the line height to compact the table a bit. In those cases I use the "smaller" class which seems to override just the line-height value. Great. No problem. I also have this "bold" class though and I want to be able to apply the "smaller" override to it as well but I cannot figure out how to do that in my css. I am sure this can be done simply somehow.

      Right now, I am reduced to doing something like "class="bold smaller"" which I am not even sure is valid html/css, I just tried it and it seemed to work:-) Is there a simple way of doing this?
      <head>
<!-- <link rel="stylesheet" href="css8.css" type="text/css" /> -->
<STYLE><!--
.table-2 {
    border: 1px solid #e3e3e3;
    background-color: #ffffff;
    border-collapse: separate!important;
    border-spacing: 1px;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}
.table-2 td .table-2 th {
    padding: 5px;
    color: #333;
}
.table-2 td {
    line-height: 22px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    text-align: center;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
}
.table-2 td.smaller {
    line-height: 4px;
}
.table-2 td.bold {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-align: left;
    text-color: #fff;
}
--></STYLE>
 
</head>
<table class="table-2">
<tr>
  <td style="line-height: 8px">Item 1 8 px</td>
</tr>
<tr>
  <td>Item 2 - undecorated</td>
</tr>
<tr>
  <td class="smaller">Item 3</td>
</tr>
<tr>
  <td class="bold smaller">Item 4 lefter</td>
</tr>
</table>
 
    #808155
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: CSS overrides

    Posted 13 years 4 weeks ago
    • Hi there,

      It is perfectly correct to use more than one class if the need arises. If you look at our module variations you will see classes such as title1 box3 etc and they can be combined.

      Hope this helps 8)

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #808214

  • Re: CSS overrides

    Posted 13 years 4 weeks ago
    • Oh, for Pete's sake. How many times have I looked at that when styling modules and never put it together when I was doing this. <facepalm>

      Thanks.
    #808266
    • David Goode's Avatar
    • David Goode
    • Preeminent Rocketeer
    • Posts: 17058
    • Thanks: 890
    • Web Designer and Host

    Re: CSS overrides

    Posted 13 years 4 weeks ago
    • I guess we can mark this as solved ? :cheesy:

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information
    #808283

Time to create page: 0.058 seconds