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

Style Properties Problems

Discussion in 'XenForo Questions and Support' started by Jo., Dec 14, 2010.

  1. Jo.

    Jo. Well-Known Member

    I'm trying to set up a style and am having some big problems trying to figure out what properties relate to what and am getting very confused.

    I can't see anywhere that I can change the colour of a 'page' title (despite searching through where it seems to refer to xf pages, rather than just general pages lol), and the same for thread titles and the links at the top of a thread (mark forums read etc.).

    Also, can someone explain what is meant by 'tabs' cos I can't seem to figure out what that's referring to.

    I'm finding the terminology used in the style properties really confusing - the things that you'd think terms mean, they don't seem to mean... so I'm getting lost.
     
  2. Peggy

    Peggy Well-Known Member

    Jo, for the page title, go to Style Properties > General > Page Title.

    I believe that "tabs" is referring to The Forum, Members, Help tabs up top.
    That is found in style properties > Header and Navigation.
     
  3. Brogan

    Brogan XenForo Moderator Staff Member

    I can only offer general guidelines but I would highly recommend using Firefox and Firebug.
    It is very easy to see which template and attribute is being used where with those.
    The Style Properties and templates are linked so you can edit either.

    Another tip is to change something in Style Properties to bright pink and then refresh the forum to see what's changed.

    The tabs refer to the navigation tabs on the menu; Forums, Member, Help, etc.
     
  4. Trombones13

    Trombones13 Well-Known Member

    I'd suggest using Firebug (or the Chrome equivalent) to check the element's information, then plug that into the template search on XF. If the element's template shows "@Property" around it, then you should be able to edit it in the Style Property of the name that follows it. You could also search for the name of the @Property tag in the template search and find where it's being edited from there. I'll admit that sometimes I change things to find where they're being changed, then change it back once I find it, haha.

    I'm hoping to work on a styling guide to point out where each part of the style is controlled, whether in templates and/or Style Properties, over break (probably for my own aid as much as yours, lol!), so hopefully that will help us spot some of these more easily. :)
     
    Peggy likes this.
  5. Peggy

    Peggy Well-Known Member

    I'm gonna have to find this firebug thing and figure out how to use it.
     
  6. Trombones13

    Trombones13 Well-Known Member

    http://getfirebug.com/
     
  7. Peggy

    Peggy Well-Known Member

    I have downloaded it. Now how do you "plug it in to the template search on XF" ?
     
    Jo. likes this.
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Just right click anywhere on the page and select "Inspect Element" and prepare to be amazed ;)
     
    Trombones13 likes this.
  9. Jo.

    Jo. Well-Known Member

    Thanks Peggy - I didn't mean the header though... I meant the title that shows up in the forum view for a 'page' rather than a forum. I need to change the colour of the page title cos it's currently not showing up on the forum view cos it's set to the same colour as the background, but I can't for the life of me find where to change it lol.

    Thanks for that Brogan :) I'm having a look at Firebug and trying to figure out how to use it lol.
    A styling guide would be seriously useful Trombone! It's pretty confusing and a bit hit and miss at the moment (particularly for someone who's not experienced at doing styles). :) How do you 'plug Firebug into the template search'?
     
  10. Jo.

    Jo. Well-Known Member

    At least it's not just me lol
     
    Peggy likes this.
  11. Trombones13

    Trombones13 Well-Known Member

    When you're on XF (or your forum), right-click whatever object it is you want to look at (or edit) and select "Inspect Element." It'll pop up a box at the bottom of your screen that tells you some of the code. For example, I just clicked on the blue box surrounding my avatar, and I can see .messageUserBlock in the box. That gives me something to look for; I can then use "Search Templates" on XF to find that in the templates. If you do so and select message_user_info.css, then look for the code, you'll find this:
    Code:
    .messageUserBlock
    	{
    		@property "messageUserBlock";
    		background: @pageBackground url('@imagePath/xenforo/gradients/tab-selected-light.png') repeat-x bottom;
    		border: 1px solid @primaryLighter;
    		border-radius: 5px;
    		@property "/messageUserBlock";
    		position: relative;
    	}
    With this, you can now change these properties and note that it's controlled by the Style Property "messageUserBlock," so if you find that in Style Properties, you can edit it there. :)
     
    Brogan likes this.
  12. Brogan

    Brogan XenForo Moderator Staff Member

  13. Peggy

    Peggy Well-Known Member

    ummmmm select Inspect Element.... where??
     
  14. Trombones13

    Trombones13 Well-Known Member

    Right-click part of the page (on your web browser) and it'll pop up right below your mouse (like if you right-click to copy text or something).

    Inspect Element.png
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    Have you installed Firefox and the Firebug add-on?

    Firebug only works from within Firefox.
     
  16. Trombones13

    Trombones13 Well-Known Member

    Oh, yeah; good point... lol Google Chrome also has one built-in that is used in the same way.
     
  17. Jo.

    Jo. Well-Known Member

    what if it doesn't say "@property"?
     
  18. Jo.

    Jo. Well-Known Member

    and how do you make it 'inspect element' in CSS not html? if I click on CSS it doesn't show anything useful lol
     
  19. Trombones13

    Trombones13 Well-Known Member

    If it doesn't say @property, then there isn't a Style Property that controls it, so you'll have to edit the template. That requires some CSS knowledge...but not a lot, since I've been able to do quite a bit with the small amounts I've picked up, lol.

    I'd leave it on HTML--it shows you what you're looking for. For example, if I wanted to edit the title of this page, I'd right-click and it would show me (under "Style" for Firefox; "Matched CSS Rules" for Chrome) that what I'm editing is .titleBar h1. Then, if I wanted to change the color to, for instance, white, I can add a line color: white; and it'll change before your eyes. ooh

    Let me see if I can find some tutorials... *digs*
     
    Vilandra and Jo. like this.
  20. Jo.

    Jo. Well-Known Member

    thanks Kurt :)
     

Share This Page