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

Style Properties Problems

Jo.

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

Peggy

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

Brogan

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

Trombones13

Well-known member
#4
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. :)
 

Jo.

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

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.
Thanks for that Brogan :) I'm having a look at Firebug and trying to figure out how to use it lol.
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. :)
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'?
 

Trombones13

Well-known member
#11
I have downloaded it. Now how do you "plug it in to the template search on XF" ?
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. :)
 

Peggy

Well-known member
#13
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. :)
ummmmm select Inspect Element.... where??
 

Jo.

Well-known member
#18
and how do you make it 'inspect element' in CSS not html? if I click on CSS it doesn't show anything useful lol
 

Trombones13

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