CSS and HTML
Cargo offers visual interfaces to modify everything on a site, but for those that want to get more specific and work directly with code, it’s possible to do so in a number of ways.
CSS Editor
Cargo sites contain a CSS Editor where you can modify every element on a site, as well as add your own selectors and classes. Click on the “</>” icon at the bottom of Site Settings. When making changes, you’ll see your site update in real-time.
HTML
While it’s not possible to access the underlying HTML that runs a Cargo site, you can add your own custom scripts to include new functionality. Click on the “</>” icon at the bottom of Site Settings, then on the “HTML” tab. When making changes, click the “Update” button at the top to apply and preview.
Code View
Each page has a “Code View” menu, which contains the HTML that renders your page content. Here you can make specific changes to the HTML code as well as add and remove code and content. Changes here do not update in real-time: click the “Update” button to see them, or close to apply. When a page has no content added to it, Code View will be empty.
Page-specific CSS
To add CSS that applies to a specific page only, click on the “CSS” tab in the Code View menu (top menu bar). Note that any selectors you add specific to this page need to be prepended with the Page ID, which looks like this: [id="A1247988350"]. The Page ID can be found in the browser’s address bar while editing that page. For example: to target the bodycopy selector for a single page, create this selector:
[id="A1247988350"] bodycopy {
font-weight: 600;
}
CSS Snippets
Various functions throughout the interface have a “</>” icon at the bottom, where you can quickly make changes to the default behavior. These “snippet windows” contain only the code relevant to the respective function; to access the full CSS, enter the CSS Editor.