Allow dedicated CSS files, and Insertable Divs

Hey there! You allow us to create Javascript files only currently. I want to be able to add .css files where I can store my own custom styles for the elements I have already added to the page. This would be huge for me, and many others! (You can style each id/class individually with Javascript, but this is a poor workaround)

I also want to be able to add div’s from the “add” button in the main site editor bar once developer mode is turned on.

You do those two things and this platform will really be powerful! As a UX designer this would let me rapidly prototype just about everything inside wix without needing external tools.

PLEASE, implement these two things!

8 Likes

I have a couple of clarifying questions, to make sure I understand your request.

  1. Do you want to add your CSS to override/add to the CSS the components already have? Can you give an example of how you’d use it (component, css)?
  2. What would you do with the DIV element you’ll add to the site? Do you mean to use it as decoration? What would be the content of it? How does it differ for you from HTML code option you have today?

Thanks!

Hello Amit,

Yes I would like to override existing css and also allows create new css rules. For example in the captures below you can see how I have defined a main.css file that I should be able to map rules to the elements on the page with. I used something as simple as a background color change for an example, but I should have full access to all properties of that element, as well as any other custom labeled elements. (I should be able to choose if it is a class or an ID within the Properties tab .)

(Ideally I should be able to write those properties directly into the Properties tab show in the first image and those would be added to a .css file by default that I could later re edit)

As for adding DIV elements it would exist on the page in the same was as adding a rectangle. Except it would be a proper element (similar to a flex box) that you would be able to define properties for and give children/nest in.

The HTML code option as I understand it today places everything in a separate i-frame. This would instead exist on the page in the same way as any other user added element from the toolbar.

I hope this was clear and if not I am happy to chat about the features further as I think together the flexibility they add would really make Wix a much more competitive platform.

Hi Liv,

Thanks for the response. I think I understand better. One last question, regarding the “Adding DIV elements” part, I am still trying to understand whether you want it for decoration (setting all kind of CSS for the element) or as a way to get layout capabilities (like flex), where you add other editor regular components into your custom boxes in real containment.

Thanks,
Amit

Hi Amit,

It would need to have nesting support and would be targetable for layout purposes as well. So essentially both of the feature types you mentioned.

Essentially a div that would function similar (or ideally the same as) a div element on any other live site. The central advantage of the Wix version would be that it is a drag and drop element and that there would be a clean UI to interact and modify it with.

For example when you drag one div on top of another it would bring up a window with options to enable nesting. Then you would see it in a list (similar to the way Photoshop handles layers) and by drilling down on each of those div’s you could then see what child elements it contains.

I know that is asking for a lot.

To be honest if you just implemented the custom .css files with support for CSS3 (or ideally even SASS and LESS) then most of what we would need to do could be achieved with what exists presently + custom css.

Please update the thread if any of these things are implemented, and don’t hesitate to reach out to me directly. (I am currently looking for more clients with my UX work so I would be happy to offer a more formal consultation if needed)

Cheers,
Liv

The ability to create a custom CSS file would make such a huge difference. I am trying to transition over from another online website builder, but the constant headache from not being able to access or create my own CSS files is extremely frustrating. Very limited access to JavaScript element ID names make JavaScript workarounds nearly impossible, too, when the solution really should just be one simple line of CSS code. PLEASE ADD THIS FEATURE!

Hi there . May i know the update on this case? I am trying to work with CSS too.

I agree, not being able to create your own or edit the existing site css files is huge step back for the professional site designer/developer. Google “Rotate an image on hover using JavaScript”, and you will be lucky to find anything, and if you do, it requires a fair amount of coding and multiple images. I can do this simply in css using the following:

img {
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

Why would I want to do more work than I have to? I can see using WiX for a very simplistic site, but Not being able to edit css for a site is kind of a deal breaker for me.

Why would I want to do more work than I have to? I can see using WiX for a very simplistic site, but Not being able to edit css for a site is kind of a deal breaker for me.

The whole purpose of Wix Code was to provide an attractive option for professional web-developers to simplify while still having control/customization. Seeing the other responses in this thread should be an indication that this feature specifically is not just a nice to have but essential if you want to claim this platform is for web professionals now.

It borders on false advertising when you say you give full code access. (CSS is code too! And low level code at that! Access to HTML without CSS is like living in the 90’s )

Please update the platform with this feature and provide users with a timeline for when they can expect it.

If I don’t receive an update I will cancel my subscription shortly and pursue another platform, I have been delaying a major redesign of my site waiting on this feature and I can’t wait any longer.

" Please update the platform with this feature and provide users with a timeline for when they can expect it."

I don’t think I will hold my breath on this one. Last night I looked more into using JavaScript, and it appears that JavaScript is limited to the WiX API, and is not a full implementation of JavaScript. This got me thinking why this might be. I have come to the conclusion that it all comes down to money.

As a professional designer/developer if we had full control of JavaScript code as well as CSS for a site, then we would have less of a need, if any, to purchase some of the premium apps that WiX sells. This might not fit into their business model, which is why we are limited to what we can do with either.

Seriously, how hard would it be to allow us to create a css file for our overrides and add a style sheet reference link to that file in the head tag of a page’s html? My guess " Not hard at all ". Even easier, would be to give us the ability to edit the existing css file for the page. Because of the simplicity in implementing these features, I think this would already have been done by now if WiX really wanted us to have these abilities.

I think WiX is a fabulous website design tool for the small business owner who does not want to pay for professional design or development. However if a client comes to me with the request to setup a site for them on WiX, I would have to steer them in a different direction at this point in time. There are way too many CMSs out there at our disposal, that allow us to design a site and give the customer the ability to manage the content, to have to limit our design talent to only the feature set that WiX offers.

everyone who comes here, please GO VOTE for this feature HERE

See that feature request has been in placed longer than Wix Code has been available to BETA, and from what I am told, I was person #3 on beta lol, so I know this almost for fact. But A FRACTION OF USERS NEED THAT, AND EVEN A TINIER FRACTION EVER FIND OR VOTE FOR THE ACTUAL THING THAT WIX COUNTS AS PRIORITY OF DEVELOPMENT MEASURE. Stop bishing, go vote. BUT MY OWN bishing here, wix team, why do some of my votes APPEAR to be not captured when I visit the feature request pages later on? I do know some keep and save alright. But some, I know I have voted for, even multiple times, and yet when I go back to it months later, I find the vote button white and clickable once more. same account and everything.

I have to agree, the more I work in code, the more I find the pressing need to access my CSS and just do my more favorite things with it manually. I am sure you guys can figure out a way to give us access without risking losing business or people just stealing the code. Heck you could be have lawyers and bots at work for any infringement henceforth and just shore up bank accounts that way if people started abusing it in most countries where you can sue them and do business. I mean. THIS IS CODE NOW lol we need more, always. haha. Please please please figure something out.

I voted on the issue linked above. Just wanted to add here that the use case I running up against is styling embedded code snippets from gitlab/github on a blog. The snippets are able to be inserted just fine using an html insert, but I don’t like the default styling I get from those services. You can modify that styling by applying your own css, (see here - Customizing GitHub Gists / Coder's Block) and I can modify the styling by inserting a style tag into the html element in my blog post. I have already tested that and it works. However, this is not maintainable. I don’t want to have to copy paste the same styling information into every single code snippet I add to my blog. That would make it impossible to update the styling for my website. I want to have one css file that I can update and have all of my code snippets change.

If I could link to an external stylesheet from within the page header of the blog page, even that would be workable. But anywhere I try to place a link tag where rel=“stylesheet” wix freaks out.

I support having this feature too! The styles of websites are limited to what is Wix provides and that is quite restrictive. It would be better if we could implement our own css style sheets or at least let us place a style tag with custom css in the header section.

This is really frustrating. I mean, styling with CSS is really essential for us to be able to provide WIX to our clients.

I’m currently just trying to set a freaking margin on the Gallery Pro component. This is an awful restriction which means that we need to find another platform for the majority of our clients :frowning:

I suspect this restriction is based on that everything about size and position being calculated by javascript due to the absolute positioning-only solution in the Wix platform? Meaning, having custom CSS like a simple style will ruin layout code etc.

I talked with Wix about fully responsive designs (very much wanted!) yesterday and got the news that they announced support for this and it will be released before the end of 2019. Perhaps the new Editor might introduce some CSS support then too! Did anyone else get this news?

Ps. and yes, I’ve voted on every feature vote I can find regarding full responsive designs and css capabilities.