Search Results for 'css'

[Harry]

Hi,

Please add below code to Theme Settings > Custom Code > Custom CSS

.tab__content h1 { font-size: 22px; white-space: normal;}

Best regards

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

[rusteynail]

Thanks for the response Harry, But I cannot get this to work, I have placed the custom code in the “custom css”  and I see you have used an image already on my store files, but nothing shows up.

Could you take a look for me?

[Harry]

Hi,

Please go to Theme Customize > Theme Settings > Custom Code > Custom CSS and add below code

#jas-header {
	background: url('//cdn.shopify.com/s/files/1/2686/0798/files/Untitled-1_1eac5875-7a35-4b21-9037-3a23ed2b8574.jpg') center center no-repeat;
	background-size: cover;
}

and change “//cdn.shopify.com/s/files/1/2686/0798/files/Untitled-1_1eac5875-7a35-4b21-9037-3a23ed2b8574.jpg” with your image path

Best regards

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

[consciouscrafties]

Oh also just found a problem with this CSS:

/* Make Menu position first (over banner) */
.header-4 {position: relative; z-index: 999;}

On mobiles, when user clicks the menu, the entire screen is overlaid with black (see screenshot)

Many thanks,

Karen

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Karen,

1. Please add below code in Claue > Theme Option > General Layout > Custom CSS

.jas-menu > li:not(:first-child) {
margin-left: 25px;
}
#jas-menu.jas-menu > li > a {font-size: 12px;}

2. Add below code to reduce space between menu item on dropdown

.jas-menu ul li {
	line-height: 20px;
}

All issue relate to color, please go to Theme Option > Color Scheme and change Sub Menu Hover Color, Sub Menu Background Color, Header Sticky Sub Menu Background Color

Best regards

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

[ArtK]

This reply has been marked as private.

[ArtK]

Dear Harry,

I wanted to add a box-shadow in main product image in product page and quick-view as you can see in staging (Link in private below)

To achieve this I added custom css:

.slick-list {
box-shadow: 11px 12px 12px 2px grey;

}

However this class is shared by other elements and hence related product and other product display area got a box-shadow which I do not want. (See screenshot in private below)

Since, I could not find a unique selector to call the div to add my custom class, I found a way by editing template files :

.productshadow{
box-shadow: 11px 12px 12px 2px grey; /*my custom class for box-shadow*/

}

a. product-image.php line 33 where I added my custom class .productshadow to $classes
b. content-quickview-product.php where I added my custom class .productshadow in line 18 <div class=”p-thumb images jas-carousel .productshadow”….

1. Is there any pure CSS way by which I can achieve the same effect without the need to edit template file?

The issue is the classes are shared and I could not find a unique class and hence added my own in template files 😉

Thanks a lot Harry. I put my codes public to help your other users implement the solution. The codes are working perfectly.

Founder, Artk (Learning a bit of coding)

[Harry]

Hi,

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

.slick-prev::before, .slick-next::before {
	color: #000;
}
.slick-prev, .slick-next {
	background: #fff !important;
}

Best regards

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

[hadesnyc]

Hi,

 

I would like to change the color of the arrows on the products page from the black arrow markers to white arrow markers.

 

I have attached the image of my current arrow markers which are black.

 

is there a CSS i can use to change them to white?

 

Thank you.

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

Please add below code to Theme Settings > Custom Code > Custom CSS

.product-quickview .product-single__content {
	max-width: calc(100% - 35px);
}

Best regards

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