Having trouble with styles

swampfox

Member
Im trying to create a simple dark style with gold fonts, I cant seem to pull it off

I know this is a new system but it is not very intuitive, all of the colors in the color palette area have names that do not explain very well what they change, I have to change them and then go see what effect that has

also, for example, I try to change the color of the forum titles, and it seems you cant do that without changing the header background at the same time

2 questions...

how do I change the thread title color without changing the header background?

also, I cant seem to change the color of the border area at all, no matter which setting I change, by border area I mean the whole page surround down each side of the page and across the bottom, how is that accomplished?

Thanks for any help
 

Brogan

XenForo moderator
Staff member
Several different elements may use the same colour in the colour palette.

If you want to change a specific element without affecting the rest in the same group then you will need to edit the templates directly.

The background/side panels are controlled by General -> HTML -> Background

By thread title colour do you mean the thread list in forum view?
 

Jake Bunce

XenForo moderator
Staff member
how do I change the forum title color without changing the header background?
The forum title links use the body link color:

Admin CP -> Appearance -> Templates -> xenforo.css

Code:
a:link,
a:visited
{
    color: @primaryMedium;
    text-decoration: none;
}
Change the color to reference a different element of the palette or manually specify a color code.

Or if you want to set a different link color for just those titles then edit this template:

Admin CP -> Appearance -> Templates -> node_list.css

Add this code:

Code:
			.nodeTitle a,
			.nodeTitle a:visited
			{
				color: #ffffff;
			}
...as shown below:

Code:
	.node .nodeTitle
	{
		@property "nodeTitle";
		font-size: 12pt;
		@property "/nodeTitle";
	}

		.node .unread .nodeTitle
		{
			@property "nodeTitleUnread";
			font-weight: bold;
			@property "/nodeTitleUnread";
		}

			.nodeTitle a,
			.nodeTitle a:visited
			{
				color: #ffffff;
			}

	.node .nodeDescription
	{
		@property "nodeDescription";
		font-size: 11px;
		@property "/nodeDescription";
	}
also, I cant seem to change the color of the border area at all, no matter which setting I change, by border area I mean the whole page surround down each side of the page and across the bottom, how is that accomplished?
I think you want this:

Admin CP -> Appearance -> Style Properties -> General -> HTML -> Background

This one doesn't use the palette.
 

dutchbb

Well-known member
[...] all of the colors in the color palette area have names that do not explain very well what they change, I have to change them and then go see what effect that has[...]
Color palettes do not explain every area they affect, it's meant to produce a simple/quick color scheme for your site and it changes a whole range of colors in different places. If you want to change more specifically, you should look at the style properties and .css templates.
 

swampfox

Member
Thanks guys, I got a lot of my problems figured out

This was a lot easier to do with vb3, having to dig through the templates (and not know what you are looking for) to change a simple color setting seems like over complicating things to me, but Im not a software programmer, I guess I will learn as time goes on and hopefully it will make more sense
 

anotheralias

Well-known member
This was a lot easier to do with vb3, having to dig through the templates (and not know what you are looking for) to change a simple color setting seems like over complicating things to me...
I haven't upgraded yet so maybe there are even more of these options now - but on Beta 1 I didn't realize for quite awhile that I could use the Options section to override the color palette section on several things. Like with the userinfo holder - rather than trying to change it via the palette, you can just choose that from options and be as specific as you like - margins, borders, colors, padding, all of it. I mention just in case you hadn't come across that yet.

I really liked that, it was extremely detailed - I was used to having to add a lot of that stuff in 'extra CSS' in vB, with this it's all in one place and most of the work is done for you, like a color chart right there and a dropdown for some of the typing you'd normally have to do. No more writing border-top 1px solid (etc) over and over again.
 
Top