I am looking for a way to make image menus with captions in an attractive way.
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.
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.
-
- 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.
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:
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.
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.
Currently the page looks like this:
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.
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.
- Pavel-ww
- 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.
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
It requires CSS coding. Requires a public link to the site that it would be possible to give some advice.
-
- 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.
Pavel-ww wrote: ↑Mon Jul 12, 2021 10:52 amHi. You do not need a module or component, but a template with flexible settings and CSS coding.
Take a look at itCode: Select all
https://www.joomshaper.com/joomla-templates
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
- Pavel-ww
- 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.
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.gabrielnb wrote: ↑Mon Jul 12, 2021 11:02 amHello, 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
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;
}
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.
-
- 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.
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
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
- Pavel-ww
- 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.
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 amI 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
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.
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.
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.
-
- 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.
again, thank you for the information.Pavel-ww wrote: ↑Wed Jul 14, 2021 7:33 amHi. 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 amI 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
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.
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.
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.
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.
- Pavel-ww
- 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.
Landmark icongabrielnb 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.
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.
-
- 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.
Pavel-ww wrote: ↑Wed Jul 14, 2021 5:47 pmLandmark icongabrielnb 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.
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.
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?
- Pavel-ww
- 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.
Hi. You can add your class in the Carousel addon and use CSS to get the look you want.
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);
}
You do not have the required permissions to view the files attached to this post.
-
- 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.
I see that there are many ways to use CSS, especially considering Gantry and SP Builder.Pavel-ww wrote: ↑Thu Jul 15, 2021 1:12 pmHi. You can add your class in the Carousel addon and use CSS to get the look you want.
4.jpg
Something like this5.jpgCode: 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); }
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
- Pavel-ww
- 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.
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.
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.
-
- 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.
[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
[...]
[/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
- Pavel-ww
- 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.
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.
-
- 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.
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
- Pavel-ww
- 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.
Hi. In the carousel everything is ok. You can check it out in the browser code inspector. Your-Custom-Сlass has been added successfully. 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) or in the settings of the carousel addon (Style Tab) (this adds code to Body). Do not abuse these ways.
You do not have the required permissions to view the files attached to this post.
-
- 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.
Pavel-ww wrote: ↑Sun Jul 18, 2021 7:59 amHi. 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.
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...
- Pavel-ww
- 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.
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.