Accordion Customization

Keryth987
Keryth987

So...this is what I've got right now

image

 

Anyone know how I can customize the accordion to make the abckground black, and also change the borders and remove the arrow? I recall there was a topic somewhere that dealt with the arrow, but I can't find it

Comments

  • Abersade
    Abersade
    Posts: 417

    Keryth,

    I don't see a reply here so I thought I'd give it a go. The background color was definitely not intuitive. You'll need to update the border to look the way you want, this is set to be very visible.


    /* Accordion Code */
    /* Hide the Accordion Arrow */
    .ui-accordion .ui-accordion-header .ui-accordion-header-icon {display: none;}
    /* Stop Accordion Text from Shifting Right to Accomodate the Accordion Arrow */
    .ui-accordion .ui-accordion-icons {padding: 0.5em 0.5em 0.5em 0.7em;}
    /* Eliminates the Color of the Gaps Between Accordion Entries */
    .ui-widget {background-color: transparent;}
    /* Eliminates the "glass" image, sets the Background Color to Green, and Adjusts the Border of Accordion entries to THICC */
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {background-image: none; background-color: black; border: 10px solid;}

     

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417

    LOL, I forgot to change the word Green in the comment to Black. You may want to update that as well.

     

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417

    Almost forgot, you'll likely want this too:


    /* Basically the same as above but for the Accordion Entry When Expanded */
    .ui-accordion .ui-accordion-content {background-image: none; background-color: black; border: 10px solid;}

     

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417

    Those bits of code change every accordion, if you want it to just impact a accordion entries on a single page you'll need to add the slug class (usually something like .wiki-page-slug-pagename) for the page, like so:


    /* Accordion Code for only my Accordion Testing page */
    /* Hide the Accordion Arrow */
    .wiki-page-slug-accordion-testing .ui-accordion .ui-accordion-header .ui-accordion-header-icon {display: none;}
    /* Stop Accordion Text from Shifting Right to Accomodate the Accordion Arrow */
    .wiki-page-slug-accordion-testing .ui-accordion .ui-accordion-icons {padding: 0.5em 0.5em 0.5em 0.7em;}
    /* Eliminates the Color of the Gaps Between Accordion Entries */
    .wiki-page-slug-accordion-testing .ui-widget {background-color: transparent;}
    /* Eliminates the "glass" image, sets the Background Color to Green, and Adjusts the Border of Accordion entries to THICC */
    .wiki-page-slug-accordion-testing .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {background-image: none; background-color: green; border: 10px solid;}
    /* Basically the same as above but for the Accordion Entry When Expanded */
    .wiki-page-slug-accordion-testing .ui-accordion .ui-accordion-content {background-image: none; background-color: black; border: 10px solid;}

    Alternatively, you can target specific accordions as well by inspecting the page to find the accordion ID, shown below, then adding that to your selector like the slug class explanation above:

     

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
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