Extra Class CSS

Hi guys.

If you wanted to create a new css class without it being active for all elements, and then use it only in certain Elements. How can I do?

Example I would like to create the css class:

.vc_custom_colum_extra {
justify-content: center;
}

and apply this class Only to Certain Elements.

I’ve tried creating this class in settings -> Global CSS and then applying it to the single element but I can’t get it to work.

How can I create this?

Thanks for the replies friends

Greetings 🙂

Hello,

– Navigate to the page or post where you want to apply the custom CSS class.
– Edit the page builder button to enter the page builder interface.
– Locate the elements where you want to apply custom css.Click on the element to select it.

In the element’s settings panel, there should be an option to add custom CSS classes.
Screenshot for clarification:
https://ibb.co/txMdpGL

Best Regards.

Hello Aizaz

Thanks for the reply.

Yes, I already knew that.

I did not mean that.

I meant how do I create a New Style a New CSS container

above I gave you an example that I created:

.vc_custom_colum_extra {
justify-content: center;
}

For example you can call this:

wd-colum-justify-content {
justify-content: center;
}

These that I just wrote to you are new containers that I created in the theme settings on Custom CSS under the Global control.

Then I went into the element that I would like to use the newly created css class but it doesn’t work.

so my question is:

– How do I create working New CSS Classes for various elements?

Do you understand now what I mean?

Let me know
Thank you 🙂

Hello,

It is not possible to Apply new custom CSS classes, you need to work with the existing classes and styling options provided by the theme. Look for existing CSS classes. Use your browser’s developer tools to inspect the elements you want to style. Identify the existing classes that are applied to those elements.

Best Regards.

Hello Aizaz

Thank you for your answer.

OK! I got it. No problem.

You can give me an advice?

I need to center the content of a “Text” element in a column

But I can’t apply it, if I enter in the column settings Vertical Alignment as Center or Medium it doesn’t apply this alignment to me. (see attached images)

So I thought I could apply a new CSS class with the “justify-content” CSS command Without this being linked to the “.vc_custom_1693304640169” Container (see attached images)

Because every time I update the contents of the column, that container changes the number and no longer takes the command entered.

Do you have any advice on how I can do it?

Thank’s my friend
I wait for your answers.

Greetings

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the WP admin login details of your site so I will check and give you a possible solution.

Best Regards

Ciao Aizaz

Grazie per il tuo supporto

Certamente trovi tutto scritto in privato.

Fammi sapere
Ti aspetto qui

Saluti

Hello,

I have visited your site and edited the columns and inserted the extra class name “tester_t”. Then go to page setting of the wp bakery and insert the following css code it is working fine now:

.tester_t {
   line-height: 40px; 
   justify-content: center;
}

This is an example code. Customer the code as per your requirements.

Best Regards.

Hello Aizaz

Thanks for your help!

Unfortunately the command justifies-content: center; Not working.

Even forcing it with !important it doesn’t take command.

Can you double check?

A thousand thanks

Attachments:

You must be logged in to view attached files.

Hello,

I have updated the custom CSS code in the Theme settings. Please check the site now after removing the browser cache.

I have added the below custom CSS code in the theme settings:

.tester_t p {
    line-height: 40px;
    text-align: justify;
}

Best Regards.

Hello Aizaz

Thanks for your help

Unfortunately, even after deleting the Cookies and Cache from the Browser, nothing changes

Everything remains as before.

The paragraph should be Centered in the Pink box, but I see it stays aligned above.

Let me know

Greetings

Hello,

Please check it now.

Best Regards.

Hello Aizaz

Thanks again for your help

Unfortunately now it is seen aligned in Bottom. That’s not good.

It must be center aligned. (see picture)

Thank you
Let me know

Greetings 🙂

Attachments:

You must be logged in to view attached files.

Hello,

Your issue has been solved. Please check it now after removing the browser cache.

Best Regards.

Hello Aizaz

Thanks for your great work!

I assure you that it’s fine now.

I just need to understand a few things.

1. How did you solve the problem?

2. I noticed that the CSS class container is called Tester_t — I guess this is not a default class used by the theme, right? — so I assume that it was created as a new css container.. — I had previously asked if it was possible to create new css classes — you answered that it was not possible.. — may I know why you introduced a new class ? —
surely I have misunderstood something .. If you can kindly make me understand better I would be very grateful. 🙂

Greetings 🙂

Hello,

1. I have solved the issue from the WP Bakery Row settings >> https://ibb.co/xCcSVXM

2. Yes, I have added this to use with the custom CSS code, but the issue has been solved without custom CSS code so I have deleted that custom CSS class from the Row.

Best Regards.

Hello Aizaz

Ok Thanks for the explanation.

I answer to point 2..

2. Actually I still see the loaded CSS code. Are you sure that by removing that code everything works?

Attachments:

You must be logged in to view attached files.

Hello,

Yes, Try to remove the code and check the issue.

If you have any questions feel free to contact us.

Best Regards.

Ok Thanks Aizaz..

One last thing..
I noticed that if the view is seen through a 15-inch notebook, the part below in the contacts is seen moved from the frame (see video).

Can something be done so that it always stays fixed correctly?

Always in the home.

Let me know if you have an idea

Thanks so much for your work! 🙂

the video…

Attachments:

You must be logged in to view attached files.

Hello,

Sorry, but you have to check the site responsiveness on the real devices or in the Responsinator here:
http://www.responsinator.com/

Best Regards.

Hello Aizaz

Yes, I already checked

but my problem is that the image you see in the video doesn’t stay aligned in the green box only when this is seen from a 15 inch notebook.

Is there anything I can do?

Can you help me understand how we can make the image of the woman stay aligned with the green box?

Thank’s my friend 🙂

I’ll wait here
Greetings

Hi Aizaz!
I solved!

Thank you so much for your help
You can close this ticket

Greetings
🙂

Hello,

You are Most Welcome.

We are glad that you managed to solve the problem yourself. You are Great!!!

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts