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

Having trouble with styles

#1
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
#2
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
#4
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
#5
[...] 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.
 
#6
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
#7
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.