Auto inherit class?

[Texas]

I'm building some tables for v5 and I would like them to have the option to just auto inherit the class (mainly the titlebar) but when I insert class="title_bar" into the <td> tag it doesn't do anything. What am I doing wrong?

[Jordan]

The class name is "title-bar", not "title_bar" (but I'm guessing you just made a typo). Also, it's best to use a <div> because of the styles shown below.

The > sign says the direct descendant/child should have the following styles. So, the parent of the <td> needs to have a class of "container". So, you'd have to give the parent <tr> a class of "container" if you really want to use a <td> which I'd recommend against. Just code your containers or "tables" like the rest of the containers on the page by using <divs> which can have tables inside of them.

/* Containers and Dialogs */
.container > .title-bar {
      min-height: 30px;
      padding: 0px 10px;
      background-color: #00a0e2;
      background-image: url('http://images.proboards.com/v5/gradients/wave.png');
      background-attachment: ;
      background-repeat: repeat-x;
      background-position: left center;
      border: ;
      border-radius: 5px 5px 0 0;
      -moz-border-radius: 5px 5px 0 0;
      -webkit-border-radius: 5px 5px 0 0;
}
.container > .title-bar h2,
.container > .title-bar h3 {
      color: #ffffff;
      font: bold 100% Verdana, Arial;
      text-decoration: ;
      font-variant: ;
      text-transform: ;
      text-align: ;
      text-shadow: ;
      line-height: 30px !important;
      display: inline;
}
.container > .title-bar > .controls li a,
.container > .title-bar > .controls li div {
      color: #ffffff;
      background-color: #ff5f1d;
      background-image: url('http://images.proboards.com/v5/gradients/wave.png');
      background-attachment: scroll;
      background-repeat: repeat-x;
      background-position: left center;
      font: 100% Verdana, Arial;
      text-decoration: ;
      height: 30px;
      line-height: 30px !important;
      padding: 0 10px;
}
.container > .title-bar > .controls:hover li a,
.container > .title-bar > .controls:hover li div {
      color: #ffffff;
      background: ;
      font: 100% Verdana, Arial;
      text-decoration: ;
}
.container > .title-bar > .controls {
      float: right;
}

Here's an example.

<div class="container">
      <div class="title-bar center">
            <h2>Title</h2>
      </div>
      <div class="content cap-bottom">
            Content here. You can put a table inside here if you want.
      </div>
</div>

[Texas]

Jordan - The reason I used tables is because the tab is on the side and the whole table is meant to slide in and out. Is there any way to rotate the image?

[Jordan]

Not quite sure what you are talking about.

[Texas]

Okay, so my table is on the side of the screen and it's built to slide out. The problem is when I made the class "title-bar" the image is horizontal like it normally is, but I need it to be vertical, so that when it repeats it doesn't repeat a hundred small ones that are horizontal but on long vertical one.

[Jordan]

You'll need to override the css property. Something like this.

<div class="your_class other_classes">
   <div class="title-bar">
       <h2>Title</h2>
   </div>
   <div class="content">
       Content
   </div>
</div>

.your_class > .title-bar {
    background-repeat: repeat-y !important;
}

You can get rid of the ">" if your "title-bar" class is not a direct child of "your_class". You don't have to have it anyway, but it's just a good practice to have it if it is indeed a direct child so the CSS styles don't affect grandchildren nodes.

You also might not need the "!important", but you'll have to test it.

[Texas]

Okay that didn't seem to work. I even put it in just as ".title-bar" but all that did was make it so that the image on the titles didn't repeat and didn't affect my table

here is the table


<div>
<table id="slide_menu_left" width="100px" height="100%" style="border: 2px solid red;">
<tr>
<td id="menu_left_contentbox" style="border-right: 2px solid red;">
$[plugin.settings.left_box_main_content]
</td>
<td id="tab_left_container" class="the-tr-of-table container" width="30px" style="background-repeat:repeat-y;">
$[plugin.settings.left_box_tab_content]
<div id="tab_left" class="title-bar">    
</div>
</td>
</tr>
</table>
</div>


[Jordan]

Nov 30, 2012 15:39:31 GMT -8 Texas said:

Okay that didn't seem to work. I even put it in just as ".title-bar" but all that did was make it so that the image on the titles didn't repeat and didn't affect my table

The whole point of specifying the parent element's class name is so that it does not affect all the other elements on the page. When you just put ".title-bar", it's going to affect everything.

Also, if you are going to use the "style" attribute, you need to apply it to the element you want it to affect. So, you would want it on <div id="tab_left" class="title-bar"></div>, and not the parent <td> element.

The next thing is the gradient generated for you by Proboards isn't going to work if I am understanding what you are wanting correctly. You'd need to rotate the gradient in Photoshop.

[Texas]

Nov 30, 2012 16:08:03 GMT -8 Jordan said:

Nov 30, 2012 15:39:31 GMT -8 Texas said:

Okay that didn't seem to work. I even put it in just as ".title-bar" but all that did was make it so that the image on the titles didn't repeat and didn't affect my table

The next thing is the gradient generated for you by Proboards isn't going to work if I am understanding what you are wanting correctly. You'd need to rotate the gradient in Photoshop.

That is actually what I was asking I was asking if it was possible to rotate the image, but that's the answer