Custom Code for Dynamic Pages from CMS

Ask the community
, , , ,
1

Question:
How would one add Custom Code for dynamic pages created from CMS?

Product:
Wix Editor

What are you trying to achieve:
I would like to add custom CSS to headers of dynamic pages (for specificity, I’ll refer to them as My-Dynamic Page) via Wix Settings > Custom Code.

Just to be clear, my site has a home page, a store page and a My-Dynamic Page(s), which maps out a CMS collection of categories into separate pages. I am trying to add custom CSS only to all of these My-Dynamic Pages.

What have you already tried:
Under Wix Settings > Custom Code, I have tried selecting the option to apply code only to My-Dynamic Page. However, this doesn’t work on my Live site and when inspecting the page HTML, the custom code has not been added to the <head>, where I have specified.

In comparison, I have added a different custom CSS code for my store page (and only my store page) and the CSS does appear in my store page’s HTML <head>.

If I set the custom code to be applied to All pages, the custom CSS then appears on my My-Dynamic Pages. Sadly, this won’t work for me as I cannot have this particular custom CSS affect my other pages, as they use similar elements.

More frustratingly, if I set this custom CSS to apply to My-Dynamic Pages as well as another static page, say my Home page, the custom CSS is only applied to my Home page, where I do not want it.

Additional information:
This issue is regardless of what code I put in. I could declare that my custom CSS code be an empty <style></style>, it still does get added into the HTML <head> if set to All pages, just not if it is set only to apply on My-Dynamic Pages.

2

Hi Justinn

This isn’t possible with dynamic Pages.

3

That’s unfortunate to hear, would’ve really loved to do something creative with custom code while making use of CMS. Guess I’ll have to work around this.

4

Isn’t this already a possible solution?
Let’s say, you got your CSS working on all pages, but you do not want the css-styles to work on specific pages → so why not adding into your HTML-CODE some code-parts, which would look for the current url of the current page?

Something like…

var currentUrl = window.location.href;
console.log(currentUrl);

Giving it an INTERVAL and let’s go.

Surely there is a way of how to break the boundaries. :wink:

1 Like
5

Now that you mention it, I had myself convinced I was writing a .css file when in actuality the Custom Code pages are accepting HTML instead.

I think I’ll try to use a JS script to do as you said, check URL, then find and add classes to the elements I was targeting in my CSS instead, thanks for the suggestion!

EDIT: Thanks to @russian-dima’s suggestion, I managed to style the elements directly via JS! Also combined this to have my dynamic pages postMessage() for my CustomCode to detect, so that I do not have to hardcode the URLs.

1 Like