Style features broken after update+ store notice

[netmined]

Hi Harry,

Hope you are keeping well.

We need your help with a couple of issues that have popped up.

1.We’ve just updated the theme and WordPress (but not Woocommerce as we are waiting until some of the other critical plugins have caught up) on our live site to the latest versions. Following the update, a few stylistic things have broken. The font we selected – Marcellus – is no longer loading, the product prices appear different and much smaller and some of the custom css tweaks also no longer work, such as the size of the WOOCS currency switcher box (the css for this is in the Claue custom css box). Could you please advise what’s causing this and how to fix it?

2.We have set up a store notice announcement on the home page. Is there any way to move this store notice ribbon to the top of the page rather than the bottom? Also, we set up a ‘Read more’ link in it to another page however the link button and text has moved to the end of the ribbon, right next to the ‘Dismiss’ button. When viewed on mobile the Dismiss box overlaps the Read More so it’s impossible for a user to be able to tap/click on it and actually get to the linked page. Can the link be moved to somewhere else on the line – like the end of the sentence maybe? And just a final thing, how can we change the colour of the store notice and the colour when you hover over the links?

Many thanks in advance for your help and reply.

 

[Harry]

Hi,

1. Please try clear cache of browser. I check your site and see the font still load

2.3. The update of plugin WOOCS change class of element, please add more code to override style of plugin to Claue > Theme Option > General Layout > Custom CSS

.chosen-container-single .chosen-single div b {
	display: none !important;
}
.chosen-container-single .chosen-single {
	border: none !important;
	background: none !important;
}
.product-title.pr.fs__14.mg__0.fwm,
span.price {
	font-size: 16px;
}
.demo_store {
	bottom: auto;
	top: 0;
}
.demo_store a {
	float: none;
}
@media only screen and (max-width: 736px) {
.demo_store {
	bottom: 0;
	top: auto;
}
.demo_store a {
	padding: 0.5em 1em;
}}

Kind regards

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

[netmined]

Hi Harry,

Many thanks for your reply and the fixes.

Unfortunately the container size on the currency switcher is still the same size (though when refresh, you can see it flick it quickly to the smaller box before it returns to the oversized one).

Thank you for the code to fix the store notice. It is now at the top on desktop view which is great. On mobile however it is still at the bottom. How can we fix this?

And how can we give the store notice our own colour to match with the store’s colours?

Finally, if you look at the notice on desktop/laptop, you can see some strange spacing around the two boxes (Here and Dismiss). Both of these boxes also have a shadow background. Can we remove this?

Many thanks again.

[Harry]

Hi Netmind,

Please change code to

.chosen-container-single .chosen-single div b {
	display: none !important;
}
.chosen-container-single .chosen-single {
	border: none !important;
	background: none !important;
	box-shadow: none;
}
.chosen-container-single .chosen-single span {
	margin-right: 5px;
	line-height: 21px;
}
.product-title.pr.fs__14.mg__0.fwm,
span.price {
	font-size: 16px;
}
.demo_store {
	bottom: auto;
	top: 0;
	background-color: #3d9cd2;
}
.demo_store a {
	float: none;
	margin: 0 0.5em;
}
@media only screen and (max-width: 736px) {
.demo_store a {
	padding: 0.5em 1em;
}}

and change #3d9cd2 with your color

Btw, your support expired. Please renew your support at https://themeforest.net/downloads that will help us continue develop new features and improve our theme.

Thank and regards

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

[netmined]

Hi Harry,

Thank you for the fixes. By the way, as we mentioned once before, we still have active support for another month. We purchased two licenses and extended the support at least twice since then. We’ve been paying for over 2 years of support now. Please see the attached screenshot from our account.

Regarding the fixes, thank you, most of them have worked.

We still have the problem with the size of the currency switcher box. There was previously code loaded into the custom CSS which reduced the size so not sure if this is now causing a conflict but regardless, it has stopped working. Could you please advise how we can adjust that css and fix this.

Many thanks again.

Attachments:

You must be logged in to view attached files.

[Harry]

Hi Netmind,

I’m sorry because remind you about expired support while your support still active.

Please change code to

.chosen-container-single .chosen-single div b {
	display: none !important;
}
.chosen-container-single .chosen-single {
	border: none !important;
	background: none !important;
	box-shadow: none !important;
}
.chosen-container-single .chosen-single span {
	margin-right: 5px !important;
	line-height: 21px !important;
}
.product-title.pr.fs__14.mg__0.fwm,
span.price {
	font-size: 16px;
}
.demo_store {
	bottom: auto;
	top: 0;
	background-color: #3d9cd2;
}
.demo_store a {
	float: none;
	margin: 0 0.5em;
}
@media only screen and (max-width: 736px) {
.demo_store a {
	padding: 0.5em 1em;
}}

Kind regards

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

[netmined]

Hi Harry,

Thank you for your reply and no need to apologise about the support renewal. We just wanted to let you know that it was the second time we had been asked to renew support when it was still valid. 🙂

Thank you for sending us the amended code. Unfortunately nothing has changed with this one either. But I think that maybe you misunderstood us. It is the size of the WOOCS currency switcher box which has changed since the last update and which we need to reduce again and make it look like before. We had code to change it and this code has stopped working. Here is the code which was there before:

.woocommerce-currency-switcher-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: 0;
outline: 0;
padding: 0;
color: #878787;
font-size: 14px;
cursor: pointer;
}
.woocommerce-currency-switcher-form {position: relative;}
.woocommerce-currency-switcher-form:after {
content: ‘\f107’;
position: absolute;
font-family: ‘FontAwesome’;
right: 5px;
top: 8px;
pointer-events: none;
}

.woocommerce-currency-switcher-form {
padding-right: 15px;
}

.woocommerce-currency-switcher-form::after {
top: -1px;
}
.woocommerce-currency-switcher-form select {
height: inherit;
line-height: 1.5;
}

Can you please advise how we can fix this so that the currency switcher can once again look like the way it did before? (it should look the same as the Claue currency switcher).

Many thanks in advance.

[Harry]

Hi Netmind,

The plugin author they change code of plugin so can’t use old code.

If you want change dropdown background color and style. please add more code

.chosen-container.chosen-with-drop .chosen-drop {
	left: auto !important;
	background: #f6f6f8 !important;
	border: none !important;
	border-radius: 0 !important;
	text-align: center;
	right: -37px;
}

Kind regards

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

[netmined]

Hi Harry,

Thank you for the snippet.

It has put the currency symbol into the middle of the dropdown (instead of on one side) but the size of the dropdown box is still the same – too big.

So just so you know, we have copied below the css code we now have for all the Woocs currency switcher changes in Claue. Do we have some code there which is causing a conflict? (between the old and the new)

.woocommerce-currency-switcher-form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
border: 0;
outline: 0;
padding: 0;
color: #878787;
font-size: 14px;
cursor: pointer;
}
.woocommerce-currency-switcher-form {position: relative;}
.woocommerce-currency-switcher-form:after {
content: ‘\f107’;
position: absolute;
font-family: ‘FontAwesome’;
right: 5px;
top: 8px;
pointer-events: none;
}

.woocommerce-currency-switcher-form {
padding-right: 15px;
}

.woocommerce-currency-switcher-form::after {
top: -1px;
}
.woocommerce-currency-switcher-form select {
height: inherit;
line-height: 1.5;
}

.chosen-container.chosen-with-drop .chosen-drop {
left: auto !important;
background: #f6f6f8 !important;
border: none !important;
border-radius: 0 !important;
text-align: center;
right: -37px;
}

 

Please let us know how to adjust to reduce the box size.

Many thanks again.

[Harry]

Hi,

Please add more code

.chosen-container.chosen-with-drop .chosen-drop {
	right: -18px;
}
.chosen-container {
	min-width: 30px !important;
	max-width: 70px !important;
}

and change 70 as your number

Kind regards

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

[netmined]

Hi Harry,

Thank you very much, that worked!

By the way, are there any plans to make this Claue theme optimised for Gutenberg?

[Author]

Posts