Hi. I would like to know how to set up a header image for each page, other than homepage. Example: https://i0.wp.com/themes.svn.wordpress.org/shop-isle/1.1.41/screenshot.png
Right now I have a slider image on my home page. I would like a header/title image for other pages, e.g. About Us, Contact Us, etc.
There is also a blank white space on top of my slider on my home page. How do I remove it?
Thanks!
Hey Penny,
I’d recommend that you use the Slider Above or Below Masthead Meta Options For Pages. See https://theme.co/apex/forum/t/meta-options-pages/144. This is only available for Pages post type though. If you need to display for the rest of the post types, you need to upgrade to Pro so you can create a custom header which you can assign globally or per page, post or custom post type.
That will lessen the white space above and below your slider because pasting the slider shortcode directly in the text editor will sometimes cause WordPress to output empty <p></p> tags which takes up space.
I’m not sure what is the exact cause though so please give us WordPress Admin access in a Secure Note so we could check your setup.
Thanks.
My website is clawsandeffect.sg
I have two other questions:
How do I change the drop down menu alignment so that the submenu options open to the right? I have tried numerouse codes in the forum but none have seemed to work.
I would like the sidebar to appear on all the single product pages. How can I do that?
Penny
Hello Penny,
Thanks for updating in!
1.) Setting up a header image and a page title for each page will require a custom development. I can see that you are using Icon Stack. With this stack, it is impossible to have a header image and a page title using a css code because the Icon stack does not have a landmark header. Please choose Integrity, Renew or Ethos stack instead. And we maybe able to continue with this header image and page title.
One thing for sure though is that if you are using Pro, you can easily achieve this by designing a custom header and assign it to specific pages.
2.) To change the drop down menu alignment so that the submenu options open to the right, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
.masthead-inline .x-navbar .desktop .sub-menu {
left: 0;
right: auto;
}
.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
left: 100%;
right: auto;
}
3.) To make sure that the sidebar to appear on all the single product pages, please go to X > Theme Options > Layout & Design > Content Layout and set it to “Content Left, Sidebar Right” or "“sidebar Left, Content Right”.
Hope this helps.
1.) I decided to do away with a header image.
2.) The CSS code does not work.
3.) The Content Layout is set to “Sidebar Left, Content Right”, but the sidebar still does not appear on the single product pages. Example: there is no sidebar on this product page: https://clawsandeffect.sg/product/chicken-breast/
Additionally:
4.) I cannot set a background image to the webpage. The image is blocked by the white background of the contents.
5.) Alternatively, is it possible to set a background image to just the footer menu?’
Thank you!
Hello Penny,
Thanks for updating in!
2.) The css code did not work because you have inserted an invalid css. You inserted this:
@media ( max-width:979px){
.x-sidebar{
display:none !important;
}
.masthead-inline .x-navbar .desktop .sub-menu{
left:0;
right:auto;
}
.masthead-inline .x-navbar .desktop .sub-menu .sub-menu{
left:100%;
right:auto;
}
And the correct one should be this:
@media ( max-width:979px){
.x-sidebar{
display:none !important;
}
}
.masthead-inline .x-navbar .desktop .sub-menu{
left:0;
right:auto;
}
.masthead-inline .x-navbar .desktop .sub-menu .sub-menu{
left:100%;
right:auto;
}
3.) By default, the product page in Icon stack is fullwidth. Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.
After the child theme is set up, please add the following code in your child theme’s functions.php file
// Sidebars in single product page and woo archive pages
// =============================================================================
function add_sidebars_woopages($contents) {
if ( x_is_shop() || x_is_product_category() || is_product_tag() || x_is_product() ) {
$contents = 'content-sidebar';
}
return $contents;
}
add_filter('x_option_x_layout_content', 'add_sidebars_woopages');
// =============================================================================
4.) To remove the white background color,
body .site,
body .x-site {
background-color: transparent;
}
5.) You can add a background image in the footer by using a custom css. You may use this:
.x-colophon.bottom {
background-image: url(http://placehold.it/900x300/eee);
background-position: top center;
}
We would loved to know if this has work for you. Thank you.
2.) The code works now. Thank you.
3.) I have set up a child theme. However, when I add the code in my child theme’s functions.php file, the entire website goes down.
4.) Have not tried, will update when I do.
5.) Have not tried, will update when I do.
6.) Is it possible to add a QR code for payment methods? One of my payment method is by PayNow, I would like to add an image containing a QR code at check out for easy funds transfer.
Hey Penny,
3.) The code Ruenel provided does not have a syntax error so it’s highly likely that you have not copied it completely or there might be a closing ?> PHP tag in your child theme’s functions.php. If that is the case, you should remove it.
5.) WooCommerce does not offer QR code as a payment method but this could be possible with a third party plugin or custom development. It’s best that you consult with a third party developer for this.
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.