Banner and box like modules missing

xerse

Dear @saguaros, I'm really really sorry for writing this post, but I'm really in trouble.
I understand that Purity IV is new and most of the documentation is still missing, but I'm not able to find how to obtain some modules layout.
The most struggling things is that on Purity IV I have no way to create a body (section 1) layout that show static articles in columns (like the 1st section on Purity III corporate page) - Much more better could be to create something like the image I'm attaching here:

At the same time I need a way to create a banner to promote events, I done some tests, but nothing is helpfull. The fist test is to use the "Our Clients" modules, but it does not allow to set 1 column.

Please help. Thanks

phinb

Hi @xerse

Is it correct that you want to create an ACM module with the layout as shown in the screenshot you captured above? If so we will investigate and assist you.
However, there is currently a high volume of support tickets compared to our available staff. If you want a quicker response, please consider registering for a paid membership and use the premium support ticket system.

Regards,

xerse

Hi, phinb I perfectly understand the amount of works, and I really appreciate your kindly reply.

The main problem is that th documenation lacks in some point and the logic of template and Joomla 4 differs from Purity III and Joomla 3. I'm trying to undertand how this new template works. There are many things that I expect as something obvious (expecially as they exists in Purity III) but that looks possible only forcing and creating custom css.
For example: Logistics homepage starts as dark mode, setting to make it starts as light mode seems not work - Logistics menu backgroud color seems not included into any settings (I used custom css) - Overlay colors on images into the slideshow cannot be removed or modified by any setting, etc.

I don't know if there are some bugs or some details that will be published into future documentation but at the moment I have to use css as a workaound.

Regarding the question of this post, the problem is that it seems that on purity IV template there is no ACM modules or layout position that can be used to create a banner (for example to communicate that we will partecipate to an exibition) or to put in a home page/landing page some static articles or most simply, a graphic box that forward to specific pages (like the screenshot I attached).

I don't know if something exist but is not visible (for example I found some modules in quickstart that are not published).

Thanks again.

saguaros

xerse Hi

Purity III template is built with T3 framework while Purity IV is based on new T4 framework, you can check out this documentation to understand more about T4 framework: https://www.joomlart.com/documentation/t4-framework/layout-builder

In the first section of Purity III - Corporate style, which has 4 columns, template uses spotlight block which load 4 positions there. With Purity IV template, you can go to Layout settings of template >> add a new section and configure the number of columns for that section >> assign the module / module positions as you wish.

Regards

xerse

Dear all,
I try to use purity IV in May 2023, but unfortunately I found too many bugs and lack in documentation at that time. Now I'm trying to start over, but I need to solve some pending issue.

The solution of creating a new section is interesting. It may works and solve the problem, but I'm not able to find a module design that may fit corectly.

In brief my goal is to put on some pages (like home) a row with some Images/modules, tittle and description that links to other menù pages.
I created a new section with 3 columns, and i put inside 3 different modules in style 1 hero. The problem is that i'm not able to find css sections that can let me to modify the text rendering (size, text-shadow etc)

At the same time I tryied to create a custom module, but I've no style control to make text and image effect enough nice.

Could you please give me some tips? Maybe there is a different ACM module that best fit my needs?

Thanks

xerse

I found an interesting behaviour that may help in reach my goal:
I could use tags and items category to show contents and doing one of the following (but I don't know the difference, they looks doing the same)

Into the module for "Articles-Category". If I change the mode from "normal" to "Dynamic" and "show on article page > Yes", this module shows the menù items, exactly what I'm trying to obtain.
The same happens if i set as category "pages"

to have images, Article must have intro images (it is needed if it is an article related to a menù item)

I hope to be able to update this post with further details

saguaros

xerse

Hello,

I am not entirely certain about the layout you are seeking, but you can build your desired layout using the Layout settings in the template.

Regarding module styles, if you wish to replicate the module style used on the demo site of the Purity IV template, you can configure your site accordingly. To assist with this, you can install the Quickstart package of the template into your local environment, which includes sample data for reference.

xerse

Dear Saguaros,
Thanks for your reply. Let me explain a bit better.

What I would like to do is to be able to put images with titles and descriptive text that act as an introduction to other sections or menu items and that have a pleasant and modern appearance.

Gallery styles and in particular the "syle-1" layout might be fine. But unfortunately all the "gallery" modules are grouped together on mobile. That is, I haven't found a way to display the contents one under the other, as happens with the modules that display the introductions to the articles.

Some time ago you suggested me to create a new section in the template style, divided into 3 or 4 columns and insert a module in each column.
The problem is that the modules have settings on font size, text area width and how to crop or resize images, which don't fit the solution you proposed.

If you look at the picture that
I had attached to this post, you can see what I would like to achieve.
The big problem is that I can't find the parameters to apply a custom CSS that would solve the problem.

Thanks
Sergio

saguaros

Hi Sergio,

I got it but it will require customization (module layout + style) to achieve that 🙂

xerse

saguaros
An alternative is to understand how to configure a custom css to correct some display behaviour. :-D

I useed a module with hero in style-1 to achieve what I'm attaching. the module used into a new section created as you suggested have some issues:
1 - As hero style-1 is made for a full wide section, when used into a 3 colum layout, it works as on a mobile, a rectangular section of the whole image, instead to fit the image.

2 - I'm not able to find how to modify custom css to reduce the title size (h1?), make the text portion (title + intro) larger (it should be the class="hero-content d-flex as well class="hero-content-inner" as well <h1 class="hero-title mt-0 mb-3">

3- I don't know why the middle element is not top-alligned with left and right ones

Probably regarding point 1, I will simply solve using smaller image than the test one I used (that is very large), but regardint point 2 and 3 I need your help to understand how to do.

saguaros

xerse Hi

For the style customization like this, you can use Google Chrome or Firefox (or other web browsers) inspect element. What I usually do is hover on any HTML element (i.e. button, tag, text, …) you want and right click on it and then click on inspect element, it will show you which CSSclass it is using and which CSSfile and the path to this element on the right side, then you can go to the file and replace it with new CSS you change.

Then add your custom CSS code into the custom.css file

xerse

saguaros
Dear Saguaros,

Up to now I done the following:
1) I added a row into Layout Settings (3 columns, Fluid, no extra-class)
2) I configure each column content with a module cloned from [Product] CTA (basically is an Hero Style-1). I set a t4-section, to allow a space from the slideshow and I set a custom extra-class
NOTE: I'm using an extra class, because both slideshow and those modules use the same style, than I found here a solution to set different css styles.
3) Using my custom extra-class I was able to change the height of the module without change the height of slideshow in the following way (custom CSS):
.MY-CUSTOM-EXTRA-CLASS .acm-hero.style-1 .has-bg .hero-content { min-height: 25rem; }

4) At the moment I'm in trouble because I'm not able to find how to change the heading font size into those modules. It's an H1 section. But I don't find how to force this size. Here there is a small difference between slideshow and my mdules. I'm able to change font family and font size into the slideshow using .owl-carousel h1 but I still not found what section i can use for my cloned modules.
h1 font size looks something taken from 28.css and not from template.css

Any help is really appreciated.

saguaros

xerse You should put all of your custom css code into the 'custom.css' file as I mentioned above.

Or put your site online so we can help 🙂

xerse

saguaros
Thanks a lot.

I'm finding some setting and I'm making some variants. As soon as I'll be ready I'll update this post and put online the site

saguaros

You're welcome 😉

xerse

Hello guys,
After many nights seems I found a solution and how to change some text details.
My troubles for H1 font size was related to the different way you create the template. When "hero style-1" use one single image or more images, the sections used are completely different.

Anyway I will put in a different message my custom css (it became longer and longer! ) because I'm not sure what I'm doing will be responsive. I'm trying to test, but I've not created this template.

At the moment one point forward is this:
I created the first version adding a Row with 3 column and apply to each column a module.
It works but if I need to use this design on more pages, it makes the layout really bad.

I used the module potition. I created 3 module positions (box1, box2, box3) adding into templateDetails.xml the following:
<position>BOX-1</position>
<position>BOX-2</position>
<position>BOX-3</position>

The point is that I'm afraid that this configuration will be lost as soon as I update the template in the future.
Is there another and more correct way ?

At the moment I created some template duplicates. I'm using it to be free in apply changes for only one page avoiding to corrupt the original template I'll use on different pages.
When I will update the purityIV template what will happen to my copy? Will be updated too or not?

thanks

xerse

OK I found this solution:

1) It is not necessary to modify the file templateDetails.xml. You can create a module and set manually a position name, even if it does not exist into le list. Simply write the position name you like and press enter. It will be taken by joomla.

2) Create tests modules JA JCM - Hero Style 1 with only one image (I doubt slideshow may have sense here and anyway it could create many formatting issues). Set spacing top and spacig bottom as you like (i used small size)

3) into Layout Settings of your template style (in my case both logistics and business for now), create a new ROW (I placed under the slideshow)

2) Into row Options, set it as "Fluid" than add wanted columns (I used 4 columns and I noticed that if a column will no be used, the row will enlarge the used columns - ie it will became 3 columns or less).
** NOTE: here I found a possible bug into the template: It is not possible to set a width for columns, they are auto and it is not possible to change. I hope @saguaros or someone else may clarify.

3) Modify each column setting as: content type="module position" - name of the module position = use the drop down, here you find the fake module position you wrote into your module - style = "t4section" (here you can test, i prefer how it looks in this way) - extra class = VERY IMPORTANT! here you have to write a CUSTOM-CLASS we use later.

4) Now you have to add some things as custom CSS, because Hero style 1 is made for slideshow section and Joomlart does not include some customization field (Please JA team do it!)
`/* #################### - HOME BOX CUSTOMIZATION - #################### */

/* HEIGHT HOME BOX --- /
.CUSTOM-HOMEBOX .acm-hero.style-1 .has-bg .hero-content {
min-height: 20rem;
}
/ ------------------------------------- */

/* WIDTH HOME BOX --- */
@media (min-width: 1400px) {
.CUSTOM-HOMEBOX .col-xxl-5 {
width: 95.00%;
} }

    .CUSTOM-HOMEBOX .col-xxl-5 { 
        width: 100.00%;
    }

/* ------------------------------------- */

.CUSTOM-HOMEBOX .acm-hero.style-1 .has-bg .hero-content h1 {
font-family:"Public Sans";
font-weight: 500;
font-style: normal;
/* font-size: calc(0.5rem + 1.5vw); TEST TO DO */
font-size:xx-large;
color:pink ;
text-shadow: -1px -1px 0 #000,
0px -1px 0 #000,
1px -1px 0 #000,
1px 0px 0 #000,
1px 1px 0 #000,
0px 1px 0 #000,
-1px 1px 0 #000,
-1px 0px 0 #000;
}

/* DESCRIPTIVE TEXT - HOME BOX */
.CUSTOM-HOMEBOX .acm-hero.style-1 .has-bg .hero-content .lead {
color:chartreuse;
text-shadow: -1px -1px 0 #000,
0px -1px 0 #000,
1px -1px 0 #000,
1px 0px 0 #000,
1px 1px 0 #000,
0px 1px 0 #000,
-1px 1px 0 #000,
-1px 0px 0 #000;
}`

It seems to works, but I'm not sure it will be perfectly responsive. I hope someone from the JA team will answer and help