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

Changing color palette values inside a template or via a conditional

Discussion in 'Styling and Customization Questions' started by Mike Creuzer, Nov 29, 2011.

  1. Mike Creuzer

    Mike Creuzer Well-Known Member

    Hello all,

    I would like to change the value of say: @pageBackground via a conditional or some other method. In other words, I would like it to do something like this:

    <xen:if is="@isDark">@pageBackground = 'black';<xen:else />@pageBackground = 'white';</xen:if>
    Is this easily done?

  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You can't do that.

    Why do you want to change that property? There might be another way to accomplish your goal.
  3. Mike Creuzer

    Mike Creuzer Well-Known Member

    Well, I wanted to build a theme (just one) without using child themes (obviously I can do it with child themes) where you can change the style from light to dark. It can be done simply by changing the color palette values, but without this ability I must use a child style I believe.
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    You could use inline styling:

    Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

    <!DOCTYPE html>
    <html style="background: #000000;" id="XenForo" lang="{$visitorLanguage.language_code}" dir="{$visitorLanguage.text_direction}" class="Public {xen:if {$visitor.user_id}, 'LoggedIn', 'LoggedOut'} {xen:if {$sidebar}, 'Sidebar', 'NoSidebar'}" xmlns:fb="http://www.facebook.com/2008/fbml">
    <xen:hook name="page_container_head">
    	<meta charset="utf-8" />
    	<xen:if is="{$requestPaths.fullBasePath}">
    		<base href="{$requestPaths.fullBasePath}" />
    		<script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
    			var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
    			if (_b && _b.href != _bH) _b.href = _bH;
    A conditional can be added so the inline styling depends on some condition.
  5. Mike Creuzer

    Mike Creuzer Well-Known Member

    Since the properties are used in all the xenforo CSS files I would have to change the palette values, inline CSS and stuff wouldn't work unless I want to basically duplicate each CSS file twice which is obviously not worth while.
  6. Mike Creuzer

    Mike Creuzer Well-Known Member

    So just so I can put this to rest, this is 100% not possible?
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Correct. Inline styling with template conditionals is the best solution I can think of.
    Mike Creuzer likes this.
  8. Fuhrmann

    Fuhrmann Well-Known Member

    Could you create a CSS file with all black and other all white and then do a conditional inside the template, if is something, require the css black, if is not require the white.

    Will this work for you?
  9. Mike Creuzer

    Mike Creuzer Well-Known Member

    Fuhrmann, I was planning on doing that anyways but I could not customize it fully without editing the color palette itself. The color palette properties are used in almost every instance of a hex or rgb value, so I would need to literally edit those (twice; once for dark and once for light). All this said, it is now clear that I must do a light and dark style separately as opposed to all-in-one.

    Thanks for your comments and advice!
  10. Fuhrmann

    Fuhrmann Well-Known Member

    I created a helper to do this. This is how I use:

    {xen:helper background, 'pageBackground', 'black', 0}

    background - The name of the helper.
    pageBackground - The property
    black - The color to set
    0 - The id of the style.

    If you want, send me a PC and I can send it to you.

Share This Page