Search Results for 'css'

[ccastanedag]

Hello Claue Dev:

I would like to have the “Add To Cart” button at maximum witdh independently of device size (Desktop, Tablet, Mobile)

DESKTOP

This is how it looks currently:

This is how I want (I edited with paint):

MOBILE

When product is simple, this is how it looks currently:

When product is variable, this is how it looks currently:

This is how I want (I edited with paint) Take special look on “UNIT COUNTER” it’s width is also full, in previous version of Claue  this behavior was default, I don’t know why you remove, it was awesome, is more user friendly IMO:

CUSTOM CSS

I have to mention that I have done some minor changes to the button css to make it bigger, this is my custom css code:

.single_add_to_cart_button {
padding-left:45px;
padding-right:45px;
height:75px;
font-size:1.45em;}

 

The problem is I don’t like too much my solution because it use “px” and this is like hardcoding and in some devices the button looks weird. I would like a responsive solution. I will appreaciate your help

Thanks for your time

Carlos

[Harry]

Hi ArtK,

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

.slick-prev, .slick-next {color: #222;}

and change #222 with your brand color

2. Please add below code

@media only screen and (max-width: 480px) {.slick-prev, .slick-next {opacity: 1;}}

3. Please add below code

.p-video a {
	border-color: 2px solid #222;
	background: #222;
	color: red;
}

Please use Loco Translate plugin to change the text http://support.janstudio.net/forums/topic/theme-translation/ when create new language please choose English-US

4. I checked on your live site and staging site still see this https://monosnap.com/file/o5Pk3FYYhc3bGeGPcT6HiuysXqqHQo

5. This CSS generate by plugin not from our theme. Please add below code to temporary fix this.

#wcfm-content canvas {position: relative !important;}

Best regards

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

[Harry]

Hi Phil,

2. You have to create the “views and post” folder in claue-child

3. Sorry i miss understood. Please add below code to Claue > Theme Option > General Layout > Custom CSS

.sidebar .widget ul li::before {
	display: none;
}
.sidebar .widget ul li {
	padding-left: 0;
}
.sidebar .widget ul li li {
	padding-left: 15px;
}

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]

Hi Harry,

Please find credentials for our new staging site with latest version of theme. You can use this staging for resolving previous ticket.

We need some minor css and 2 bug fixes we identified. We will open another ticket later when we are able to replicate the other bugs in our staging. We are working on it.

We write about the issue below to be able to mark it as private. Many of the points can be used to make your theme better for the future and other users 🙂

 

[ArtK]

Hi Harry,

Great to know you could replicate the issue. 🙂

However, I did not find any custom code I added previously in claue–>theme options–>custom css which matches the code you found.

Can you please tell me where you saw this custom code? I added your new code to the custom css area but it did not fix the issue.

You have access to staging site (I think I gave you credentials when creating topic. If not, I can give you once more). You can login and see where I added you code. Can you please check if I understood you correctly as the codes did not fix the issue yet.

I have identified another bug which might affect all your users which was reported to me and which I am trying to replicate. I will let you know once I identify and document how to replicate as it affects specific browsers and mobiles.

Best Regards,

Team Artk

[Harry]

Hi ArtK,

I check on MacOS don’t see the issue, but when I check on Window I see it,

Please change your custom css

@media only screen and (min-width: 75em) {
.jas-container {
	width: 95%;
}
}

to

@media only screen and (min-width: 75em) {
.archive .jas-wc .jas-container {
	width: 95%;
}
}

Best regards

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

[Harry]

Hi Phil,

1. Please remove the code you add because it affect to other element and add below code to add more space between sidebar and blog content

.jas-blog .posts {margin-left: 40px;}

2. Please install claue-child.zip included in package you download from ThemeForest and copy file content.php in “claue > views > post” to “claue-child > views > post” and edit file content.php
https://monosnap.com/file/x2mvWqQqcDerU4mG6aagwbgIChSiYo

3. Please go to Settings > Sharing and check on the field you want show icons.

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

.single-post.postid-6462 .page-head {padding: 50px 0;}

5. Please add below code

.single-post.postid-6462 .post-content {text-align: center;}

Best regards

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

[Harry]

Hi,

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

.product.product-type-variable .price { color: #fff;}
.product.product-type-variable .price .woocommerce-Price-amount.amount:nth-child(1) {color: #696969; position: relative}
.product.product-type-variable .price .woocommerce-Price-amount.amount:nth-child(1)::before {content: "Vanaf:";margin-right: 8px;
}

Best regards

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

[Harry]

Hi,

1. You can change color of mini-cart by add below code in Theme Settings > Custom Code > Custom CSS

.jas-mini-cart a.button {
border-color: #222;
background: #222;
}
.jas-mini-cart input.button {
background: #56cfe1;
border-color: #56cfe1;
}

and change #222 and #56cfe1 with your color

2. You can change “quick shop” and “ädd to cart” button on product list by add below code

.product__action a {
background: #fff;
color: #22;
}
.product__action a:hover {
    background: #222;
    color: #fff;
}

change #222 and #fff with your color

3. You can change only Add to cart button by add below code

.button--atc-ajax {
	border-color: #56cfe1;
	background: #56cfe1;
	color: #fff;
}

and change color code to your color

Best regards

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