Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › centre accordion within boxed content
New Landing › How can we help? › Themeforest Theme Support › Dante › centre accordion within boxed content
- This topic has 23 replies, 3 voices, and was last updated 10 years by Mohammad – SUPPORT.
-
Posted in: Dante
-
July 21, 2014 at 4:46 pm #93276
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 π
July 21, 2014 at 4:54 pm #93280Hi
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
July 21, 2014 at 5:05 pm #93288I 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.
July 21, 2014 at 5:19 pm #93302Do 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
July 21, 2014 at 5:33 pm #93311I 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.
July 21, 2014 at 5:45 pm #93316This is because accordions are not designed to be supported within boxed content. Try span 11
– Kyle
July 21, 2014 at 5:49 pm #93317We’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
July 21, 2014 at 5:51 pm #93319Ahh 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
July 21, 2014 at 6:02 pm #93325Is 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?
July 21, 2014 at 6:41 pm #93352Please 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
July 21, 2014 at 7:15 pm #93370Epic 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?
July 21, 2014 at 7:24 pm #93378I don’t see the css I gave you above in your custom css?
– Kyle
July 21, 2014 at 7:32 pm #93383I have temporarily removed it as requested while this thread is open ..
http://support.swiftideas.net/forums/topic/header-not-resizing/page/2/#post-92476The 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?July 21, 2014 at 7:34 pm #93386Yes please
– Kyle
July 21, 2014 at 8:16 pm #93407Cool, 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.
-
Posted in: Dante
You must be logged in and have valid license to reply to this topic.