XF 1.2 What style properties are these?

Duck

Member
I need to know how to fix this. I changed all of the color palettes to green & black & I don't even know which individual properties I need to fix to change this.

report1.webp

report2.webp

report3.webp

report4.webp

I don't want to change the color palette swatches cuz that'll just screw something else up. I'd rather just type in some color codes for the individual properties. I'd rather have the text entry box black when it's actively being typed in, with green font. In the header bar on that report box, I'd like to darken the green a bit & have "Report Post" in a brighter green like #86FF86
 
Style Properties -> Form-Type Overlays

Heading (the title text)
Text Control (when clicked away)
Text Control, Focus State (when active on that element)


or add these in the extra.css template with the obvious changes made to specify your colors.


background color
Code:
 .xenOverlay .formOverlay .textCtrl:focus, .xenOverlay .formOverlay .textCtrl.Focus {
  background-color:#COLOR !important;
}

color of the text for the report
Code:
.xenOverlay .formOverlay .textCtrl {
color: #COLOR !important;
}


color of the title text
Code:
.xenOverlay .formOverlay .heading {
color: #COLOR !important;
}
 
Last edited:
I'm attempting to make my navigation bar look like one solid bar.

This is the gradient I made.

navbar.gif


It's tall enough to cover the top & bottom halves so I just made it a vertical mirror-image of itself. It's only 183 bytes too.

Screenshot:

navbar.webp

For one, I can't figure out how to brighten the text color for "Home" and "Members". I have no idea what stylevar that is.

The style property for the top half, which is surrounded on 3 sides by the light green border is "Navigation Tabs Container". I put the gradient in there set to repeat-X and positon "top".

To get the gradient to show in the bottom half, I put the gradient file in "Selected Tab", repeat-X, position: bottom. And it worked.

But when I try to use the same "Selected Tab" property screen to put the green border around it, it just puts a border around the individual links in the bottom. Nothing I've tried will put a border around the lower half of that navigation bar. It's like there isn't even a property for it.

What I'm actually trying to do is reproduce the navbar I created for another forum that is running vB4 that will soon be wiped out when it gets converted to a Xenforum.

Here's a screenshot of the navbar I made for the vB4 site. Looks like I was way off with the gradient, LOL. I'll fix that later.

freightliner-site-navbar.webp
Link to vB site: http://www.freightlinertruckforum.com/forum/forum.php?styleid=12
 
Last edited:
I just logged out for a minute, .. and realized my login thingy is all screwed up too. (also screwed up in the tab shown in your screenshot.)

login-thingy.webp
Click under "yes my password is" and it goes black like the user name field. Click off to the side & both fields are green. Grr....

That's the last time I attempt to style a forum using nothing but the color palette.

I think I know the properties page to fix that though. I'll just have to use two computers cuz I'm too lazy to keep logging out. Can't be logged into the admin panel while logged out of the forum.
 
Last edited:
I mean...you shouldn't have said that I am waiting to see what smiley you have next lol.

I just manipulated the css using firebug and it applies the same way it would if you just added the lines of css to the EXTRA.css template.
 
I'll just have to use two computers cuz I'm too lazy to keep logging out. Can't be logged into the admin panel while logged out of the forum.
Use two different browsers or use Chrome and two different profiles.

I can be logged in with 10 different accounts on one computer.
 
Ok I just installed firebug.

Ever hear that lame joke about the mule with the spinning wheel?
(nobody knows how he got it and danged if he knows how to use it)
Lol I did just now thanks to my best friend google. Funnily enough I was thinking along the lines of an ass walking in circles...which oddly is not that far off from the joke if you don't take my original interpretation literally :ROFLMAO:


I made a LOT of changes...I am too tired to write them all down with instructions...or to convert all possible css to style properties (what you probably mean when you say stylevars) but if you remind me tomorrow I will pass them on to you.
 
(nobody knows how he got it and danged if he knows how to use it)
Lol I did just now thanks to my best friend google. Funnily enough I was thinking along the lines of an ass walking in circles...which oddly is not that far off from the joke if you don't take my original interpretation literally :ROFLMAO:


I made a LOT of changes...I am too tired to write them all down with instructions...or to convert all possible css to style properties (what you probably mean when you say stylevars) but if you remind me tomorrow I will pass them on to you.
Ok. You'd have to dumb it down quite a bit. Stylevars Style properties I can figure out.

But they don't teach .CSS code in truck driving school. At least not the one I went to.
 
Heh you made it further than me...I dropped out of highschool quick and skipped college. :)

Style Properties basically creates css for you rather than you having to write it out manually in a template like EXTRA.css.

From the example above.

Style Properties -> Form-Type Overlays

Text Control (when clicked away)
________________________________

Code:
.xenOverlay .formOverlay .textCtrl {
color: #COLOR !important;
}
If you were to set a text color in the style property 'Text Control' it would literally be the same as setting a color by directly adding the css to your EXTRA.css template.
The important is added to the rule because a color property already exists and the !important overrides that.

The difference to me is a matter of convenience or what you are comfortable with.
 
Heh you made it further than me...I dropped out of highschool quick and skipped college. :)

Style Properties basically creates css for you rather than you having to write it out manually in a template like EXTRA.css.

From the example above.


If you were to set a text color in the style property 'Text Control' it would literally be the same as setting a color by directly adding the css to your EXTRA.css template.
The important is added to the rule because a color property already exists and the !important overrides that.

The difference to me is a matter of convenience or what you are comfortable with.
I want the easy way whenever possible. CSS is over my head. I only understand the very basics like color codes because it's somewhat kinda of similar to the XML I've tinkered with when I've made gauges for MS Flight Simulator. But there doesn't seem to be a Style Property for putting a border around the bottom half of the navigation bar.

I fixed the login thingy though.

login-thingy-2.webp
 
Top Bottom