Foundry Accordion - Adjusting the look / styling

I’m getting to grips with RapidWeaver and so far so good. One thing Freeway Pro used to allow was for tweaking CSS styling.

I plan to use the Accordion Stack in Foundry but want to adjust how it looks - adding a keyline at the bottom of the heading block for instance.

Is that doable?

Many thanks!

RapidWeaver allows tweaking CSS styling too: if you know what you’re doing. However, each individual stack (made by different developers) may allow more or less tweaking. I’d ask @Elixir directly as he is the creator of Foundry.

Hi Mathew - thanks for the speedy response. That sounds promising.

@Elixir, this image shows the kind of thing I’m thinking of.

Thanks!

Hi there @labanbrown

If you’re referring to adding a border at the bottom of each of the Accordion title bars – that isn’t an option of the stack.

All of the stack’s options are detailed here on the documentation page for the Accordion stack: Accordion

As for tweaking elements in RapidWeaver using your own custom CSS – This can be done by writing your own CSS and inserting it into the Custom CSS field found in the Page Inspector here:

Hi @Elixir

Thanks for coming back on that. I was looking to add a line at the bottom of the accordion bar. Is that no achievable by adding CSS?

I’m just trying to get a handle on what I can and can’t achieve in RapidWeaver.

Many thanks

You could add a border to the bottom of the Accordion title bars as you’re wanting to do. You can indeed achieve lots of things, including a border like this, by coding your own CSS and adding it in the custom CSS field that I pointed out above.

Paul,
You can do this with custom CSS. A line at the bottom could be done by adding a bottom boarder.
Adam was saying that it is not a option built in to the stack.
If you can provide a URL (even a test one) people on this form can help you if you need it.

I just tested it to show you that you can add a line (bottom-border) at the bottom of the accordian bar using CSS.

You could also change the background colour and the text colour easily.

I only purchased RapidWeaver, Foundry and Stacks on Friday and I’ve already been amazed by this Forum and people in it!

@NeilUK - that’s just what I’m after. Can you share what CSS you added and where you put it to achieve that?

Thanks, Paul

Hey @labanbrown,

The CSS I used is
.accordion_title > a.accordion_toggle { border-bottom: thick solid #000; }

You’ll be able to adjust the colour, thickness etc. to your tastes.
You can see where to add the CSS below after adding the accordion stack to your page.

Have fun!

BTW, you could also add that CSS to the main “code” page under “settings” if you’re planning to have an accordion on more than one page.

2 Likes

That’s excellent and super easy to apply. It looks like there’s a lot of opportunity to make custom alterations within RapidWeaver.

Thanks for your help on this, much appreciated

1 Like

RapidWeaver is very customizable, for sure. Most plugins, stacks, themes, etc already come with many features baked right in, but you can definitely customize beyond those with your own code.

1 Like