• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

[Style customization] CSS instead of div style?

Trombones13

Well-known member
#1

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...


Code:
<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:
Code:
<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)
 

Brogan

XenForo moderator
Staff member
#2
What are you trying to do exactly?

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

Trombones13

Well-known member
#3
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. :D I tried Page Width Controller (@pageWidth) for the one in PAGE_CONTAINER earlier, but it didn't work.
 

Brogan

XenForo moderator
Staff member
#4
Have you tried adding the css to EXTRA.css and using the class name?

For example:
Code:
.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

Well-known member
#5
Just did, but it does the same weird thing that the @pageWidth Style Property does:
XF Voice PageWidth Mod.png
(the weird colors on the breadcrumb/my username are because of the screenshot program, not this)
 

Brogan

XenForo moderator
Staff member
#6
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

Well-known member
#7
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*