How do I add css?

This is a pretty basic question, maybe I just dont understand how Velo works but I would like to add/edit basic css stylesheets. I cant find any documentation on the subject for Editor X

4 Likes

Hi!

Great question!

Velo allows you to edit the style properties of many element using javascript syntax, you can find documentation here: https://www.wix.com/velo/reference/$w/button/style

We currently, donā€™t offer the option to edit the css stylesheet directly.

Was there something in particular that you wanted to achieve? Maybe we can give you some guidance.

Thats crazy, you guys call yourselves developers but you cant even edit basic CSS, I need to do mostly animation stuff and polish and fixes, javascript is limited in some cases and some users disable javascript code.

I have a H1 header that I need animated with a gradient, I used this code that worked great, previously I had this working on wix by using the Google Shortcode paste box and it seamed to read that just fine.

background: linear-gradient(134deg, #2ca8bd, #85c776, #6fbfa2, #5dc8dc, #66ea76);
background-size: 1000% 1000%;

-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
-webkit-animation: AnimationName 35s ease infinite; 

}

@-webkit-keyframes AnimationName {
0%{background-position:0% 45%}
50%{background-position:100% 56%}
100%{background-position:0% 45%}
}

Basically the header text slowly changes its colors via gradient animation.

I know right!! How is this a professional tool when I canā€™t access the CSS Stylehseet or site code. Webflow does this.

Good evening,

Certainly, we can modify the css of our site on the ā€œMonitoring toolsā€ page, but the user experience is really very unpleasant , itā€™s very messy and the possibilities of customization are extremely low through the tool that we have at available today.
I really hope that wix will do everything possible to be able to put a real css editor in order to edit any element of our site in css. Wix has a lot of advantages but we are soon in 2021, the competition is seriously starting to do better, that should be a priority in the future features of the editor! This is my Christmas present , which I am ordering this year.

The wix team, donā€™t miss the opportunity to add a real option for css through this new editor! <3

I couldnā€™t agree more, Iā€™m using the monitoring tools trick for the time being. Im going to be developing most of my sites on Webflow, and the main reason is literally just for better CSS control. This should be an easy one! I understand not letting normal wix users access, but atleast let users of Editor X the ability to easily edit CSS on the fly.

@devondowler I fully agree with you. Especially since I pay a premium wix subscription (moreover I absolutely do not understand this price difference between the classic wix plans and the editor x plans, but this is another subject ā€¦), and to more than 300 euros a year, it is true that it is sad not to have such a level of personalization on your website with the css. What is frustrating is to see that wix opens up to developers with wix Velo for javascript (which is a very good point) but still remains in contradiction when it comes to css. Being forced to go directly through javascript to add css features (seen above), in 2020, itā€™s incredible bad. Knowing that this ā€œcssā€ feature has been in demand for quite a few years on the wix forums. I remain convinced that the editor x team will succeed in integrating the possibility of modifying the css of any element of our site. :wink:

Yes, need to be able add custom css (styling should not be happening thru javascript)! Need to control link color as part of the theme, as well as styled buttons that work with the logo/brand, along with setting other styles so they can be universally controlled. Having access to adding custom css is critical in developing custom sites that can be handed off to a client who will make edits and keep style consistent.

This feature is long overdueā€¦itā€™s so basic (and important) it shouldā€™ve been available from launch

If you havenā€™t already voted on the feature request, we have a feature request here.
https://support.wix.com/en/article/editor-x-request-editing-your-sites-css-code-style-sheet

This is keeping me from holding off from Wix. Add CSS classes and direct CSS editing and and Iā€™ll start adopting Wix over other web builders that do this.

CSS editing is in the works :wink: - https://support.wix.com/en/article/editor-x-request-editing-your-sites-css-code-style-sheet

Itā€™s just unbelievable that simple things that are available in wix are not available in the so called more premium for designers/developers editor x product? No text strokes, no ā€˜css classesā€™ can be added, no ā€˜edit assetsā€™,ā€¦ I just find this unbelievable that real web designers even consider this product??? Even a couple of years later no improvement on this part? Anybody that suggests using javascript instead of css to style elements does not know what they are talking about!!

Iā€™ve been fighting over this as wellā€¦ Honestly thought itā€™d be supportedā€¦! I find it very very painful to do the slightest tweak on a wix website.

Good news! CSS editing is available in Wix Studio - Studio Editor: About CSS Editing | Help Center | Wix.com

@noahlovell

Iā€™ve spent the last few hours trying to find work-arounds to adjusting basic css properties like font-size using custom classes because it doesnā€™t work. The only implementation Iā€™ve been able to sort out is to edit the rich-text-text GLOBAL class, which, of course, applies the css property to every single text element.

The only text properties I can edit by custom class look to be properties that arenā€™t included in the design panel like text-transform. This is not what I was expecting.

1 Like