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

XF 1.2 What style properties are these?

Discussion in 'Styling and Customization Questions' started by Duck, Aug 3, 2013.

  1. Duck

    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.





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

    EQnoble Well-Known Member

    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
     .xenOverlay .formOverlay .textCtrl:focus, .xenOverlay .formOverlay .textCtrl.Focus {
      background-color:#COLOR !important;
    color of the text for the report
    .xenOverlay .formOverlay .textCtrl {
    color: #COLOR !important;

    color of the title text
    .xenOverlay .formOverlay .heading {
    color: #COLOR !important;
    Last edited: Aug 3, 2013
    Duck likes this.
  3. Duck

    Duck Member

    Thanks. I'll have to get back to this. I've screwed up my navigation bar, LOL.
  4. Duck

    Duck Member

    I'm attempting to make my navigation bar look like one solid bar.

    This is the gradient I made.


    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.



    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.

    Link to vB site: http://www.freightlinertruckforum.com/forum/forum.php?styleid=12
    Last edited: Aug 3, 2013
  5. Duck

    Duck Member

    Thanks @EQnoble, I fixed my report screen. :D

  6. Duck

    Duck Member

    A little more tweaking, ...

  7. EQnoble

    EQnoble Well-Known Member

    look familiar?
  8. Duck

    Duck Member

    Yes. Looks familiar. Except I don't see all those ads, LOL.

  9. Duck

    Duck Member

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

    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: Aug 3, 2013
  10. EQnoble

    EQnoble Well-Known Member

    Duck likes this.
  11. Duck

    Duck Member

  12. Duck

    Duck Member

    Ok how many of these smilies do I have to post until you tell me how you did that? --> bowdown.gif bowdown.gif bowdown.gif
  13. EQnoble

    EQnoble Well-Known Member

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

    Duck Member

    Ok I just installed firebug.

    Ever hear that lame joke about the mule with the spinning wheel?
  15. Brogan

    Brogan XenForo Moderator Staff Member

    Use two different browsers or use Chrome and two different profiles.

    I can be logged in with 10 different accounts on one computer.
    Duck likes this.
  16. EQnoble

    EQnoble Well-Known Member

    (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.
  17. Duck

    Duck Member

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

    EQnoble Well-Known Member

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

    Duck Member

    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.

  20. Duck

    Duck Member

    I used Internet Explorer.


Share This Page