First the simple problem, your missing asset is theme related. The theme is trying to load a file called:
https://www.bayleaf.org/packages/fundamental/themes/fundamental/css/...

There is a second asset error arising from Google tag manager.

more to follow....

Now onto the more complex part.

Magic tabs works by wrapping blocks within an area. Internally to the c5 core layouts are effectively pseudo-areas, which can argue with the way tabs are built.

Layouts within tabs are not supported by the addon. However, sometimes you can get away with it by creating a layout wholly within a tab.

Sometimes you can get away with layouts, but it is very much theme dependant. In edit mode would check where the tab blocks are. They need to be between each row of the layout.
So you would have
Main Area
- Tab (in Main area, not in a layout)
- Layout row containing columns and blocks
- Tab (in Main area, not in a layout)
- Layout row containing columns and blocks
- Tab (in Main area, not in a layout)
etc..

more to follow....

In practice, layouts are not great because they are not responsive. So the way to achieve similar without using layouts would be to use some of your theme grid classes directly in block design to achieve a similar effect.

I have to finish for now. If you need further help with the above, please send me a login via PM (do not post here), and I may be able to make some more detailed suggestions tomorrow.

Thanks JohntheFish,

This is more than I expected :). I'll read over it and adjust what we are doing in layouts to make these changes and try it. If I need more I'll get back to you.

thanks again,

Copied from PM - to keep everything that doesn't need to be secure in one thread.

>>>>>
I think I may only need to have one or two more questions asked in order to keep on moving. I am still working to grasp how to work with grid classes in the editor in a friendly way for the person who edits our site.

1. Do you suppose that if I apply grid classes on the blocks that are contained within each tab our editor is going to see three columns (like when working with layouts), or are they going to see a single column with the end user seeing the three column layout?

2. I'm reading through the documentation again and trying to find if there is a way to place the side vertical navigation up against the column content on the grid (using layouts as you suggested. Is there a way to do that? I've tried floating the tabs to the right... but, you know, that doesn't do what I'm looking for (as our current page does it: bayleaf.org/staff). Instead, it spreads as I would expect across the screen with the tabs on the far left and out content in the middle (like the page I am testing this on: bayleaf.org/wip/staff2).
2a. If I move to grid classes and avoid the three column layouts, can I place magictabs inside a single column layout to keep that container layout I am currently using and maintain the look I am currently going for (vertical tabs right up against the three column images)?

thanks again for the advice.
Josh

What you need to be careful about with c5 layouts (which I don't recommend using if you can avoid it) is that they wrap blocks in a structure of <div> or other containers.

To create tabs, magic tabs dismantles the tabbed part of a page and wraps those parts into the tab bodies.

So you can end up with two different structures working at cross purposes. The basic rules of the DOM is that elements cant cross. They can only be contained within other elements.

So you cant have:
<div>
<span>
</div>
</span>

But you can have
<div>
<span>
</span>
<div>

That is rather simplified, because we are really talking about <div> content </div>. But the basic principle applies to the way tabs can be used to wrap layouts or grids. The only layout structure that can work is to have a complete layout within a tab. So the tab markers are outside the layout and all at the same level in the containing area. Then in-between a set of tab markers you could have a layout, so the layout is wholly contained within the tab.

Using the css grid classes from your theme and applying that to block styles is essentially doing the same as a c5 layout does, except by hand. So you have more control over how it it all fits together. But you are still subject to the same basic rules of the DOM. Elements cant cross. They can only be contained.

With that in mind, the blocks you want to get into 3 columns all appear to be similar picture/legend. Are they custom blocks?

If this was a bootstrap based theme and I couldn't get the c5 layout to work, I would first try assigning the blocks '.col-sm-4' or 'col-sm-3' (to allow some room for the tabs at the left). You could do that in block design, or in a custom template for the blocks.

That would allow the blocks to re-flow depending on the container (tab body) width.
In edit mode, the c5 core wraps all blocks in an edit wrapper, so when not using a c5 layout they would show sequentially.

Thanks again for the wealth of information.

Regarding my content, these columns are two blocks (Image and Text) with custom CSS classes assigned to them. So nothing more than that. They are all exactly the same (minus the content).

My particular theme is based on Zurb Foundation (Fundamental Theme), so rather than bootstrap classes I will need to apply Foundation classes (large-3 columns [for laptop/desktop columning], OR small-3 columns [for phone and tablet columning]).

One question: Outside of creating custom blocks, are stacks safe to work with inside magictabs?


Thanks again. I will work on this. If I need further help I'll let you know, but I think I'm probably good here now.

I appreciate your time.

Because you are using pairs of image/content blocks, css grid classes won't easily solve the problem. You will end up with content getting detached from images.

So if you can't get it working with layouts inside each tab, you will need to do one of
(a) Use just a content block, with the image pulled into the content
(b) Create a custom block (by hand or using block designer) with image+text.
(c) Create a custom template for an image block, showing the image with text entered as either the image description or another image attribute.
(d) Use a simple gallery block for each group (tab) of images, again using each image with text entered as either the image description or another image attribute.

Personally, I would be looking at using an existing gallery block. The limitation would be that every image+text would be the same format, so you would loose the flexibility of building upward and grouping individual blocks.

Just checking in to see how you are getting on and if you need any further help.

Thanks John

I was pulled into a project. However, I have purchased Block Designer and will give that a shot today.

I appreciate the prompt.

I have taken the opportunity to update the documentation with a new section for Tabs and layouts, providing detail on what you can and can't do and en example that may help you organise your existing content and layouts into tabs.

https://demo.c5magic.co.uk/addons/magic-tabs/tabs-and-layous...

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.