New Landing How can we help? Themeforest Theme Support Dante centre accordion within boxed content

Viewing 15 posts - 1 through 15 (of 24 total)
  • Posted in: Dante
  • #93276
    Ken
    Member
    Post count: 71

    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 πŸ˜€

    #93280
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    #93288
    Ken
    Member
    Post count: 71

    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.

    #93302
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    #93311
    Ken
    Member
    Post count: 71

    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.

    #93316
    Kyle – SUPPORT
    Moderator
    Post count: 35880

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

    – Kyle

    #93317
    Ken
    Member
    Post count: 71

    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

    #93319
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    #93325
    Ken
    Member
    Post count: 71

    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?

    #93352
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    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

    #93370
    Ken
    Member
    Post count: 71

    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?

    #93378
    Kyle – SUPPORT
    Moderator
    Post count: 35880

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

    – Kyle

    #93383
    Ken
    Member
    Post count: 71

    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?

    #93386
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Yes please

    – Kyle

    #93407
    Ken
    Member
    Post count: 71

    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.

Viewing 15 posts - 1 through 15 (of 24 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register