Sorry for the newbie question.
I am tiring to change the color and possible the image size on the accordion component
many thanks
Stuart
Modifying the attributes of the Bootstrap 5 accordion is not really a “newbie” project because the accordion is styled with Bootstrap CSS classes. If you don’t know CSS, you’re going to have difficult time changing certain aspects of the accordion (like the arrow color/size.)
Without getting too involved, here’s a simple way to change the arrow color. Add the following class/code to your custom CSS file…
.accordion-button::after {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}
This will make the arrows red. You won’t see the arrow color change in the Bootstrap Studio workspace (in fact, the arrow will vanish) but when you preview your page, you’ll see that the arrow is now red.
The part of the code that achieves this, is… fill='%23ff0000'
In the SVG code, the %23 translates to a # character, and the ff0000 is simply a CSS hexadecimal color. You can make the arrow any color you want by changing the six digit hex code. For example, 0000ff would create a blue arrow.
Changing the size is more complicated, and beyond the scope of what I will get into here.
If you really want to have full control over the icon, it’s easier to just abandon the SVG code altogether, and replace it with a icon from one of the icon libraries, or create your own image using a program like Illustrator or Photoshop. But this is well beyond Bootstrap Studio help, and more of a Webdesign Help topic.
If you want to see an example of such a modified accordion, you can download one that I created and posted in the online component library. Search for “Ultimate Accordion with arrow icon”.
If you study the CSS file that is included with the component, you’ll see that I created a custom SVG image. It’s quite easy to change the size of this arrow by changing the width, height and background size values in the .accordion-button::after class. If you wanted to change the color of the arrow from white to black, you could add something like filter: invert(100%); to that class, or you could open the actual SVG image in a program like Adobe Illustrator, change the color of the image, and resave it.
Walter White says change the width is easy just add the right var. If you remove the !important then you will see the arrow in bss as well
.accordion-button::after {
--bs-accordion-btn-icon-width: 3rem;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}
1 Like
Walter, you make me feel like I have only half a brain, but I greatly appreciate your filling in the gaps in my knowledge. You ARE the one who knocks.
When BSS started including more and more variables in their 5.x updates, I started falling more and more behind in my skills.
If you want the same color on all arrows you can do it like this
with different color for dark and light color mode
.accordion-button::after {
--bs-accordion-btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ff0000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
--bs-accordion-btn-icon-width: 3rem;
background-image: var(--bs-accordion-btn-icon);
background-color: var(--bs-tertiary-bg);
border-radius: 0.8em;
box-shadow: var(--bs-box-shadow);
}
[data-bs-theme=dark] .accordion-button::after {
--bs-accordion-btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e5e5e5'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e5e5e5'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
--bs-accordion-btn-icon-width: 3rem;
background-image: var(--bs-accordion-btn-icon);
background-color: var(--bs-tertiary-bg);
border-radius: 0.8em;
box-shadow: var(--bs-box-shadow);
}
lol I’m not Walter he is a fake profile on a blog I saw somewhere
1 Like
Walter White was also the main protagonist on the hit AMC TV show Breaking Bad. He’s basically a legend. I assumed you were referencing him, which is why I wrote, “You ARE the one who knocks.”
I didn’t think of him, so I guess he would say, if you don’t know who I am — then maybe your best course is to tread lightly.
I can definitely imagine you owning a company called “Gray Matter.”
Many thanks, that’s working for me
With a little javascript you can have more control over the colors.
Here is an example
1 Like