search

gantry / gantry5

:rocket: Next Generation Template / Theme Framework
http://gantry.org
1.03k stars 203 forks source link

Full page background separate for every menu item #3171

Open Kordolio opened 1 year ago

Kordolio commented 1 year ago

Hello, what if I wanted to have a separate full background image for every menu item? This solution works for the body of all menus: body { background-image: url('../../../../image/_DSC0002edit1.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; background-attachment: fixed; } and I added it to the /templates/#template/scss/nature/styles/_core.scss but then I have one background image for the entire page. Thanks for help!

N8Solutions commented 1 year ago

@Kordolio I have replied to you in a thread in the chat room for Gantry 5 here: https://matrix.to/#/!DuqVGiFSbDhqvCJkox:gitter.im/$MoRuFUS3L3TWchmE_d5bbd0EeDq3ENNuy_dYmBLuNYw?via=gitter.im&via=matrix.org&via=systemli.org

Kordolio commented 1 year ago

Well this address leads to a strange page where I am asked to install several programs. I chose one and opened it in the browser, see a chat,but no answer to my question...

N8Solutions commented 1 year ago

@Kordolio Try using a Laptop/Desktop, not on a mobile. It will open the thread where I discussed this with someone previously.

Kordolio commented 1 year ago

I am doing it on a laptop. I am choosing "Element", then continue with browser and get a strange error Laden der Verlaufsposition fehlgeschlagen, Das Laden einer bestimmten Stelle im Verlauf des Raumes zu laden ist gescheitert, da sie nicht gefunden wurde. Afterwards I see some conversations and the recent one is from yesterday, does not concern me. Could you please answer here or paste your answer here? Thank you in advance!

N8Solutions commented 1 year ago

@Kordolio This link should work. It is to the original message in the room, not a message contained in a thread. It seems to have an issue with the thread. Apologies, but I'm just a volunteer, and don't have the time right now to go through the thread and copy everything out. Just be sure to read all conversation in the thread.

https://matrix.to/#/!DuqVGiFSbDhqvCJkox:gitter.im/$9wIua_l1eju-CVLrkVV7JW055ZGrSo0JryNUlvaqJFQ?via=gitter.im&via=matrix.org&via=monero.social

Kordolio commented 1 year ago

@N8Solutions thank you, it is working now. However this does not solve my problem. I am no programmer and I am just a beginner to css, but I assume I need to write something in the css file to let the system know, where I would like to have which background. And this is what I do not know. The "body" refers to the body of the whole page. What if I want to have "body" for page (or better said menu) 1, menu 2 and menu 3? How do you call it then? Is it ok to give css class to the joomla menu item, for example "menu1", "menu2" How to call it in the css??? "body.menu1"? "body menu1"? Thank you in advance!

Kordolio commented 1 year ago

Or maybe like that? .menu1 #body { background-image:url("../images/Bottom_texture.jpg"); background-size: cover; background-repeat: no-repeat; }

Kordolio commented 1 year ago

OK, you will not believe this, but I got this. body.menu1 Thank you!

N8Solutions commented 1 year ago

I’m not in front of my computer at the moment, but I can tell you you’re making this more work than it needs to be. Please review what I told you in the thread where you can use the menu item ID as the class and put all your CSS for that menu and for the full body image inside that class. Then repeat for each menu item that you want to have a different background image.

On Fri, Aug 18, 2023 at 11:54 Kordolio @.***> wrote:

OK, you will not believe this, but I got this. body.menu1 Thank you!

— Reply to this email directly, view it on GitHub https://github.com/gantry/gantry5/issues/3171#issuecomment-1683587573, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC6Q2POODXJU2LNU34ILTTLXV4UVZANCNFSM6AAAAAA3SRATIE . You are receiving this because you were mentioned.Message ID: @.***>

Kordolio commented 1 year ago

Thank you, but it is easier for you to say, than for me to do :-) What is the syntax of the menu item ID body, then? body.menuitem.123 ???

N8Solutions commented 1 year ago

OK, you are going to need to learn how to use the "inspection tools" of your browser to be able to "inspect" your website so you can see how things are working and be able to figure out if something is not working as it should.

With that said, with Joomla, you can see the "ID" of the "Menu Item" from the administrative side. It will be the far right column. So if your "Home" menu item has an ID of 121, then the CSS ID to target will be itemid-121. If the Menu Item ID is 221, then the CSS ID to target will be itemid-221, etc...

Besides looking in the admin area, you can "inspect" the website and find it from the front end. I've included pictures so you can understand where to look. I can't tell you what your Menu Item ID's are, you are going to have to figure that out for yourself because they will differ on each website.

kordolio-01

In the above image you can't see the Item ID, but if you double click in that area, you will be able to see it as I've highlighted here. kordolio-02

The ID id="g-page-surround" is what you want to target to place the background image as I've specified in the other thread.

I can provide you with an example styling code for a menu item and you can see if that works for you once you enter your Menu Item ID.

You will need to enter the css in the custom.scss file. You can read the documentation by following the link on how to create a custom style sheet. https://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet

/*  BACKGROUND IMAGE  */
/*  itemid-xxx = menu item id  */
/*  change the xxx to match your menu item id number  */
.itemid-xxx {
    #g-page-surround {
        background-image:
            url(gantry-media://backgrounds/background-image.jpg);
            background-repeat: repeat;
            background-attachment: fixed;
    }
}

FYI, The URL line is for the Joomla images folder. So where I have backgrounds/background-image.jpg the backgrounds folder is a subfolder of the Joomla images folder which you need to create if you plan on using it.

If you don't change the opacity of the sections on the website to transparent, the background image will not show up. So make sure you make those changes. You can do that under the "Styles" tab in the Gantry admin. https://docs.gantry.org/gantry5/configure/styles

Kordolio commented 1 year ago

Thank you very much, it was a great help. However I have a small issue: every menu is a phoca gallery. the page is https://test.aquila-it.pl When I go to Nature menu, the correct background image is displayed. But when I then click on any gallery category, the image changes to the "Landscape Menu" image. Thanks in advance for help on that one.

N8Solutions commented 1 year ago

Thank you very much, it was a great help. However I have a small issue: every menu is a phoca gallery. the page is https://test.aquila-it.pl When I go to Nature menu, the correct background image is displayed. But when I then click on any gallery category, the image changes to the "Landscape Menu" image. Thanks in advance for help on that one.

@Kordolio If you look at the URL after clicking on any of the gallery catalogs listed on the "Nature" menu page, it switches to "Landscape". The Nature URL is this: https://test.aquila-it.pl/index.php/en/nature

But by clicking on "Fungi" for example, it switches to Landscape. https://test.aquila-it.pl/index.php/en/landscape/183-fungi and this is why the "Landscape" menu background image is shown instead of the "Nature" menu background image.

So this has something to do with the way you have setup the Phoca Gallery and is not a Gantry 5 issue.

Hope this helps!