Changign Accordion Colors

Keryth987
Keryth987

OK, so I got a new site I'm working on for my new roll20/Discord/FATE game I announced earlier (If interested see that topic in the correct forum, but anyone is welcome) and I'm using the Accordion function to condense my NPC lists and organize them ebtter than they ar eon shadows.

HOWEVER, the colors are yellow which conflict entirely with ym color scheme for the site. So, anyone know what CSS I need to do to change the colors? For reference, see HERE

Comments

  • thaen
    thaen
    Posts: 324

    @Keryth987,

    My strong suit is not css, but give this a try in your custom css and see if it does what you want.


    .ui-accordion-header.ui-state-hover, .ui-accordion-header.ui-state-active {
    border: 1px solid #cccccc;
    }

    .ui-accordion-header-icon.ui-icon {
    background-image: url("../assets/images/ui-icons_222222_256x240.png");
    }

     

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 875

    Thanks but that didnt seem to work.

  • thaen
    thaen
    Posts: 324

    @Keryth987, that's really odd.  I tested it out on my test campaign and it did what I thought you were wanting...changed the outline and hover coloring of the accordion from "yellow" to "gray/black", including the expand/collapse triangle.

    Did you notice any changes to the coloring at all?  Or was there something specific that wasn't working?

    I don't see the custom css I posted in the css on your campaign.  Can you add that css back and let me know when you have so I can take a look and see what might be affecting it?

    Obsidian Portal Developer

  • Kallak
    Kallak
    Posts: 1,032

    Here's a snippet from the CSS on one of my campaigns to change the border and background color for the accordions. I made a lot of other changes, but this should work for you regardless.


    /* UI ITEMS */
    .ui-accordion h3 {
    background:none;
    border:1px solid #00c2d9;
    }
    .ui-widget-content {
    background-image: none;
    background-color: transparent;
    border-right-color: #00c2d9;
    border-left-color: #00c2d9;
    border-bottom-color: #00c2d9;
    }

    A thing to note is that I did not change the little arrow/icon for that particular campaign, so if you are wanting to change that as well, you'll need to switch the background image that it is being pulled from. There are a few default options you can choose from (as seen in the image files assignments below), or you can make, host and then call your own image file to do something more individiaul/unique.


    .ui-icon,
    .ui-widget-content .ui-icon {
    background-image:url("images/ui-icons_222222_256x240.png")
    }
    .ui-widget-header .ui-icon {
    background-image:url("images/ui-icons_ffffff_256x240.png")
    }
    .ui-state-default .ui-icon {
    background-image:url("images/ui-icons_ef8c08_256x240.png")
    }
    .ui-state-hover .ui-icon,
    .ui-state-focus .ui-icon {
    background-image:url("images/ui-icons_ef8c08_256x240.png")
    }
    .ui-state-active .ui-icon {
    background-image:url("images/ui-icons_ef8c08_256x240.png")
    }
    .ui-state-highlight .ui-icon {
    background-image:url("images/ui-icons_228ef1_256x240.png")
    }
    .ui-state-error .ui-icon,
    .ui-state-error-text .ui-icon {
    background-image:url("images/ui-icons_ffd27a_256x240.png")
    }

     

    All the best,
    - Kallak

    Inner Council Member
    CotM Selection Committee
    Writer/Editor - Words In The Dark
    Obsidian Portal Community and Content Manager
    GameMaster - Crucible of the Blacksoul (CotM for Jan. 2013)

  • Keryth987
    Keryth987
    Posts: 875

    That seemed to work. Thanks

Sign In or Register to comment.

Get your heroism on with Freedomverse! October's Campaign of the Month!

Read the feature post on the blog!
Or return to Obsidian Portal!

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions