Utilizing the UGC Developer Tools, such as Custom CSS, and JavaScript may seem intimidating, but it doesn't have to be! In this article, we are going to walk through some basic developer concepts and tools, as well as some common customizations.

Forking

The Fork button is available within all of our code editors. When forking, the code editors will essentially auto-populate the basic template, or skeleton, of the code needed for the widget/event screen you're editing.

Not only will this expedite the entire customization process, but it will also give you a great idea of what is editable. But, as I'm sure you've guessed, you can always edit more!

Browser Console

The browser console will be your best friend throughout this whole process. Utilizing the browser console will allow you to inspect the current HTML of a widget/event screen, making it much easier to edit specific elements on the fly. Depending on your browser, you may need to enable this before it becomes available.

To find specific elements of a display, you will right-click those elements, and select "Inspect Element" (or something similar). This will reveal the Developer Console, and highlight the HTML of the selected element.

To the right, you should see the CSS that is applied to the element that is currently highlighted. Here, you can make changes, play around, and see how your changes affect the display, in real-time! Once you're happy with any changes, you can copy/paste the changes into the Stackla Code Editors.

Common Customizations

Hiding elements

.tile-timestamp {
   display: none; 
}

.tile-caption {
   display: none; 
}

As you can see from the above code, you will want to utilize display: none; to hide an element.

Changing the "Load More" button/hover

.js-load-more {
    background: red; 
    border: none; 
}

.js-load-more:hover {
    background: orange; 
    border: 1px solid black; 
}

Editing Tile Borders

.tile {
    border: solid 1px #e5e5e5;
    border-radius: 12px;
}

For any further questions or queries, please send an email to support@nosto.com and our support team will get back to you.