Loading...
 
Features / Usability

Features / Usability

Forum List Topic List

Forums » Features / Usability » Dynamically changing a box bg color
 
Thread actions
PDF Print this page
  • Print all pages

    • Dynamically changing a box bg color

    Posted by sholzy posts: 29


    Hi all,

    Is there a way to change the background color of a box depending on which theme a member chooses?

    I'm using this to display important info from other pages...

    Copy to clipboard
    {BOX(bg="#999999", float="right", title="  __Some Title__ ")}
{include page="Some Included page"}
{BOX}


    A theme's text color for boxes are wreaking havoc on visual usability. I really don't want to edit the CSS for each theme as I would still have an issue with the box's bg color clashing with the themes page color.

    If I could do something like this...

    Copy to clipboard
    {BOX(bg="Some_Variable", float="right", title="  __Some Title__ ")}
{include page="Some Included page"}
{BOX}

    ...and then define a list something like this...
    Theme1
    Some_Variable=#999999
    Theme2
    Some_Variable=#bfc123
    Theme3
    Some_Variable=#abc987

    ...would be ideal.


    Thanks.

    Reads: 2215
    Link
    Posted by Rick Sapir / Tiki for Smarties posts: 3665 United States

    I believe the BOX plugin uses the .cbox style. You could use the $prefs.style variable to check the current theme, then modify the CSS as needed.

    Something like this, added to the Custom content should work:

    Copy to clipboard
    {if $prefs.style="five-alive"}{literal}style type="text/css">.cbox {background:#ccc;color:#000}{/literal}{/if}

     

    Obviously, change the backround and color to suit your needs.

    HTH,

    - Rick  |  My Tiki Blog |  My Tiki UserPage

    Why be a dummy? Get smarty! TikiForSmarties.com
    Tiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.

     

    Link
    Posted by sholzy posts: 29

     

    You code is something like I had in mind, but I'm not sure where it would go. In the CSS of each theme, or in my example Box code? 

    I'm still trying to wrap my head around Tiki and what it's able to do and not do. I keep discovering new things about it each time I try to make it do something thats probably not normal (like this). smile

     

     

    Link
    Posted by sholzy posts: 29

     

    I just discovered the Templates Trick wiki page which I think may answer some of my questions after I have a chance to read through it.....

     

     

    Link
    Posted by Rick Sapir / Tiki for Smarties posts: 3665 United States

    I would add it to the Custom head section on the Admin: Themes pages. Please see the docs for details:  https://doc.tiki.org/Customization?structure=Tiki+Reference+Guide

    Note, however, Gary's answer, especially if you're using bootstrap.

     

    HTH,

    - Rick  |  My Tiki Blog |  My Tiki UserPage

    Why be a dummy? Get smarty! TikiForSmarties.com
    Tiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.
    Link

    Posted by Gary Cunningham-Lee posts: 4656 Japan

    Hi,

    What version of Tiki are you using? Looks like for the box plugin, mostly what changes visually is that in the Bootstrap-using Tiki versions (13 and newer), the box background color parameter just applies to the box content, not to the heading, which uses the default panel heading background color.

    Do  you mean in the case of the person who is editing the page specifying a background color for the box? (So in this case the color could be anything.)

    I don't think there's a way to use "bg='...' " to "dynamically" have a compatible color, but something could be done using the CSS class parameter instead.  Then you could have a set of classes with color values for each theme ( CSS class: color_value), something like:

    .box_bg_1: #999999
    .box_bg_2: #bfc123
    .box_bg_3: #abc987

    This would be done for each theme used at the site, with compatible colors chosen for each, and saved as a custom.css file in each theme's directory - styles/fivealive/custom.css, etc. - for pre-Bootstrap themes).

    Then users would input the background color class as the box plugin's class parameter. It might be good to use meaningful words for the class name rather than numbers, like "box-happy" or "box-dark" or whatever sequence would be appropriate, but I imagine you'd have a plan to document the options for people anyway.

    Could this work?

    -- Gary

     

     

     

    Link
    Posted by sholzy posts: 29

     

    I'm using 14.0.

    I'm the only one who has access to edit the page that has the box plugin. 

    I was trying to avoid editing the CSS files as I might pass the site on to someone else down the road and didn't want to create a lot of changes to keep track of for the next caretaker. But, if modifying CSS files is the way I'll need to do this, then thats what I'll have to do.

     

    I may need to think about this a little more as I might be trying to make this more difficult than need be. ;)

     

     

    Link

    Posted by Gary Cunningham-Lee posts: 4656 Japan

    Each theme's special box background colors would be in a file "custom.css" that's in the particular theme's css directory; for example, "tikiroot/themes/fivealive/css/custom.css. This file is recognized and  used automatically. You don't have to edit the theme style sheet itself.

    By the way, I got a little ahead of myself on the CSS posted earlier; you'd have to put in the custom.css files something like:

      

    .box_bg_1 {background: #999999}.box_bg_2 {background: #bfc123}.box_bg_3 {background: #abc987}

    This will add the new background color to the body of the box, not the header. As this box uses the Bootstrap "panel" class, and "panel-heading" has a color specified already. To affect the heading also, the custom.css file gets a little more complicated, like: 

    .box_bg_1, .box_bg_1.panel-default > .panel-heading {background: #999999}.box_bg_2, .box_bg_2.panel-default > .panel-heading {background: #bfc123}.box_bg_3, .box_bg_3.panel-default > .panel-heading {background: #abc987}

    Still, all the page author/editor has to enter is "box_bg_2" or whatever in the box's "class" input.

    (Sorry, the editor removed the line returns in the CSS; I hope it's clear.)

    -- Gary

    Link

    Posted by sholzy posts: 29

     

    Thanks guys!

    I'll dig into this this coming weekend. It looks like it will be fairly easy to put this in place, with an added benefit of allowing members to create boxes with background colors that will work on all themes.

    Thanks again.

     

    Link

    Posted by sholzy posts: 29

    I finally had a chance to sit down to work on this. Since I needed the same bg color for each box, but a different color for most of the themes I'm using, it was easy enough to add a single

    Copy to clipboard
    .box_bg {background: #XXXXXX}

    in each theme's custom.css.

    Worked perfectly! Now they can change themes and still read the text inside those boxes.

    Thanks again, guys!

    Link