How to add custom css in wix website

Question

I am new at wix and editing a website and want to add css in a page. but not found any option for css. Anybody know how to add custom css code in wix website?

Thanks

Either

You may want to adjust your tags to include wixcode because wix is Windows Installer XML and not related. – Beckwith

@Paulie_D — The question isn't asking for any of those. It is a simple "How can I achieve X using this tool?" question. – Ovalle

@Ovalle Meh! : ) It was that or another reason. this one seemed the most appropriate. – Gobang

I've successfully used the method described by Gray. Please note that you can only use "Tracking & Analytics" with a paid account. I also found that adding anything to the "Head" will just stick it anywhere in the head-tag. In fact, Wix will place it above most style and script links so it's practically useless to add CSS here. I found that for CSS, "Body - Start" works best and for Javascript, "Body - End" works best. – Smithereens

This is not a valid question. Please explain more – Kingsley

Answer 1

You can do this by embedding inline styles to every page, via creating a chunk of custom css code contained between <style> and </style>.

1. Go to your site's dashboard.
2. Click Manage Website on the left.
3. Click Tracking & Analytics.
4. Click + New Tool **and select **Custom from the dropdown.
5. Set up your custom code:
   1. Enter your custom code.
   2. Select the relevant domain. Note: This option will appear only if you have multiple domains.
   3. Enter a name for your custom code.
   4. Add Code to Pages: Select which pages to add your code to:
      • **All Pages: **Click the dropdown to select an option:
        • Load code once.
        • Load code on each new page.
      • **Choose specific pages: **Begin typing the name of the relevant pages and then click the checkbox next to the relevant page.
   5. Place Code in: Select where the code snippet in placed in your site's code:
      • Head - as noted by @Daniel Gurtner, avoid this because it'll insert it BEFORE any of the inherent styles, which makes it mostly useless here.
      • Body - start
      • Body - end Note: I'd recommend adding your style chunk here to avoid having a delay effect on your loading
6. Click Apply.

Dun

Thank you! Everybody else says you can't do this...yet you found a way. – Callboy

May this method never come to the full attention of the Wix Dream Ruiners – Hammack

Are these features available with the free plan? – Huddersfield

@Huddersfield - Not sure. Try it out and let us know :) – Dun

@Huddersfield this feature isn't available for Free Plan – Ascarid

hello everyone, I'm working at my first site in Wix and probably the interface is changed since the original answer. Now you open the dashboard and then choose "Settings" (in the black menu on the left and then Advanced > Custom Code Please note you need to publish the site before you can add custom code. Hope it helps – Detergency

@Detergency I saw your comment too late. lol. I had to guess my way through it. Your answer should be the accepted one – Semmes

@Semmes no problem! BTW I'm not using WIX anymore :) – Detergency

Answer 2

Wix keeps on updating this but I have found where the place described in the most voted comment is for now. I don't have enough "reputation" to add a comment to the thread, hence why this is an answer.

Go to Settings and scroll to Advanced(the last section) and you can see Custom Code. The rest of the steps are the same.

Quaint

great answer. Probably this is what one needs right now – Unsearchable

Now it won't work unless I pay to become a premium member. Any other suggestion? – Ulna

Answer 3

As of 2022, you can add it from your Wix Dashboard under Settings > Advanced > Custom code.

Click the Add Custom Code button. Enter your CSS in the Paste the code snippet here: textarea. Make sure to wrap it within <style type="text/css"></style> tags. Set the Code Type as "Essential" as it doesn't require user consent to load.

Note: You won't be able to see your CSS from the page editor nor Preview mode. You have to Publish it and view it from the frontend.

Wix Add Custom Code screenshot

Impulsion

Now it won't work unless I pay to become a premium member. Any other suggestion? – Ulna

Its working fine for me. Read steps carefully and go step by step. It will work 100%. – Mvd

Answer 4

1. Click Add on the left in the editor.
2. Click More → Embeds.
3. Drag the HTML iframe to the site.
4. Click your iframe and click Edit Code.

5. Then type:

   <style>
    /* CSS Code */
   </style>
   

Achaean

I tried this, but it didn't work. The browser is not rendering it as a style. Maybe Wix changed the way these iframes work. – Holytide

Style definitions in iframes only affect the iframe in which they appear and not the parent page. – Striker

Answer 5

The steps in previous answers did not work for me. It seems the interface has changed.

The following steps work with the new UI:

1. Go to your site's dashboard
2. Click settings in the left sidebar
3. scroll down to the "Advanced" section
4. Click "Custom Code"

Semmes

Now it won't work unless I pay to become a premium member. Any other suggestion? – Ulna

Answer 6

I just tried it on 6th Sep 2021. Yes it is possible to add CSS & JS custom code.

At the same place of writing custom HTML code

For CSS code add,

<style type:"text/css"> CSS CODE HERE </style>

For JS Javascript code add,

<script> JS CODE HERE </script>

Hawkweed

Answer 7

All carriage returns within the embedded code will show up as \n on the output, rendering the code non-functional.

Martyrology

Answer 8

From the Wix "help center": Wix Editor Request: Accessing the CSS Code (Style Sheet) of Your Site Currently, it is not possible to access the CSS code of your site.

I tried to use the solutions above but the interface probably changed. Also, they have released the new Wix Studio, which does have that functionality.

Westney

Answer 9

You could also achieve this by setting the .html property of your object (#id) in Velo.

The following example adds a drop shadow to your object with id equal to #id:

$w("#id").html = "<p style='filter: drop-shadow(1px 8px 4px #4444dd)'>test</p>"

Below snippet shows the result in pure HTML.

<p style='filter: drop-shadow(1px 8px 4px #4444dd)'>test</p>

Southwestwardly

Answer 10

You can't. This is not a feature provided by Wix.

ref. other ref.

Ovalle