[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?

[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

[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.

[Ken]

Works perfectly, thanks. I can’t mark as resolved since I’m not the OP

[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.

[Ken]

Hi Kyle,

I’ve opened a new ticket for the accordion centering 🙂

http://support.swiftideas.net/forums/topic/centre-accordion-within-boxed-content/

[Ken]

Hi Rui,

That doesn’t affect the resizing of either the desktop or mobile header.

Bear in mind that I have now removed all custom css including the following script from Kyle to fix the desktop header resizing …

#header-sticky-wrapper.is-sticky, header.sticky-header.sticky-header-resized {
  height: 80px !important;
}

Because of playing around with responsive visibility I know to what point I must resize my destop (firefox) browser for the site to display the mobile version of the site. Interestingly Kyle’s script does correct the “mobile” header when viewed on a resized desktop, but I’ve tried in both chrome and the default samsung browser on my galaxy note 3 and it doesn’t work in either.

(and there is still that 115px in the div which you pointed out earlier to contend with)

Also assuming that in general it resizes correctly accross the platforms without any custom css or I wouldn’t be the only one reporting this problem, so why it doesn’t work here without custom css is as interesting as finding the custom css to fix it.

Let me know if you want to log in – maybe I’ve just done something really stupid 😀

[Ken]

@kylecraven94
Thanks for that bootstrap link.
Does that mean I can use the other bootstrap classes as extra / override classes in Dante eg
hidden-print
clearfix
center-block

or can I only use those classes by adding custom css. By way of example I was about to open a support ticket for the following question (and can still do so because I know you guys like to deal with one thing per thread .. but for example)
On this page http://samurdermysteries.co.za/wordpress/dark-grey/ I want to centre the accordion within the boxed content. Could I do that by adding the bootstrap class “center-block” to the extraclass or would I have to do something like this as custom css?

.spb_accordion {
  .center-block();
}

@guerrero-rui
Thanks. I was reading Kyles link above and I see some responsive utilities have been added and some depreciated, so just take that into account.

Thanks guys 🙂
Always a pleasure dealing with you

Ps – how do i add a profile photo to my account here 😀

[Ken]

Sure,

http://samurdermysteries.co.za/wordpress/text-block-arrow-top/

Possibly mention to Ed that it’s something which should go on top by default – I can’t conceive of an application where someone would want it to display they way it does in the link.

Thanks Kyle

[Ken]

Hi @intothewoodx

I believe what you are trying to do may be accomplished with revolution slider.

In slider settings, set your slider to full screen, in general settings set shuffle to on.
In slides you can add an number of slides each with a different image (effictively your repository)
In timing, set the transition time to something ridiculously long like 1200000 (20 minutes)

In effect, the layer slider will serve a random image that will be on screen longer than your user.

You can add clickable buttons like “enter” to slides as well.

I’ve never actually tried this so I don’t know if it will always start on slide 1 and shuffle from there, in which case set slide 1 to plain black with shortest possible duration (a few milliseconds) and fade of your choice into new random image slide.

Hope it works, no guarantees 😀

[Ken]

Hi guys,

I’m also interested in this answer?

[Ken]

Swift pagebuilder – the ability to “tag” elements with colours. Think in terms of calanders or to-do lists where one can assign a category colour to a certain event, task etc making it easy to see what’s what in a long list.

So with the pagebuilder I have just started getting really into the responsive visablility and that means that the number of elements in a page can get really long as one starts adding different things for mobile and desktop. Essentially one is tracking multiple versions of a page at the same time with the different elements for the different screen sizes all over the show.

If there was a way to “tag” elements then I could tag all the elements that I’ve set to show up on desktop in blue, while orange is the tablets page and tag my cell phone elements in green.

Then scrolling down a page it would be much easier to see what’s what at a glance. I’m sure people would find other ways in which a visual grouping would make things easier for them.

Thanks for the opportunity to be heard 🙂

[Ken]

Hi Ed,

This is a fantastic feature, been trying to work out how to do it.

Perhaps you could mention it in your documentation under over ride classes here http://dante.swiftideas.net/documentation/#swift-page-builder or under responsive visability here http://dante.swiftideas.net/documentation/#responsive-visibility.

I’m sure others would find it useful 🙂

A note will have to made that the padding and margin of the row element need to be set to 0 for it to work with that element

Regards,
Ken

[Ken]

Nope, I didn’t add that 115px in. And in all honesty, I wouldn’t know where to either – I’m not a coder. The customisations I’ve made have been limited to the css from support tickets which was posted on page 1 of this thread if you want to take a look at it, however all of it has now been removed to aid in tracking this issue.

In fact, if you take a look at point 5 of this post http://support.swiftideas.net/forums/topic/various-teething-problems/#post-73565 you’ll see that this same problem has been present since I loaded the theme.

[Ken]

Thanks, will do.
Appreciate all the help you guys give. Your service is phenominal.