Allow custom CSS/LESS, visible in Designer

I really like the Webflow Designer for composing pages and setting some basic properties like fonts, padding, etc, in combination with break points.

However, as a coder I sometimes really miss the refined control full CSS gives. A few examples:

  • ::first-child (for removing left padding, or adding a top border)
  • nth-child (for alternating background colors in sections)
  • parent child relationships (for adjusting the text properties inside an active over hovered nav link block)
  • adding breakpoints
  • using calc()
  • custom ::before or ::after implementations (to add custom underlines, or a dot above an active menu item)
  • -webkit-font-smoothing
  • more advanced selectors (example `a[href^="tel:"]:hover`)
  • custom bullets in an unordered list

Of course, you can add your styles in the 'custom code' editor. The downside of this, is that it is not executed when viewing your site in the Designer, or even previewing the site. So, when you start using this, the process of building a site suddenly becomes a lot more clunky with you having to publish, switch, refresh, and then switch back to the designer again all the time.

A feature that I really liked in Squarespace, was the custom CSS/LESS box. You can use all the power of LESS (variables, nesting, etc) — or just plain CSS, and the changes to the style are immediately visible in the editor. Like Webflow, they don't execute custom code in the editor (for obvious reasons), but they do apply your custom styles.

I think this is a relatively simple to add, backwards compatible feature (<style> blocks in the custom code will of course still work), that will make the Webflow platform so much more powerful. As a first implementation, it can simply be put next to the Custom Code box. But even better would be integrating it in the Designer: this way, you don't have to switch back and forth all the time, and can see the effect of your changes without having to publish. You retain the ease of use of the Designer, while not putting coders at a disadvantage.

This will also help with a number of items on the wishlist, like these:

1. https://wishlist.webflow.com/ideas/WEBFLOW-I-893
2. https://wishlist.webflow.com/ideas/DESIGNER-I-5
3. https://wishlist.webflow.com/ideas/WEBFLOW-I-133
4. https://wishlist.webflow.com/ideas/WEBFLOW-I-6
5. https://wishlist.webflow.com/ideas/WEBFLOW-I-1433


I hope you will consider it, and let me know what you think. Thanks!

  • Rijk van Wel
  • Sep 11 2018
  • Reviewed
  • Cael Prussian commented
    October 27, 2022 00:41

    Having to add styles into an embed on every page of every project to see what I want in the designer really does seem like an easy fix with inclusion of a custom code editor built into Designers Styles menu.

    Sick of having to add pointer-events, calc, pseudos etc into embeds on every page while building then go through removing and adding to the settings custom code at publish every time or having other team members not do this and ending up with super messy CSS setup across our projects.

  • Sebastian Zimmer commented
    June 28, 2019 10:22

    Less in the HTML embed would be perfect! For example, right now i am really missing the "lighten/darken" feature.

  • Edvard Gezin commented
    February 25, 2019 19:42

    Calc() needs to happen, please. Mixing units like calc(100% + 50px) for height and width would be no less than amazing. 

  • Marko Jak commented
    November 21, 2018 11:07

    I'm struggling to bring in my own custom styling which is then available in the Designer.

    Without this it's really painful building my own styles using the UI editor when I already have global color styles and text styles across our back-end application.

    I'm using Webflow to move faster not to slow down.

    It seems to be best practice to embed my custom styles in the 'Custom code' section but then this is not available in the style editor

    Example:

     

    .red.lighten-5 {
    background-color:#ffebee!important;
    border-color:#ffebee!important;
    }
  • Rijk van Wel commented
    November 08, 2018 10:48

    @Chris, I think best is to put it at the top of the body; this should keep repaints to a minimum. Setup I have now is one embed block with class "styles" at the top of the page, which I then give the following CSS:

    ```

    html.wf-design-mode .w-embed.styles {
      position: fixed;
      left: 20px;
      bottom: 20px;
      background: black;
      color: green;
      padding: 10px;
      border-radius: 6px;
      z-index: 100;
    }
    html.wf-design-mode .w-embed.styles::before {
      content: "</>";
    }

    ```

     

    This gives you an easily accessible 'edit styles button' at the bottom left corner of your page (only visible while in the designer). Double click to edit styles, see changes in Designer immediately. Only thing missing now is LESS support :)

  • Chris Wood commented
    October 16, 2018 02:36

    It's worth noting that placing <style> blocks inside the <body> tag may slow down the rendering of the page by triggering repainting:

    https://www.w3.org/TR/html52/document-metadata.html#the-style-element

    "Note: A style element should preferably be used in the head of the document. The use of style in the bodyof the document may cause restyling, trigger layout and/or cause repainting, and hence, should be used with care."

    Because of this, I'd be hesitant to put custom styles inside Webflow's Embed element.

  • Rijk van Wel commented
    October 05, 2018 13:05

    Thanks Matthew, that is really helpful. Indeed pretty close to what I am describing here! I am using this technique everywhere now; usually I have one "Global styles" embed which I tend to put in the Footer symbol so it's automatically included on every page, and then I have one "Page styles" where applicable. Only downsides are:

    1. you can't use LESS (it is so nice once you've used it)
    2. it is a hassle to edit the styles (especially the global styles, first double click to go into the symbol -> than go the Embed block -> then go to settings -> then open code editor)
    3. while editing you have the white Symbol overlay on top of the things you are actually editing

    So, having a custom styles panel on the left or something would still be nice. Give code savvy people the tools they are used to!

  • Matthew Sanderson commented
    September 21, 2018 07:58

    Hi Rijk, did you know if you put a HTML embed element on your page then add <style> tags and your CSS, the sales will render in the designer.

    No SASS etc and a little clunky having to use navigator to find and edit the HTML embed but seeing custom CSS in the designer was a game changer for me..

  • +98