Next Release
Roofco Joomla Template
Template dedicated to Roofing and construction, with 4 prebuilt websites for Joomla 5 and 6. Subscribe or renew now and be the first to get it when we launch it.
Forum
Important - Hands Up!
- Please ask using the account with which you made the purchase or download of our products and in its respective category.
* ADD PRODUCT NAME IN START OF SUBJET
sombra - unable to get header image to display at top
- L
- lesliebuck New Member
- Topic Author 3 weeks 4 days ago #1
I am using the Sombra template, but I have changed a few things using SP Page Builder. I am having some problems with header images. Please help.
Issue 1 - On some pages, I am unable to get the header image to align properly at the top of the screen. Instead of inserting the header imager in the Joomla menu settings, I am inserting the background image in the settings of the top section of SP Page Builder. This method gives me more control since I do not know how to use CSS to format the header image when inserting it through the Joomla menu page title settings
Issue 2 - On other pages, I do not know how to insert a header image. This seems to be with pages that are not in a Joomla menu, but that are generated dynamically from a component.
Issue 1:
Here is an example of how the header image is displaying properly:
Expired page link
The header image is located behind the navigation menu the way I would like it to be.
Here is a page where I am having a problem:
On the Articles page, the header image is aligned the way I like.
Expired page link
However, when I click on an article, the header image is not displaying behind the navigation menu, it is below it.
Will you please help me get the background image to display at the top, behind the menu for all the individual articles?
Issue 2:
I am also having a problem with the events listed on:
Expired page link
When I click an event the information displays, but there is no header image at all:
I assume that I somehow need to create a page in SP Page Builder to control how these pages display, but I do not know how.
Will you please direct me to a solution to display a header on these individual event pages?
Also: I am still working on this page, but I may also have the same problem with the product pages here:
Expired page link
As you can see when you click on a product, there is no header image. I do not know how to put in an image since the page is dynamically generated.
I am not a developer and this is my first time to work with SP Page Builder. Thank you for any help!
Issue 1 - On some pages, I am unable to get the header image to align properly at the top of the screen. Instead of inserting the header imager in the Joomla menu settings, I am inserting the background image in the settings of the top section of SP Page Builder. This method gives me more control since I do not know how to use CSS to format the header image when inserting it through the Joomla menu page title settings
Issue 2 - On other pages, I do not know how to insert a header image. This seems to be with pages that are not in a Joomla menu, but that are generated dynamically from a component.
Issue 1:
Here is an example of how the header image is displaying properly:
Expired page link
The header image is located behind the navigation menu the way I would like it to be.
Here is a page where I am having a problem:
On the Articles page, the header image is aligned the way I like.
Expired page link
However, when I click on an article, the header image is not displaying behind the navigation menu, it is below it.
Will you please help me get the background image to display at the top, behind the menu for all the individual articles?
Issue 2:
I am also having a problem with the events listed on:
Expired page link
When I click an event the information displays, but there is no header image at all:
I assume that I somehow need to create a page in SP Page Builder to control how these pages display, but I do not know how.
Will you please direct me to a solution to display a header on these individual event pages?
Also: I am still working on this page, but I may also have the same problem with the product pages here:
Expired page link
As you can see when you click on a product, there is no header image. I do not know how to put in an image since the page is dynamically generated.
I am not a developer and this is my first time to work with SP Page Builder. Thank you for any help!
Please Log in or Create an account to join the conversation.
- L
- leoalv Moderator
- 3 weeks 3 days ago #2
Hello.
Our recommendation is to use the background image of each menu item. Here's a CSS customization that you should paste into templates/ut_sombra/css/custom.css. If you don't have it, you'll need to create it. This way, you won't have any problems on any type of page.
With this, the page titles will be centered, the background image will have the same position, height, and overlay, because we copied the CSS from your section to the one you're using as a background. Now you just need to activate titles in your menu items and select the image you have as your title background.
If you don't see the changes after implementing this customization, clear your browser cache.
After this, deactivate the sections in SP Page Builder that you've set as backgrounds.
Regards
Our recommendation is to use the background image of each menu item. Here's a CSS customization that you should paste into templates/ut_sombra/css/custom.css. If you don't have it, you'll need to create it. This way, you won't have any problems on any type of page.
Code:
body:not(.modal-menu-active) .header-overlap+#sp-main .sp-page-title{padding-top:calc(45px + var(--header_height)) !important;}
.sp-page-title{padding-bottom:35px !important;background-size: inherit !important;background-attachment: fixed !important;background-position: 50% 0 !important;}
.sp-page-title .container{align-items: center !important;}
.sp-page-title .sp-page-title-heading, .sp-page-title .sp-page-title-sub-heading{font-family:'Helvetica', sans-serif !important;}
.sp-page-title.title-image-bg:after{background:rgba(0, 0, 0, 0.2) !important;}
If you don't see the changes after implementing this customization, clear your browser cache.
After this, deactivate the sections in SP Page Builder that you've set as backgrounds.
Regards
Please Log in or Create an account to join the conversation.
- L
- lesliebuck New Member
- Topic Author 3 weeks 3 days ago #3
Thank you so much! That is a much better solution than using SP pagebuilder for all the header images.
I was able to get almost all the pages working with the custom CSS addition, except for the product and category pages associated with my store
Expired page link
These pages do not have menu items so I do not know how to modify them.
I reached out to the developer of the store (EShop by Joomdonation) to see if they can help with that. Unless you have any suggestions, I will just wait to hear from them about that.
Thanks again for the help!
I was able to get almost all the pages working with the custom CSS addition, except for the product and category pages associated with my store
Expired page link
These pages do not have menu items so I do not know how to modify them.
I reached out to the developer of the store (EShop by Joomdonation) to see if they can help with that. Unless you have any suggestions, I will just wait to hear from them about that.
Thanks again for the help!
Please Log in or Create an account to join the conversation.
- L
- leoalv Moderator
- 3 weeks 2 days ago #4
Hello.
Yes, it's working. The problem is that you have two menu items for the store: "Store" and "Store Old." You've added the title to "Store," but when you're at future.tacticalarts.com/store/ and visit a product category, it takes you to future.tacticalarts.com/store-old/clothing/ instead of future.tacticalarts.com/store/clothing. You see, one has "/store-old/" and the other "/store/"
What you need to do is remove or disable the "Store Old" menu item.
Regards
Yes, it's working. The problem is that you have two menu items for the store: "Store" and "Store Old." You've added the title to "Store," but when you're at future.tacticalarts.com/store/ and visit a product category, it takes you to future.tacticalarts.com/store-old/clothing/ instead of future.tacticalarts.com/store/clothing. You see, one has "/store-old/" and the other "/store/"
What you need to do is remove or disable the "Store Old" menu item.
Regards
Please Log in or Create an account to join the conversation.
- L
- lesliebuck New Member
- Topic Author 3 weeks 2 days ago #5
I deleted the store-old menu item, but it still does not display the header image on the product or category pages.
Please Log in or Create an account to join the conversation.
- L
- leoalv Moderator
- 3 weeks 2 days ago #6
I don't know how you're configuring your menu items; I haven't used Eshop.
What I see now is that the product and category links are:
future.tacticalarts.com/component/eshop/clothing?Itemid=569. As you can see, it's not under the Store menu item, but rather the component view.
I don't know if Eshop uses the same URL structure as Virtuemart, because if your Store item is an Eshop component, in its frontpage view all subcategories and products should be nested under /store/ and not under /component/eshop/. In Virtuemart, URLs are cached, and as I said, if Eshop works the same way or if it's derived from it, then you should delete all the contents of the cache/ folder in Joomla. If they work the same, this will regenerate the links nested under /store/. But if not, contact the Eshop developers to have them look into why the products and categories are not nested under the main Eshop element, in this case, Store.
Regards
What I see now is that the product and category links are:
future.tacticalarts.com/component/eshop/clothing?Itemid=569. As you can see, it's not under the Store menu item, but rather the component view.
I don't know if Eshop uses the same URL structure as Virtuemart, because if your Store item is an Eshop component, in its frontpage view all subcategories and products should be nested under /store/ and not under /component/eshop/. In Virtuemart, URLs are cached, and as I said, if Eshop works the same way or if it's derived from it, then you should delete all the contents of the cache/ folder in Joomla. If they work the same, this will regenerate the links nested under /store/. But if not, contact the Eshop developers to have them look into why the products and categories are not nested under the main Eshop element, in this case, Store.
Regards
The following user(s) said Thank You: lesliebuck
Please Log in or Create an account to join the conversation.
Secure Payment
Use your cards with Paypal.