I am looking for a way to make image menus with captions in an attractive way.

This forum is for general questions about extensions for Joomla! 3.x.

Moderators: pe7er, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Locked
gabrielnb
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Mon Jul 12, 2021 10:19 am

I am looking for a way to make image menus with captions in an attractive way.

Post by gabrielnb » Mon Jul 12, 2021 10:40 am

Hi, I'm studying first year programming. I am doing an external internship for a company. They want me to make a client's website a bit more attractive (it's very old).

Currently the page looks like this:
Image

And they are looking for something more like that:

Image

The site is in Joomla, so I'm still learning. Do you recommend any module or component to help me with this? thanks and best regards.


Image

I'd also like some suggestions on how to put that slide across the whole width of the page, to give it a more modern look.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by Pavel-ww » Mon Jul 12, 2021 10:52 am

gabrielnb wrote:
Mon Jul 12, 2021 10:40 am
And they are looking for something more like that:
The site is in Joomla, so I'm still learning. Do you recommend any module or component to help me with this? thanks and best regards.
Hi. You do not need a module or component, but a template with flexible settings and CSS coding.
Take a look at it

Code: Select all

https://www.joomshaper.com/joomla-templates
gabrielnb wrote:
Mon Jul 12, 2021 10:40 am
I'd also like some suggestions on how to put that slide across the whole width of the page, to give it a more modern look.
It requires CSS coding. Requires a public link to the site that it would be possible to give some advice.

gabrielnb
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Mon Jul 12, 2021 10:19 am

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by gabrielnb » Mon Jul 12, 2021 11:02 am

Pavel-ww wrote:
Mon Jul 12, 2021 10:52 am
gabrielnb wrote:
Mon Jul 12, 2021 10:40 am
And they are looking for something more like that:
The site is in Joomla, so I'm still learning. Do you recommend any module or component to help me with this? thanks and best regards.
Hi. You do not need a module or component, but a template with flexible settings and CSS coding.
Take a look at it

Code: Select all

https://www.joomshaper.com/joomla-templates
gabrielnb wrote:
Mon Jul 12, 2021 10:40 am
I'd also like some suggestions on how to put that slide across the whole width of the page, to give it a more modern look.
It requires CSS coding. Requires a public link to the site that it would be possible to give some advice.

Hello, thank you for your reply.

I know HTML and CSS from doing something in class. But how can I insert HTML or CSS in Jooomla? I'm not sure if they will let me install a new template, but I could ask, maybe yes.

http://new2.regaldekor.com/index.php


This is the website

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by Pavel-ww » Mon Jul 12, 2021 12:01 pm

gabrielnb wrote:
Mon Jul 12, 2021 11:02 am
Hello, thank you for your reply.

I know HTML and CSS from doing something in class. But how can I insert HTML or CSS in Jooomla? I'm not sure if they will let me install a new template, but I could ask, maybe yes.

http://new2.regaldekor.com/index.php


This is the website
The CSS code insert depends on the template and may differ in different templates. Your template is Gantry 5. You should learn the Gantry 5 documentation to find out how to use your Custom CSS code.

Inserting the HTML code is carried out using an article or module editor. In SP Page Builder is the RAW HTML addon.

In order to use SP Page Builder on a full width, you should study the features of the layout of your template and override them using your Custom CSS Code. The basic principle is that you must remove all the limitations of the width of the page that depend on the template.
For example:

Code: Select all

.com_sppagebuilder main .g-container {
	width: 100%;
}
.com_sppagebuilder main .g-content {
	margin: 0;
	padding: 0.938rem 0;
}
This code will have an effect only on the Sp Page Builder pages. Since it has a parent .com_sppagebuilder class, which is transmitted to body.

And then operate the SP Page Builder - to switch the slider to the full width, turn on the Fluid Row option in the section settings containing the slider.

gabrielnb
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Mon Jul 12, 2021 10:19 am

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by gabrielnb » Tue Jul 13, 2021 8:28 am

Hi, thanks for replying.

I have found this. I think it also works with. Isn't it?

http://docs.gantry.org/gantry5/tutorial ... tyle-sheet
http://docs.gantry.org/gantry5/configure/styles

I understand that in the link you left, the themes are compatible with HTML CSS in Joomla, right? They look very nice, but they are paid... Some free option?

From honesty do you think that for a student who has finished the first year, and has made web pages with html and css can handle this? or will it be easier to install a slide? I listen carefully to your valuation.

UPDATE: By the way, I just discovered in the admin panel that the website uses SP Builder. I think this would make everything easier, don't you?
Could I put a module in the SP Builder?


However, the RAW HTML plug-in you mention is a paid PRO component. And I was looking for a free solution.
Best regards

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by Pavel-ww » Wed Jul 14, 2021 7:33 am

gabrielnb wrote:
Tue Jul 13, 2021 8:28 am
I have found this. I think it also works with. Isn't it?

http://docs.gantry.org/gantry5/tutorial ... tyle-sheet
http://docs.gantry.org/gantry5/configure/styles
Hi. Gantry 5 is quite a modern template and not so bad, although in my opinion is excessively complex. Each template-framework is a whole ecosystem and requires some time to explore. A simple way does not exist.
gabrielnb wrote:
Tue Jul 13, 2021 8:28 am
I understand that in the link you left, the themes are compatible with HTML CSS in Joomla, right? They look very nice, but they are paid... Some free option?
All these templates are built on Helix Ultimate Free. You can recreate any "beauty" which you have seen using this template, with HTML / CSS skills. Switch the directory filter on Free Tamplates and you will find it.
gabrielnb wrote:
Tue Jul 13, 2021 8:28 am
From honesty do you think that for a student who has finished the first year, and has made web pages with html and css can handle this?
I think you will quite handle it. But as I have already written above, it takes some time to explore the interface and capabilities. There is excellent documentation.
gabrielnb wrote:
Tue Jul 13, 2021 8:28 am
Could I put a module in the SP Builder?
However, the RAW HTML plug-in you mention is a paid PRO component. And I was looking for a free solution.
Best regards
I have not used the SP Page Builder FREE. Previously, RAW HTML Addon entered the free version. Perhaps something has changed with it. Nevertheless, you still have Text Block Addon and you can use it with a disabled editor to insert the HTML code.
And yes, you can insert any module using Joomla Module Addon.
There is extensive documentation for SP Page Builder. Check out this.

gabrielnb
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Mon Jul 12, 2021 10:19 am

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by gabrielnb » Wed Jul 14, 2021 3:56 pm

Pavel-ww wrote:
Wed Jul 14, 2021 7:33 am
gabrielnb wrote:
Tue Jul 13, 2021 8:28 am
I have found this. I think it also works with. Isn't it?

http://docs.gantry.org/gantry5/tutorial ... tyle-sheet
http://docs.gantry.org/gantry5/configure/styles
Hi. Gantry 5 is quite a modern template and not so bad, although in my opinion is excessively complex. Each template-framework is a whole ecosystem and requires some time to explore. A simple way does not exist.
gabrielnb wrote:
Tue Jul 13, 2021 8:28 am
I understand that in the link you left, the themes are compatible with HTML CSS in Joomla, right? They look very nice, but they are paid... Some free option?



All these templates are built on Helix Ultimate Free. You can recreate any "beauty" which you have seen using this template, with HTML / CSS skills. Switch the directory filter on Free Tamplates and you will find it.
gabrielnb wrote:
Tue Jul 13, 2021 8:28 am
From honesty do you think that for a student who has finished the first year, and has made web pages with html and css can handle this?
I think you will quite handle it. But as I have already written above, it takes some time to explore the interface and capabilities. There is excellent documentation.
gabrielnb wrote:
Tue Jul 13, 2021 8:28 am
Could I put a module in the SP Builder?
However, the RAW HTML plug-in you mention is a paid PRO component. And I was looking for a free solution.
Best regards
I have not used the SP Page Builder FREE. Previously, RAW HTML Addon entered the free version. Perhaps something has changed with it. Nevertheless, you still have Text Block Addon and you can use it with a disabled editor to insert the HTML code.
And yes, you can insert any module using Joomla Module Addon.
There is extensive documentation for SP Page Builder. Check out this.
again, thank you for the information.

I am reading the Gantry 5 documentation, it takes a while. Then I will start SP Builder.

Regarding the addon you mention (Text Block Addon), I do not find it in the manager, maybe because it is translated into my language, there are two called: Fields - and Text and Fields - Text Area. Are both plugins.

From a personal point of view, what do you think I could add to the website?


http://new2.regaldekor.com/

The most advisable way to introduce HTML-CSS is from SP Builder or from Gantry? the truth is that this binomial sometimes confuses me.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by Pavel-ww » Wed Jul 14, 2021 5:47 pm

gabrielnb wrote:
Wed Jul 14, 2021 3:56 pm

From a personal point of view, what do you think I could add to the website?


http://new2.regaldekor.com/

The most advisable way to introduce HTML-CSS is from SP Builder or from Gantry? the truth is that this binomial sometimes confuses me.
Landmark icon
1.jpg
Template (Granty) for CSS (global). An editor for HTML. SP Page Builder is one of the editors.

Start with this https://www.ostraining.com/joomla-classes/
You do not have the required permissions to view the files attached to this post.

gabrielnb
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Mon Jul 12, 2021 10:19 am

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by gabrielnb » Thu Jul 15, 2021 10:54 am

Pavel-ww wrote:
Wed Jul 14, 2021 5:47 pm
gabrielnb wrote:
Wed Jul 14, 2021 3:56 pm

From a personal point of view, what do you think I could add to the website?


http://new2.regaldekor.com/

The most advisable way to introduce HTML-CSS is from SP Builder or from Gantry? the truth is that this binomial sometimes confuses me.
Landmark icon

1.jpg

Template (Granty) for CSS (global). An editor for HTML. SP Page Builder is one of the editors.

Start with this https://www.ostraining.com/joomla-classes/

Hello, thank you again. I am reading the Gantry documentation and little by little I am understanding the logic behind the structure.

I wanted to ask you for a recommendation, regarding the SP Builder, item carrousel. If not, it is a breach of trust.


Image



I have made some progress with my slider. However, when placing the text, the view is not quite right. Do you know any kind of common solution to this? I've thought of surrounding it with a box or block with transparencies or some blurring to help the reading, while the image is also somewhat visible, so that the visual break is not so abrupt.

What do you think? the carrousel item has somewhat limited options, I wonder if the "source code" option could be fixed from there? I wonder, what is this source code? HTML, CSS, JS?

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by Pavel-ww » Thu Jul 15, 2021 1:12 pm

gabrielnb wrote:
Thu Jul 15, 2021 10:54 am
What do you think? the carrousel item has somewhat limited options, I wonder if the "source code" option could be fixed from there? I wonder, what is this source code? HTML, CSS, JS?
Hi. You can add your class in the Carousel addon and use CSS to get the look you want.
4.jpg
Something like this

Code: Select all

.your-custom-class .sppb-carousel-inner .sppb-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}
5.jpg
You do not have the required permissions to view the files attached to this post.

gabrielnb
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Mon Jul 12, 2021 10:19 am

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by gabrielnb » Thu Jul 15, 2021 10:20 pm

Pavel-ww wrote:
Thu Jul 15, 2021 1:12 pm
gabrielnb wrote:
Thu Jul 15, 2021 10:54 am
What do you think? the carrousel item has somewhat limited options, I wonder if the "source code" option could be fixed from there? I wonder, what is this source code? HTML, CSS, JS?
Hi. You can add your class in the Carousel addon and use CSS to get the look you want.

4.jpg

Something like this

Code: Select all

.your-custom-class .sppb-carousel-inner .sppb-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
}
5.jpg
I see that there are many ways to use CSS, especially considering Gantry and SP Builder.
I have gone from the admin panel to templates and uploaded a file called your-custom-css.css from my computer, with your configuration.

Then from SP Builder as shown in your screenshot, I put: your-custom-css and I also tried your-custom.css.

But somehow I don't notice any change.

Do you think I've done something wrong? I'm going to keep investigating

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by Pavel-ww » Fri Jul 16, 2021 6:59 am

gabrielnb wrote:
Thu Jul 15, 2021 10:20 pm
I have gone from the admin panel to templates and uploaded a file called your-custom-css.css from my computer, with your configuration.
Hi. From the Granty documentation, you had to learn that locations (file) where you can put your CSS code.
All you have to do, add your own class to the SP PB addon, write code for this and place it in the place you learned from the Granty documentation. No files from your computer should be uploaded to the server.

gabrielnb wrote:
Thu Jul 15, 2021 10:20 pm
I also tried your-custom.css.
The name of the class cannot have such a syntax. This is the name of the file, but not a class.
And "your-custom-class" it was just an example. Come up with your own class name.

gabrielnb
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Mon Jul 12, 2021 10:19 am

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by gabrielnb » Sat Jul 17, 2021 10:10 am

[quote=Pavel-ww post_id=3634451 time=1626418767 user_id=865133]

[...]

[/quote]



Hi, I have been reading the Gantry documentation.


http://docs.gantry.org/gantry5/tutorial ... tyle-sheet


[quote]Adding a custom style sheet is a fairly straightforward process. The first thing you should do is create the custom SCSS/CSS file. You can do so in just about any [b]text editor[/b].[/quote]



[quote]To do this, navigate in the directory structure to THEME_DIR/custom/scss and create a file called custom.scss if one doesn't already exist. If the /scss/ directory doesn't exist within your custom folder, you will need to create that, too. If it already does, just open it and make your additions/changes directly to the file.[/quote]


[img]http://docs.gantry.org/user/pages/01.ga ... custom.png[/img]


I'm a bit confused, should I access that scss file and add a "your-custom-class" (not necessarily this name) inside this file? or maybe this documentation refers to something different?

Regards

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by Pavel-ww » Sat Jul 17, 2021 10:27 am

gabrielnb wrote:
Sat Jul 17, 2021 10:10 am

I'm a bit confused, should I access that scss file and add a "your-custom-class" (not necessarily this name) inside this file? or maybe this documentation refers to something different?

Regards
Hi. Apparently, this is how you need to do. I don't have so good Granty's knowledge to give specific advice. In any case, no one forbids to do it and check if it works.

gabrielnb
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Mon Jul 12, 2021 10:19 am

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by gabrielnb » Sat Jul 17, 2021 9:15 pm

Pavel-ww wrote:
Sat Jul 17, 2021 10:27 am
gabrielnb wrote:
Sat Jul 17, 2021 10:10 am

I'm a bit confused, should I access that scss file and add a "your-custom-class" (not necessarily this name) inside this file? or maybe this documentation refers to something different?

Regards
Hi. Apparently, this is how you need to do. I don't have so good Granty's knowledge to give specific advice. In any case, no one forbids to do it and check if it works.

Hi Pavel, sorry, I know you are not an expert on Gantry 5, and it is a somewhat complex subject.

I have done the test, apparently I can't find any changes on the web page.

I find it strange that custom.css is empty... is it normal? I have entered another css file, as hydrogen.css and that instead if it has a lot of content...

I attach also the configuration of the item carousel

Something wrong? greetings
Image
Image
Image

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by Pavel-ww » Sun Jul 18, 2021 7:59 am

gabrielnb wrote:
Sat Jul 17, 2021 9:15 pm
I attach also the configuration of the item carousel
Something wrong? greetings
Hi. In the carousel everything is ok. You can check it out in the browser code inspector. Your-Custom-Сlass has been added successfully.
6.jpg
Thus, the problem remains on the side of Granty. Something you do wrong there.

I can suggest a temporary solution until you understand Granty.
You can add your CSS code in the SP Page Builder page settings (this adds code to HEAD)
7.jpg
or in the settings of the carousel addon (Style Tab) (this adds code to Body).
8.jpg
Do not abuse these ways.
You do not have the required permissions to view the files attached to this post.

gabrielnb
Joomla! Apprentice
Joomla! Apprentice
Posts: 20
Joined: Mon Jul 12, 2021 10:19 am

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by gabrielnb » Sun Jul 18, 2021 10:07 pm

Pavel-ww wrote:
Sun Jul 18, 2021 7:59 am
gabrielnb wrote:
Sat Jul 17, 2021 9:15 pm
I attach also the configuration of the item carousel
Something wrong? greetings
Hi. In the carousel everything is ok. You can check it out in the browser code inspector. Your-Custom-Сlass has been added successfully.
6.jpg
Thus, the problem remains on the side of Granty. Something you do wrong there.

I can suggest a temporary solution until you understand Granty.
You can add your CSS code in the SP Page Builder page settings (this adds code to HEAD)
7.jpg

or in the settings of the carousel addon (Style Tab) (this adds code to Body).
8.jpg

Do not abuse these ways.


Image

Image

Thank you, I have used the head option. Because neither from backend nor from frontend editor I don't see the CUSTOM CSS option in the carousel. It worked very well, and your code to make the letters display better, too.

Using your "technique" of using the element inspector, I was trying to find where the page takes the main .css from. Indeed there is no .custom.css which is supposed to be the default of Gantry 5. But if there are other .css with a lot of content, I suspect that it could be one of these two...

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1586
Joined: Tue Jun 30, 2020 12:17 pm

Re: I am looking for a way to make image menus with captions in an attractive way.

Post by Pavel-ww » Mon Jul 19, 2021 7:14 am

gabrielnb wrote:
Sun Jul 18, 2021 10:07 pm
I suspect that it could be one of these two...
Hi. These files cannot be changed. 1) It is the framework on which the template is built. 2) It is a template design file. You need to deal with custom.css in GRAnty. There must be its own community or support service.

Also, a good starting point for understanding Granty, may be learning how SaaS / SCSS works in general.


Locked

Return to “Extensions for Joomla! 3.x”