Use Custom HTML-, CSS- and JavaScript Code

The CMS offers a powerful (S)CSS editor that lets you customize your website in every aspect. In this article you learn everything about the editor.

Watch a video...

 

...or read about it

Tabs

(S)CSS

Here you can add your own CSS styles that will be applied to the website. If you are using presets they will be included here and you can add your overrides into the respective sections. You can (and should) use any variables that are defined in the boilerplate or config.

The CMS also understands your CSS code. You can locate the CSS rules that apply to an element on your website by selecting an element and pressing [Ctrl + Alt + C]. This opens the CSS editor with the lines highlighted that apply to your chosen element(s).

You can also use the Optimize button to find unused rules to clean up your code.

Paste File will open the file manager and the path of any file you choose will be pasted wherever the cursor is at that moment.

Color picker opens your system's color picker panel which you can use to select colors.

Using ID & Classes in Sitejet

Addressing elements in Sitejet via CSS is achieved in several ways. 

Note, that each and every container element in Sitejet has got its own unique ID. They are always built like this: #ed-xxxxxx . You can find a particular ID either by selecting an element and looking at the breadcrumb at the bottom or by opening the element's settings by double-clicking or pressing [ENTER] once selected. In the element settings on the left side of the screen navigate to ID & Class, where you can see the ID and classes. IDs cannot be altered or set in Sitejet's container-DIVs. However, you can assign an ID to its child-elements (e.g. in the "Button (a)" Tab in the image above).

You can put as many classes as you need in there as well.

Using classes:

Classes are the best way to style any element and maintaining clean code which can be understood by other developers or be used in other projects. 

1. You can access classes of any element by double-clicking the desired element or selecting it and pressing [ENTER]. This will open the element's settings to the left.

2. Navigate to ID & Class to reveal multiple tabs, most of the time starting with "Element (div)" as the parent container, followed by subsequent child-elements. You can attribute classes to any of those elements and as many classes as you need. Note that each parent container does have a standard class set already. Those are generic classes like ".ed-button", ".ed-headline", ".ed-container",etc...

3. You can add more classes to them to achieve higher specification in your CSS. See more about CSS specifications.


Tipp: You can select multiple elements by holding [SHIFT] while left clicking, or all elements by pressing [CTRL] + [A] . This way you can attribute classes and animations to more than one element at the time.


Moving over to our CSS window, which you can access by clicking on the CSS3-Icon in the top-right toolbar or pressing [CTRL] + [ALT] + C.

4. Here you can apply stylings to your set classes (and also to standard classes like .ed-button). To achieve a higher specification in your CSS you can address multiple classes in a parent-to-child direction.


Example: Lets demonstrate how CSS works in combination with one of our elements.

1. In this simple example we would like to style a headline element exactly the same as our button element. You can add an element in a couple of ways:

  1. Click "+ Add content" in the top-left toolbar (or press [CTRL] + [ENTER], find the Elements tab and choose Headline. Double-click it to paste it into the main editor after your active selection (or at the bottom of the page if nothing is selected) or Drag & Drop it into the desired position on the main editor.
  2. Right-click anywhere in the main editor, hover over "Add element" in the context menu and click Headline in the submenu. This will paste the element after the active selection in the main editor. If nothing is active it will be inserted after the parent container in which the right-click occured.
  3. Press [CTRL] + [1] to paste a Headline element into the main editor after your active selection (or at the bottom of the page if nothing is selected).

2. You can adjust the level of importance of the headline here. We chose 3rd level because we will place the headline after an <h2> Headline. 

3. In the tab Link we can add an anchor to our headline. This way we can link it to other pages, URLs, files etc. We will need this <a> in order to emulate a button functionality.

4. In Markup & Style we will place our custom class. Lets call it pseudo-button. Now we are all set up with our element.

5. In the CSS window on the right we find an existing styling for buttons at line 27. No need to do it all over again, we simply use this style. In order to make our headline element look like the button element above we simply add our class .pseudo-button after the .ed-button class, separated with a comma. This allows the anchor tag in our headline element to be styled exactly like the one in the button element. And there it is!


Using IDs:

Using IDs to style a certain element will give you higher specification than using classes. That means that stylings that are assigned to certain classes will be overruled by any styling that was assigned to this ID.


For example: This button element consists of a container-element and an anchor. The parent container got ID #ed-5877801 and a standard class .ed-button . Any stylings that were being made to .ed-button will be overruled by any styling that is being done to #ed-5877801 . 


Using Sitejet, we advise against this method. Consider using a template you created or copying an entire project because it fits your new requirements; since new IDs will be distributed to each element. Hence your stylings will be useless. Still, there might be circumstances where only one particular element needs a specific styling, so you can use IDs at your own risk. 

IDs do have another purpose when using animations though.

You can mark and copy IDs from the "Markup & Styles" input or right-click any element and choose "Copy element ID" or [Ctrl] + [i].

CUSTOM CODE

Many tools and plugins are offered from third party developers and as long as they provide an embed code, you can use all of them in Sitejet! In general you can add custom/third-party code in two different ways: With an HTML element or through the respective tabs on the right side of the editor after clicking "<> code". The latter is "global" while the element-method effects only this specific page.

Integrate code snippets in Sitejet with HTML-elements

Simply create an HTML element and paste the embed code inside, like in the following clip.

If your snippet contains a <script> tag, keep in mind that it will not be executed inside the CMS. Please open the website (for example by clicking the screenshot on the website list) to test its functionality.

Editor-tabs after clicking "<> code"

JavaScript

Here you can add custom JavaScript to your website. jQuery is loaded automatically, so you can use it in your JavaScript.

Pixels, Tracking-Code and the like

Embedding Google Analytics, among other code snippets, in Sitejet is really easy. Anything that needs to go into the webpage's <head> can be implemented in our "Website Settings"  window ([CTRL + ALT] + [E]) under the SEO/Meta Tab. 

As the name suggests you can enter all the relevant Meta information about your project here, be it Title, Keywords or a short Description. More information on SEO will be covered in another article.

Our main point of interest is the textarea " Meta tags:". Here we can paste in the Google Analytics Code which can be found in your Google Analytics dashboard under Management > Tracking-Information > Tracking-Code.

Make sure to get the TRACKING_ID from your Google Analytics Dashboard and to complement your privacy declaration accordingly.

HTML

Usually you only see the placeholder {{content}} here. Anything in here basically goes inside the <body> tag of the website This placeholder represents the whole content that you can manage through the CMS. If necessary you can add your own HTML around this placeholder or add some third-party snippets here.

Config

Here you can configure your website by defining variables for colors, font-sizes, features etc. All presets that are used on your website are provided as mixins that will be inserted by the CMS to the config automatically. Keep in mind, that deleting any preset element in the editor will not automatically remove any inserted CSS or JS. If you're not familiar with CSS - don't worry! Almost all the values inside here can be edited through theme- and preset-settings in the corresponding preset or the under Website > Theme Settings or when pressing [CTRL + ALT + Y], or when using the Fonts tool.

Boilerplate (read-only)

Interested seeing what's under the hood of your website? Have a look here.

Keeping it clean

Typing code quickly can get quite messy at times. Simply press [Ctrl + I] to auto format all the code in the active window. This works for CSS, JS as well as HTML.

Emmet

All editors are Emmet-ready, which can be triggered by pressing [Tab].

If you don't know Emmet you should definitely check it out. You can save a lot of time typing through Emmet. For example:

In CSS:

m0 -> TAB -> margin: 0;
p1 -> TAB -> padding: 1px;
h80px -> TAB -> height: 80px;
c#333 -> TAB -> color: #333;
fs -> TAB -> font-size: ;
! -> !important;

In HTML:

ul>li.test*3 -> TAB ->
<ul>
<li class="test"></li>
<li class="test"></li>
<li class="test"></li>
</ul><br>

See the complete documentation here:  http://emmet.io/

Still need help? Contact Us Contact Us