Banner Opacity

[Sgmonster]

Hello:

Is there a way to change the opacity of these banners.  It always has a gray tone.  Can that be replaced?

thanks,

Tom

[Harry]

Hi Tom,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.page-head::before {
	background: rgba(0, 0, 0, 0.5);
}

and change 0,0,0 as RGB color and 0.5 as opacity from 0.1 to 1.0

or change code to

.page-head::before {
	background: none;
}

to remove the overlay.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Hi Harry,

is it possible to NOT have the category title appear on the banner?  It seems like the “Name” field is a required field, so it can’t be blank.

Also, what is the size of the category banner supposed to be?  I am using 1920 x 300 at 300 pixels/inch and it is still pixelated.  
BikerArmour Rx Frames – Bikershades

Thank you very much!!!

Tom

 

[Harry]

Hi Tom,

I see the banner you using is 1000 x 156 https://eir6aehiq4a.exactdn.com/wp-content/uploads/2021/01/BikerArmourRx2_catbanner.jpg?strip=all&lossy=1&ssl=1 . Recommend use 1920 x 300.

And you can hide the category name on banner by add below code to Claue > Theme Option > General Layout > Custom CSS

.page-head h1 {
	visibility: hidden;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Hi Harry:

My category banner sizes are 1920 x 300.   Why is it that most of the banner gets cut off on the page?  and it looks so much taller also?   my display on my computer is set at 1920 x 1080.   See:

https://bikershades.com/product-category/try-before-you-buy/
https://bikershades.com/product-category/prescription-motorcycle-glasses/rx-brands/7eye-rx-prescription-motorcycle-sunglasses-frames/

Am I doing something wrong?

Thank you,  Tom

[Harry]

Hi Tom,

The issue because your text is high for the page https://bikershades.com/product-category/try-before-you-buy/ on this page please try 1920 x 450

It also defend on your screen resolution.

The background cover all content, it will cover width or height of header, it not auto resize both width and height.

Hope you understand.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

I see.

So is there a way that the banner resizes correctly to the different screen resolutions?  My laptop is at 1920 x 1080 which is quite common, but the banners still get cut off at the ends.  All the banners we use are at 1920 x 300.  and we use 300 dpi.

Is there anything else we can do here so that the banners resize themselves?  What is the ideal banner size you recommend for categories and pages?

thank you, Tom

[Harry]

Hi Tom,

The page head resize the width on different device while not change the height so some screen it will cut off.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Hello Henry:

I create a banner 1920 x 300 size, but at full screen, part of the banner still gets cut off.  When I reduce the size of the window, sometimes I can see the entire banner. My screen size is 1920 x 1080.

How many dpi should I make the banner so that it will work properly?  I’m using the correct size banner image, 1920 x 300.   Should I change the DPI?

I am referring to the banners for the Cart and Checkout pages.

thank you,

Tom

[Harry]

Hi Tom,

The background can’t fit all screen when you resize. Please change background on cart page to 1920 x 345.

The height of banner keep but the width reduce when you resize browser that why you see the background cut off when view on small screen.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Thank you.

I’ll try that.  Why does the banner size change on different pages?  Previously I was always using 1920 x 300.

How do I know which banner size to use before I create the graphic?

thanks,

Tom

[Harry]

Hi Tom,

The banner size base on the text on banner, if your banner has more text you need the height higher if you have less text on banner you only need 1920 x 300.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Hi, Harry,  I also want to show you all the codes we have pasted into the Custom CSS Style section to make sure there are no conflicts.  thank you, Tom

.result-count-order {
padding: 0 20px;
}
.filter-trigger:after {
content: ‘CLICK HERE TO FILTER’;
margin-left: 25px;
}
.product_meta {display: none;}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min—moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .regular-logo { display: block; } .retina-logo { display: none; } }

@media only screen and (max-width: 800px) { .jas-branding { display: none;}}
.additional_information_tab, #tab-additional_information {
display: none !important;
}

@media only screen and (max-width: 800px) {
.wp-caption {
width: 100% !important;
}
}
.quickview-button {bottom: -10px; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: all 0.1s;}
.product-image:hover .quickview-button {bottom: 0; opacity: 1; visibility: visible;}
.quickview-button a { background: #f2f2f2; transition: all 0.3s}
.product-btn .btn-quickview {
display: none;
}
.btn-quickview {
margin: 0;
padding: 0;
}
.quickview-button {
z-index: 99;
}
.page-head::before {
background: rgba(0, 0, 0, 0.4);
}
}
@media only screen and (min-width: 320px) {
.page-head {
padding: 20px 0;
}}

@media only screen and (min-width: 768px) {
.page-head {
padding: 50px 0;
}}

@media only screen and (min-width: 1280px) {
.page-head {
padding: 90px 0;
}}
@media only screen and (min-width: 1440px) {
.page-head {
padding: 140px 0;
}}
#shipping_method li input {
margin: 0 3px 0 0;
}
.page-head::before {
background: none;
}

[Sgmonster]

Hello Harry:

For reason, when I link text when writing a blog, it does not show up as ‘linked’ text when the blog is published.  So, I have to manually bold the words that are linked text.    I dont think this is normal.  Can you fix?

thanks,
Tom

[Harry]

Hi Tom,

This issue related to editor, not related to theme. Please check the editor.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Harry:

Can you make this area (on the product page)  a field where we can add a graphic or text?   See below

thank you,

Tom

[Harry]

Hi Tom,

Please go to Claue > Theme Option > WooCommerce > Product Detail Settings > extra content

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Hello Harry:

I want to change the size of the the category banners.   Currently it is set to default of 200 pixels tall and that is too short!  Or can you make it dynamic depending on the size of the graphic?   How can we change the height of the banner?  I am thinking 300 pixels will be good.

[Harry]

Hi Tom,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

@media only screen and (min-width: 320px) {
.page-head {
	padding: 20px 0;
}}

@media only screen and (min-width: 768px) {
.page-head {
	padding: 50px 0;
}}

@media only screen and (min-width: 1280px) {
.page-head {
	padding: 90px 0;
}} 
@media only screen and (min-width: 1440px) {
.page-head {
	padding: 140px 0;
}}

It use background so can’t auto change on every screen.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Sgmonster]

Thank you Harry!  What if we remove the background, then can the banner size be dynamic?

Can you check out the page and see if the category banner is working correctly?  I attached the banner again.
https://bikershades.com/product-category/motorcycle-sunglasses/brands/bikerarmour-motorcycle-riding-glasses/

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Tom,

When you remove the background, the banner size can’t be dynamic.

The space on top and bottom of the text on banner fixed.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts