Custom css and js doesnt work

(0) Share

Report

Posted on by romankorchak2

125

Hi All

I have added a button and some custom css and js for it but it doesnt work 😞
new button

and thats some custom css and js

But neither css or js not applied, button doest get round border and blue background and nothing happens when I click the button

Any ideas why its not working?

Thanks

Categories:

Design & build

I have the same question (0)

All responses (3)

Answers (1)

Squire4Hire 125 on at

Like (0)

Report

Be aware that custom css will not take precedence over portalbasictheme.css - which is the css package selected in the Styling section of your site. In order to bypass this, you'll need to use the !important qualifier on any css identifiers that may be implemented by the theme.

If you want all buttons to have a border radius, I suggest you update the value in the theme settings.

As for the JavaScript, try moving it out of the Custom Javascript section for that page and into a <script></script> tag at the bottom of your HTML. It might be easier to debug there.

Was this reply helpful? Yes No
Fubar 8,350 Super User 2025 Season 2 on at

Like (0)

Report
Make sure you have synced your portal and view/preview the site itself (after refreshing the web page)

For JavaScript always put it in a jQuery document.ready block (otherwise the script can run before the object exists on the page, and then it does nothing).

// A $( document ).ready() block. $( document ).ready(function() { console.log( "ready!" ); });

For CSS preview/view the site using the Browser Console/Debugger (F12) and inspect the DOM node in question to see if your CSS is being overwritten (will show as stuck through). You browser will also enforce CSS precedence (technically called 'specificity'), if the dom node has a style="..." that is overwriting yours about all you can do is use Javascript/JQuery to change it, if it is another CSS class and it is not marked important (or even if it is) then you can try being more specific eg. use id rather than class, or use the tag type and nested tags in your CSS class definition (I read a good article on the web with examples last week ~~but can't find it~~ https://uxengineer.com/css-specificity-avoid-important-css/ ).

Was this reply helpful? Yes No
Verified answer

romankorchak2 125 on at

Like (0)

Report

I found that any custom javascript or css doesnt apply if it goes to Web Page->Advanced
but only applied if added to Web Page -> Content -> Advanced

Was this reply helpful? Yes No