Att. on pic – can we change the way it appears? As in Darker?

If you can help us out on this again, we did not have much success with the other time, we need to make it more visible, we have two attis, the brand, which is fine, and then the XXmg/Dose but its very light and not that visible, how can we change this?

Thank you.

James

Attachments:

You must be logged in to view attached files.

Hello,

I can provide custom CSS to make the text contrast, however, I can hardly help in images.

Please clarify.

Best Regards

CSS is fine, I just need the words darker and more prominant, not looking for pic alterations, just these on screen att values. There has to be something to sort of control them but if you can send me over CSS that makes the works a tiny bigger and black, not dark grey?

Thank you so much,

James

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .product-label.attribute-label:not(.label-with-img) {
    background-color: rgba(255, 255, 255, 1);
    color: #000000;
}

Then find this code in your custom CSS:

body .product-labels.labels-rounded span {
    font-size: 10px;
    font-weight: 400;
}

Replace for this one:

body .product-labels.labels-rounded span {
    font-size: 10px;
    font-weight: 600;
}

Best Regards

Ok great, how do I find that 2nd code? I dont see it anywhere in my CSS?

Do you mean WP CSS or Theme CSS?

Thank you almost there…

James

I got it, thank you, very much, anything else I can do to it,like make it square? Or it stays rounded?

James

Not appearing on mobile anymore, screenshot attached:

Attachments:

You must be logged in to view attached files.

Ok, so sorry, fixed it,

is there any way to get this over the the right side of the pic? The brand is on the left, it would be nice to be able to get this over to the right, also, the only option is the rounded box?

James

I want to have a certain size for desktop and one for mobile, what do I do? I do not want it global, I have tried it but doesnt seem to work, should I take the CSS out of global?

Screen shot for what I have for mobile.

Attachments:

You must be logged in to view attached files.

Hello,

Take the custom CSS I have provided: https://prnt.sc/sr4ome add these two lines – width and height to get this code:

body .product-label.attribute-label:not(.label-with-img) {
    background-color: rgba(255, 255, 255, 1);
    color: #000000;
width:100px; 
height:100px;
}

Set different width and height and add the code to Theme Settings > Custom CSS > Desktop/tablet/mobile:

As a result, you will have a different size on different screens.

Best Regards

Did not work, please look at the attached pic, I need the huge bubble to fit to the words, or it looks really bad, see the attached pic, I know there must be some CSS to correct this no matter how long the code, it is good for the theme as well.

Please look at pic, let me know the CSS code for this, thank you very much, I appreciate your help, I really do.

James

Attachments:

You must be logged in to view attached files.

Hello,

I do not understand your purpose.

I have provided CSS:

body .product-label.attribute-label:not(.label-with-img) {
    background-color: rgba(255, 255, 255, 1);
    color: #000000;
width:100px; 
height:100px;
}

Take this code, change these values as per your needs:

width:100px; 
height:100px;

Then insert the whole code into Desktop. Then copy this code again, change the values again, and insert it on mobile. In this case, you will have different sized for different devices.

Best Regards

That is what I thought, but the CSS doesnt mention the round circle around it, I need to set the parimeters so the font/words are not all chopped up on Mobile. The other CSS provided was done, but then was big on the phone, which i know you think i messed it up but I didnt, it fixed desktop to a darker lettering, but on mobile it was too much.

Hello,

Please advise the size of the label, its shape, and the font size on each device.

Best Regards

Hi,

I dont know the exact pixel size just a smaller circle, maybe one that fits better, as of now its too big on mobile. Takes up too much of the pic.

If I could give you an idea, just look at the mobile shot I took, would that help?

James

Attachments:

You must be logged in to view attached files.

Hello,

It is not possible to make the label smaller https://prnt.sc/sskjoh as you can see the text has to little space. If I reduce the text it would not be visible enough.

Best Regards

It is not possible to make the label smaller

I dont understand, is there not some CSS code we can apply just to the Tablet and Mobile CSSs?

I can make the words smaller I thought, but just on mobile, so please, let know the CSS and if I can just apply to Mobile and Tablet CSS, also the circle, there is no possible way to get rid of it via CSS? I am pretty sure you can, disable background for them, I just do not know the code.

Please help, we really appreciate it.

EE

Hello,

In order to get rid of a round corner here is the code:

body .labels-rounded .product-label {
    border-radius: 0;
}

Best Regards

Place this code just in Mobile CSS? I dont want to mess it up. This is strictly for the attribute on screen portion right?

James

Hello,

This code removes the round shape of the label. I have provided all the CSS, I have provided all the instructions.

Best Regards

Im asking if I just place it in desktop AND mobile CSS and then play with it? Ill try now I just wish you told me which CSS to put it in, but I know Im a pain in the ass, sorry.

James

I added the CSS and all it did was make it a block, I am looking to not have it like how the brand logos png do not have a background, all I need is to know how to play with those.

Also on this subject, how do I change the Font in the sidebar, I have gone to Advanced Typography as well and there seems to be one option in the main page that does not change the widget fonts on the sidebar one bit.

Sorry for the two requests.

James

Attachments:

You must be logged in to view attached files.

Hello,

I still do not understand how you want to change the view of the attribute label on the product. I have provided all the CSS, you can take it, set the values as per your needs, and insert into the appropriate CSS field for certain devices. If you want to get the code from me, write to me in detail, for example, desktop: rectangular, background: red; text color: yellow; text size: 16px, and so on. I will provide it.

As for the sidebar: here is the code to change:

.woodmart-woocommerce-layered-nav .layer-term-name {
    font-size: 14px;
    color:red;
}

Set the size and color as per your needs. If you do not want to change the color, remove this line color:red;

Best Regards

I just want to decrease padding on it, the surrounding circle is large, that is what I would like to make smaller, there must be a way to do this.

As for the CSS on the attributes, I need to change the fonts etc like the titles, with that CSS its only size I can change, I need to put a different font and make it more visible.

James

Attachments:

You must be logged in to view attached files.

Hello,

To change the size:

body .product-label.attribute-label:not(.label-with-img) {
width:50px; 
height:50px;
padding:0;
}

Find this code in the Theme Settings > Custom CSS:

body .product-labels.labels-rounded span {
    font-size: 10px;
    font-weight: 700;
}

Change the text as per your needs.

Best Regards

[Author]

Posts