Customising HTML and CSS using Google Tag Manager

Owned by Oliver Chapple
Last updated: Feb 18, 2022
2 min read

If you really need to customise the HTML and or CSS and you have someone who has some advanced skills in this area, then it's possible to customise / override the Webdadi Website code quickly and easily using GTM. You can preview any changes before publishing them as well, so you have peace of mind that you won’t break your Website!

In order to create Custom CSS using GTM here’s what you should do.

  1. Create a new Tag, name it and choose the Tag Type Custom HTML

  2. The following code is an example that you would type into GTM’s Tag HTML pane:

    <style id="custom-styles"> .cms-page-header-image+.cms-content { margin-top: 0; background-color: bisque; } </style>

     

  3. Save

  4. Add a Trigger that fires only for a specific page to run your CSS or add a CSS Selector where if you want to override or include your new CSS. So you can trigger your CSS to fire on a specific Page or for a specific CSS Selector event like a Click to execute your CSS.

  5. Save your Trigger and now Preview your work

If you want to copy some CSS that you have already created and tried out using Chome’s dev tools then all you need do is

  1. first Select the Element where you have some custom CSS.

  2. Move your mouse over to the dev tools ‘Styles’ box that contains your CSS element styles for the selected element, Right Click the element name and select Copy Rule.
    Paste the now copied CSS rule between the <style></style> tags above.

 

If you simply want to add pure HTML like a new DIV to a page on your Website or even to an item, in order to perhaps trigger a third-party code snippet, or to work with your new CSS, then you should add your HTML to the page using Webdadi’s VIA CMS. If the DIV is blank or empty, just remember to add a space using the HTML &nbsp; within the HTML block, so that the HTML is not ignored or removed due to there not being any content. If you want your HTML to specifically be added using javascript or jQuery then you can do this also using a GTM custom HTML Tag, putting your code between <script></script> tags.