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

Tertiary color Style Properties?

Trombones13

Well-known member
#1
This is just a question of curiosity more than anything else... Is it (or would it be) possible to add @tertiary Style Properties for the Color Palette somehow? I think it would make color customization easier on styles that are using variants of more than two colors and have to insert those with hex codes instead of Style Properties. Food for thought, I suppose. :)
 

Shadab

Well-known member
#4
Not a mockup! Just tried it.
You need to be in debug mode to enable all the goodies. :)

If you edit the Master Style's Color Palette, you can associate the color palette to an addon. And if you edit any child style, the palette would get attached to that particular style (and its descendants) only.
  1. Go to: Appearance » Styles » Style Properties (for your theme, or master) » Color Palette
  2. Click the "+Create New Property" button on the top right of the page
If you're editing Master Style:
Master_Style_Color_Palette.png

Or, for any other style:
Child_Style_Color_Palette.png
 

Shadab

Well-known member
#5
Thought I'd play a bit more with these "custom" color palettes.

» Create a new css template (via Master Style):
Code:
.helloworld {
	font-size: 15px;
	font-family: Georgia, serif;
	font-style: italic;
}

.helloworld .test1 {
	color: @tertiaryDark;
}

.helloworld .test2 {
	color: @tertiaryMedium;
}

.helloworld .test3 {
	color: @tertiaryLight;
}

.helloworld .test4 {
	color: @tertiaryDark;
	border: 1px solid @tertiaryMedium;
	background: @tertiaryLight;
	padding: 5px 10px;
	text-shadow: 1px 1px 2px #ffffff;
}
» Then setup a new page node, with the following template html:
Code:
<xen:require css="helloworld_test.css" />

<div class="baseHtml messageHtml helloworld">
	<p class="test1">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		In nisl diam, auctor at accumsan dapibus, tempus ut elit.
		Sed est leo, vestibulum ac mattis sit amet, laoreet et enim.
	</p>
	<p class="test2">
		Mauris nec velit ac arcu scelerisque lacinia eget sed magna.
		Morbi tincidunt fermentum gravida. Ut tellus diam, dictum et
		elementum sit amet, luctus vehicula neque. Sed nec sapien mauris.
	</p>
	<p class="test3">
		Etiam rhoncus, libero vel tincidunt auctor, nibh nunc tristique lacus,
		quis vehicula odio elit in mauris. Cras in metus elit, id condimentum ligula.
		Sed quis quam sem, non posuere odio. Morbi aliquam gravida justo.
	</p>
	<p class="test4">
		Etiam rhoncus, libero vel tincidunt auctor, nibh nunc tristique lacus,
		quis vehicula odio elit in mauris. Cras in metus elit, id condimentum ligula.
		Sed quis quam sem, non posuere odio. Morbi aliquam gravida justo.
	</p>
</div>
And then play with the slider, invert, etc. functions available on the color palette page...

combination_1.png combination_2.png combination_3.png
 

Trombones13

Well-known member
#6
Awesome! I was wondering if that was possible to do in debug mode. I'll have to get my server-side permissions adjusted so I can edit config and try that out. Thanks! :)
 

Trombones13

Well-known member
#7
Worked like a charm; thanks again! :D
(p.s. the Display Order affects the order of each color within the sub group as opposed to the order of the sub groups themselves, right?)
XF Style Properties.png