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

Tertiary color Style Properties?

Discussion in 'XenForo Development Discussions' started by Trombones13, Dec 9, 2010.

  1. Trombones13

    Trombones13 Well-Known Member

    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. :)
     
  2. Shadab

    Shadab Well-Known Member

    Tertiary_Style_Property.png

    :)
     
    Trombones13 likes this.
  3. Brogan

    Brogan XenForo Moderator Staff Member

  4. Shadab

    Shadab Well-Known Member

    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
     
  5. Shadab

    Shadab Well-Known Member

    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, Shelley and Brogan like this.
  6. Trombones13

    Trombones13 Well-Known Member

    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! :)
     
  7. Trombones13

    Trombones13 Well-Known Member

    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
     

Share This Page