centre accordion within boxed content

[Ken]

Hi Kyle,

I don’t think it’s as simple as adding in the spacer. I have an accordion within a boxed content element. So the boxed content is centered correctly and I need to centre the accordion within the boxed content, but the accordion is added into the boxed content using the visual editor not the pagebuilder. So I can use the pagebuilder to reduce the size of the boxed content and add either a blank spacer or column before the boxed content to move the boxed content over, but that doesn’t affect the accordion. I tried adding a blank spacer into the boxed content using the visual editor the same way as I did the accordion, but it acts as a spacer rather than shifting the grid.

http://samurdermysteries.co.za/wordpress/dark-grey/ and here is my element ..

 [boxed_content type="coloured" custom_bg_colour="#CCCCCC" custom_text_colour="#000000" pb_margin_bottom="no" el_class="hidden-xs" width="1/1" el_position="first last"]

[spb_accordion width="3/4" el_position="first last"] [spb_accordion_tab title="The Hoodlums of Hillbrow"] [spb_text_block pb_margin_bottom="no" pb_border_bottom="no" width="1/1" el_position="first last"] A collection of South Africa’s most hardened and dangerous criminals are all gathered together to find out who killed one of the members Jo'burg's top gang. No strangers to the wrong side of the law these suspects are bad – very bad. A taxi hitman, a gunrunner, a conwoman, a cash heist co-ordinator- to name but a few. A hilarious game for those intrigued by the underworld, complete with all the bling a gangster needs. [/spb_text_block] [/spb_accordion_tab]  [/spb_accordion]

[/boxed_content]

I think it needs something like

.spb_accordion {
  align: center;
}

But I’m just guessing at the actual css 😀

[Kyle – SUPPORT]

Hi

Replied to this on your other thread:

To centre the accordion, add a black spacer to the left of the accordion asset, this will move the accordion over

– Kyle

[Ken]

I tried the blank spacer which is why I opened a new thread.

The accordion is nested inside the boxed content as shown above. Adding a spacer before the boxed content moves the boxed content asset over, but the accordion is still left aligned within the boxed content. Nesting a black spacer into the boxed content before the accordion just acts a blank spacer.

[Kyle – SUPPORT]

Do you need the accordion to be span9? You could just make it span12.

It’s pretty difficult to centre the accordion when using span9

– Kyle

[Ken]

I don’t specifically need it at span9, the only reason I have it at span9 is because this happens at span12 http://samurdermysteries.co.za/wordpress/dark-grey/. This is why I am looking for a centering option for span 9.

For comparison http://samurdermysteries.co.za/wordpress/light-grey/ still has it at span9.

[Kyle – SUPPORT]

This is because accordions are not designed to be supported within boxed content. Try span 11

– Kyle

[Ken]

We’ve reached the limit of my experience 😀

span9 is spb_accordion width=”3/4″
span12 is spb_accordion width=”1/1″
what is span 11?

I tried spb_accordion width=”11/12″ but that didn’t work

[Kyle – SUPPORT]

Ahh sorry, of course. I’m afraid accordions aren’t supported within boxed content, you need to keep them in page builder form. sorry about that

– Kyle

[Ken]

Is there any way, other than within a row element that I could get a background behind an accordion. I like the look of having everthing float over the paralax, but if one just adds the accordion on it’s own then it looks as though each tab is floating rather than as a single element.

In answer to a previous ticket you’ve given me code to change the accordion colour itself so that it shows over the row image

.spb_accordion_section.group {
  background-color: #ffffff;
}

.spb_tabs .nav-tabs li a, .spb_tour .nav-tabs li a, .spb_accordion 

.spb_accordion_section > h3 a {
  background-color: #dd3333;
  text-align: center;
}

.spb_tabs .nav-tabs li.active a, .spb_tour .nav-tabs li.active a, 

.spb_accordion .spb_accordion_section > h3.ui-state-active a {
  background-color: #f7f7f7;
}

But that doesn’t do anything to change the colour in the spacing between the tabs when they are all closed. Looks a bit arbitrary 🙂

For future reference, what is a span11, or 10, or 8? How is it represented (eg width=”11/12″) and where is something like a span11 used or with which elements?

[Kyle – SUPPORT]

Please take the accordion out of the boxed content, put it in the parallax row and I will provide you with some custom css to create the boxed effect

– Kyle

[Ken]

Epic thanks.

I’ve done that.
http://samurdermysteries.co.za/wordpress/dark-grey/

I used two 1/6 width spacer elements to centre the accordion – I initially tried to use two 1/6 width column elements, but I’m guessing that column elements aren’t supported within rows?

[Kyle – SUPPORT]

I don’t see the css I gave you above in your custom css?

– Kyle

[Ken]

I have temporarily removed it as requested while this thread is open ..
http://support.swiftideas.net/forums/topic/header-not-resizing/page/2/#post-92476

The only custom css in there at the moment is some that Rui gave earlier today in response to the thread above.

I have all your custom css safetly saved away in notepad for when the header issue is sorted 😀
Would you like me to add it back in temporarily to help with this thread?

[Kyle – SUPPORT]

Yes please

– Kyle

[Ken]

Cool, I’ve added it all back in. There are some notes above each piece of custom explaining why it’s there, more for me to keep track than anything else.