[Style customization] CSS instead of div style?

[Trombones13]

Can't I do this with CSS somewhere? This is the current code (located in navigation) and I feel like that there has to be a style property for this or something...

<div class="navTabs" style="background: rgba(255,255,255,0.4);
border-left: 1px solid rgba(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.5);
border-bottom: 1px solid rgba(255,255,255,0.5);
padding: 0 15px 15px 15px;
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
-moz-border-radius-bottomright: 12px;
-moz-border-radius-bottomleft: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
">

I also have this in PAGE_CONTAINER:

<div class="pageWidth" style="background: rgba(255,255,255,0.4);
border-left: 1px solid rgba(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.5);
padding: 0 15px 15px 15px;
">

(also think I just found a bug...off to the Test forum)

 

[Paul B]

What are you trying to do exactly?

The Style Properties for the navTabs class is Header and Navigation: Navigation Tabs Container

 

[Trombones13]

It adds the little translucent borders that are around my custom theme (site has it [Echo] on there by default if you're looking at it), but I figured I could probably move those to Style Properties so I wouldn't have to deal with those customized templates upon upgrading the forum every time.

That Style Property mentioned works for the first one. I tried Page Width Controller (@pageWidth) for the one in PAGE_CONTAINER earlier, but it didn't work.

 

[Paul B]

Have you tried adding the css to EXTRA.css and using the class name?

For example:

.pageWidth {
background: rgba(255,255,255,0.4);
border-left: 1px solid rgba(255,255,255,0.5);
border-right: 1px solid rgba(255,255,255,0.5);
padding: 0 15px 15px 15px;
}

If you're adding new html/markup to a template though, there's no other way of doing it.

 

[Trombones13]

Just did, but it does the same weird thing that the @pageWidth Style Property does:

(the weird colors on the breadcrumb/my username are because of the screenshot program, not this)

 

[Paul B]

So adding the code to EXTRA.css has a different outcome than when it is included inline in the PAGE_CONTAINER template?

Have you tried using the !important attribute?

Failing that you could create a new class and add it to the PAGE_CONTAINER template like so:
div class="pageWidth EchoBorders"

 

[Trombones13]

The screenshot above is what it looks like with the code you mentioned put in EXTRA.css (with !important). Removing the code from PAGE_CONTAINER altogether removes the translucency on the left and right side.

...Turns out the issue was that I needed #content in front of it, because there's a <div id="content"> in front of it. sigh Fixed now...thanks *reverts PAGE_CONTAINER*

 

[Paul B]

I probably should have checked the template but I was being lazy

At least you got it working.