Home › Forums › WoodMart support forum › Extra Class CSS
Extra Class CSS
- This topic has 23 replies, 2 voices, and was last updated 1 year, 5 months ago by
Aizaz Imtiaz Awan.
-
AuthorPosts
-
August 29, 2023 at 1:27 pm #491922
staffcreatorParticipantHi 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 π
August 29, 2023 at 5:51 pm #492017
Aizaz Imtiaz AwanKeymasterHello,
– 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/txMdpGLBest Regards.
August 29, 2023 at 7:25 pm #492040
staffcreatorParticipantHello 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 πAugust 30, 2023 at 12:20 pm #492151
Aizaz Imtiaz AwanKeymasterHello,
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.
August 30, 2023 at 5:52 pm #492273
staffcreatorParticipantHello 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.August 31, 2023 at 10:22 am #492376
Aizaz Imtiaz AwanKeymasterHello,
Can you please share the WP admin login details of your site so I will check and give you a possible solution.
Best Regards
August 31, 2023 at 12:01 pm #492402
staffcreatorParticipantCiao Aizaz
Grazie per il tuo supporto
Certamente trovi tutto scritto in privato.
Fammi sapere
Ti aspetto quiSaluti
August 31, 2023 at 3:52 pm #492471
Aizaz Imtiaz AwanKeymasterHello,
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.
August 31, 2023 at 4:14 pm #492480
staffcreatorParticipantHello 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.September 1, 2023 at 3:02 pm #492660
Aizaz Imtiaz AwanKeymasterHello,
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.
September 4, 2023 at 9:17 am #492938
staffcreatorParticipantHello 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
September 4, 2023 at 4:28 pm #493092
Aizaz Imtiaz AwanKeymasterHello,
Please check it now.
Best Regards.
September 4, 2023 at 4:56 pm #493108
staffcreatorParticipantHello 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 knowGreetings π
Attachments:
You must be logged in to view attached files.September 5, 2023 at 12:50 pm #493334
Aizaz Imtiaz AwanKeymasterHello,
Your issue has been solved. Please check it now after removing the browser cache.
Best Regards.
September 5, 2023 at 1:48 pm #493353
staffcreatorParticipantHello 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 π
September 5, 2023 at 3:00 pm #493396
Aizaz Imtiaz AwanKeymasterHello,
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.
September 5, 2023 at 4:09 pm #493443
staffcreatorParticipantHello 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.September 6, 2023 at 10:53 am #493614
Aizaz Imtiaz AwanKeymasterHello,
Yes, Try to remove the code and check the issue.
If you have any questions feel free to contact us.
Best Regards.
September 6, 2023 at 1:09 pm #493680
staffcreatorParticipantOk 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! π
September 6, 2023 at 1:10 pm #493681
staffcreatorParticipantthe video…
Attachments:
You must be logged in to view attached files.September 7, 2023 at 2:48 pm #494098
Aizaz Imtiaz AwanKeymasterHello,
Sorry, but you have to check the site responsiveness on the real devices or in the Responsinator here:
http://www.responsinator.com/Best Regards.
September 7, 2023 at 3:25 pm #494122
staffcreatorParticipantHello 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
GreetingsSeptember 7, 2023 at 4:53 pm #494171
staffcreatorParticipantHi Aizaz!
I solved!Thank you so much for your help
You can close this ticketGreetings
πSeptember 8, 2023 at 8:24 am #494324
Aizaz Imtiaz AwanKeymasterHello,
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. -
AuthorPosts
The topic ‘Extra Class CSS’ is closed to new replies.
- You must be logged in to create new topics. Login / Register