SOLVED What's the best way to apply block variations to modules in default layout?
-
-
- R2ba5Aq4
- Rocketeer
- Posts: 75
- Thanks: 10
SOLVED What's the best way to apply block variations to modules in default layout?
Posted 8 years 8 months ago-
Hello,
What is considered the best approach to applying block-level variations to individual modules in the default layout?
For example, let's say I wanted to apply the block variation, Box 1, to the Contact Details module displayed in the aside position of the aside section of the contact page of the Ambrosia template.
The contact page uses the default layout.
If I apply Box 1 as a block variation to the aside position in the default layout, all modules assigned to that position will be affected.
But I only want to change the stye of the Contact Details module, not all modules across all pages that use the default layout and are assigned to the aside position.
Traditionally, individual modules could be styled using module variations (in contrast to block variations) by adding a class to the "Module Class Suffix" of the module.
I tried adding "box1" to the module class suffix field of the Contact Details module, but this didn't have any effect on its style. I suppose this is due to the way the css class, box1, targets the block instead of the module.
So this brings me back to my original question: Since I can't apply box1 as a module class suffix to the Contact Details module, and assuming that I might want to repeat this process with different block-level classes and modules in the default layout for different pages, which of the following is the best approach:
1. Create a new layout for the Contact page, then add a new position (e.g., "aside-b") in the aside section and assign the Contact Details module to that position,
2. Create a new special purpose position (e.g., "aside-b") in the aside section of the default layout and only use it for the Contact Details module, or
3. Open the corresponding SCSS file, find the "box1" class, copy and paste it into a custom SCSS file, change its name (say to "box1-module"), make any necessary changes to the styles to reconcile block-level and module-level differences (e.g., padding, margins, etc.), and then apply it to the Contact Details module as a module class suffix.
Although it probably doesn't make much of a difference when dealing with a single module, if I want to control the styling of individual modules in the aside position across similar pages of the site does it make sense to create new layouts even though the default layout would otherwise work fine? Or is it better to create different aside positions (e.g., aside-a, aside-b, aside-d, aside-c, and so on) for the sole purpose of applying different block variations (e.g., box1, box2, box3, box4, and so on)? Under this approach, even though these positions would be created in the default layout, they would only be referenced as needed for the purpose of styling individual modules. The downside would be if I wanted to change the ordering of the styles (e.g., box1 above box2 on one page, box2 above box1 on another) I would need to create multiple positions for each variation and reference them accordingly.
Thanks in advance - Last Edit: 8 years 8 months ago by R2ba5Aq4. Reason: Clarity
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21574
- Thanks: 3093
- messin' with stuff
Re: SOLVED What's the best way to apply block variations to modules in default layout?
Posted 8 years 8 months ago-
I'm assuming you mean the Contact Details Particle?
You can just add the Custom Variation to it in the Base Outline Settings and it'll be applied every time you use that Particle - Last Edit: 8 years 8 months ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- R2ba5Aq4
- Rocketeer
- Posts: 75
- Thanks: 10
Re: SOLVED What's the best way to apply block variations to modules in default layout?
Posted 8 years 8 months ago-
Thank you for the reply.
I'm referring to the following: In the Ambrosia template, if you go to Extensions -> Module Manager and search for "contact details" there are two modules that are assigned to the aside position on the contact page --- one is a custom HTML module and the other is a Gantry 5 Particle. Note that the contact page uses the default template.
What is the best way to apply a block variation to only one of these modules?
If you go to Extensions -> Template Manager, select the default template, and go to layouts, you will notice only one position in the Aside section: aside. Both modules are assigned to this position. That means that if you add, say, Box 1 as a block variation to this position the styles associated with this class will be applied to both the custom HTML module and the Gantry 5 Particle, as well as to every other module assigned to this position in the default template.
Let's say, however, that I only want to style the custom HTML module, not the Gantry 5 Particle. The old way of doing this was to add a module class suffix directly to the module via the Module Manager. The new way is to create a special position and apply the block variation to that position.
Gantry 5 templates come with a variety of cool, pre-built classes that can be used to style modules. However, these classes seem to only work at the block level, not the individual module level. For example, if you add box1 as a module class suffix to the custom HTML module described above, nothing happens.
Callisto uses a different template for each page, whereas Ethereal and Ambrosia rely mostly on a default template. The latter approach is more efficient and makes it easier to make global updates. However, it also raises the following question:
What is the best way to style multiple modules individually (i.e., a different style applied to each module) for the default template using the pre-built, block-level variations? For example, since the block-level variations cannot be appied to individual modules as "module class suffixes," would one need to create, say, 10 positions in the Aside section in order to style these modules individually?
If the structure of the layout of the default template is suitable for multiple pages, doesn't it conflate style and structure to add new positions for the sole purpose of styling individual modules?
Thank you
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21574
- Thanks: 3093
- messin' with stuff
Re: SOLVED What's the best way to apply block variations to modules in default layout?
Posted 8 years 8 months ago-
You are correct on all points and your solutions proposed are all viable...
Block Variations do not equal Module Variations in Gantry 4 (which are/were the same as Module Suffixes in Joomla). The are placed a few elements higher in the stack on your Frontend output in order to wrap the new Gantry Block concept as opposed to wrapping the module as a traditional Joomla Module Chrome.
From your first post, all 3 of your options are viable. Personally, I would choose to create a new Layout/Outline for the Contact Page, add a new/custom position, and give it the Block Variation I want.
R2ba5Aq4 wrote:If the structure of the layout of the default template is suitable for multiple pages, doesn't it conflate style and structure to add new positions for the sole purpose of styling individual modules?
I would personally like to see us come out with "traditional" module suffixes for Joomla (or whatever CMS) in compliment with our G5 Block Variations in newer templates. You can still of course create your own Module Suffixes as you suggested in point 3 of your original post. But if you want to use any of our new G5 template block variations, you need a block (ie a Position Block) to use/call it from... and in my opinion, the best place to put a "one-time-use" block is in a new Outline assigned to your specific page. - Last Edit: 8 years 8 months ago by Matt.
-
The following users have thanked you: R2ba5Aq4
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- R2ba5Aq4
- Rocketeer
- Posts: 75
- Thanks: 10
Re: SOLVED What's the best way to apply block variations to modules in default layout?
Posted 8 years 8 months ago- Thank you for answering my question. I think I'll go with your suggestion of adding the one-time-use block to a new outline for the specific page. This seems to be the most straight-forward approach, and is the easiest to understand and implement. Cheers!
-
Time to create page: 0.040 seconds