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

You may want to adjust your tags to include `wixcode` because `wix` is Windows Installer XML and not related. — vre, Apr 17 '18 at 12:27
@Paulie_D — The question isn't asking for any of those. It is a simple "How can I achieve X using this tool?" question. — Quentin, Apr 17 '18 at 15:38
@Quentin Meh! : ) It was that or another reason. this one seemed the most appropriate. — Paulie_D, Apr 17 '18 at 15:41
I've successfully used the method described by [Gray](https://stackoverflow.com/questions/49877549/how-to-add-custom-css-in-wix-website/54226844#answer-51219109). 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. — Daniel Gurtner, Jan 16 '19 at 23:19

score 39 · Accepted Answer · edited Mar 05 '20 at 23:19

39

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

Go to your site's dashboard.
Click Manage Website on the left.
Click Tracking & Analytics.
Click + New Tool **and select **Custom from the dropdown.
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
Click Apply.

edited Mar 05 '20 at 23:19

rinogo

8,491
12
61
102

answered Jul 07 '18 at 00:58

Gray Ayer

997
1
9
17

2

Thank you! Everybody else says you can't do this...yet you found a way. – user2662680 Apr 08 '19 at 14:14
1

May this method never come to the full attention of the Wix Dream Ruiners – rinogo Mar 05 '20 at 23:43
Are these features available with the free plan? – Probably Sep 12 '20 at 09:21
@Probably - Not sure. Try it out and let us know :) – Gray Ayer Oct 25 '20 at 23:01
1

@Probably this feature isn't available for Free Plan – Le Quang Nhan Feb 19 '21 at 07:04
8

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 – Camaleo Mar 02 '21 at 07:32
@Camaleo I saw your comment too late. lol. I had to guess my way through it. Your answer should be the accepted one – crazy_abdul Jul 18 '21 at 15:51
1

@crazy_abdul no problem! BTW I'm not using WIX anymore :) – Camaleo Jul 19 '21 at 16:59

score 9 · Answer 2 · answered Jul 03 '21 at 11:42

9

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.

answered Jul 03 '21 at 11:42

Navaneeta Hridya

91
1
2

great answer. Probably this is what one needs right now – Karue Benson Karue Aug 16 '21 at 02:33
Now it won't work unless I pay to become a premium member. Any other suggestion? – Gedanggoreng Dec 20 '22 at 02:01

score 7 · Answer 3 · answered Feb 08 '22 at 02:46

7

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

answered Feb 08 '22 at 02:46

Renata Hernández

71
1
3

Now it won't work unless I pay to become a premium member. Any other suggestion? – Gedanggoreng Dec 20 '22 at 02:00
Its working fine for me. Read steps carefully and go step by step. It will work 100%. – Chirag Rajput Aug 18 '23 at 09:53

score 2 · Answer 4 · edited Jul 14 '19 at 14:11

2

Click Add on the left in the editor.
Click More → Embeds.
Drag the HTML iframe to the site.
Click your iframe and click Edit Code.
Then type:
```
<style>
 /* CSS Code */
</style>
```

edited Jul 14 '19 at 14:11

double-beep

5,031
17
33
41

answered Jul 14 '19 at 13:52

Garry

49
6

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. – Matt Wilson Nov 06 '19 at 19:39
1

Style definitions in iframes only affect the iframe in which they appear and not the parent page. – corwin.amber Jun 19 '22 at 09:44

score 1 · Answer 5 · answered Apr 16 '21 at 07:39

Follow these steps to add CSS in Wix.

Go to your site’s dashboard.
Click Manage Website on the left.
Click Tracking & Analytics.
Click + New Tool **and select **Custom from the dropdown.
Set up your custom code:
Enter your custom code.
Select the relevant domain. Note: This option will appear only if you have multiple domains.
Enter a name for your custom code.
Add Code to Pages: Select which pages to add your code to:

If you need more help with Wix Web Development visit wix.com/forum.

score 1 · Answer 6 · edited Sep 05 '21 at 17:58

1

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>

edited Sep 05 '21 at 17:58

lejlun

4,140
2
15
31

answered Sep 05 '21 at 16:54

Lalababa

11
1

score 0 · Answer 7 · answered Jul 18 '21 at 15:55

0

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

The following steps work with the new UI:

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

answered Jul 18 '21 at 15:55

crazy_abdul

503
6
12

Now it won't work unless I pay to become a premium member. Any other suggestion? – Gedanggoreng Dec 20 '22 at 02:01

score 0 · Answer 8 · answered Jul 27 '21 at 18:16

0

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

answered Jul 27 '21 at 18:16

P R

1

score -1 · Answer 9 · answered Jul 21 '21 at 12:03

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>

score -5 · Answer 10 · answered Apr 17 '18 at 15:40

-5

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

ref. other ref.

answered Apr 17 '18 at 15:40

Quentin

914,110
126
1,211
1,335

How to add custom css in wix website

10 Answers10

Linked