CSS
      Back to home
      1. Knowledge Base
      2. Page Components
      3. CSS

      CSS Editing

      Inside the code editor you can create custom CSS for your page component

      CSS Editor

      To open the CSS editor simply click the CSS tab on top of the code editor bar.

      Note: If there hasn't been added CSS, a button Activate will show up.

      The CSS that we see here is linked to the first design panel. These panels are used in the design editor to style components without coding.

      A Design Panel is a way for non-coding designers to manipulate the CSS and JavaScript of the components. 

      CSS editing

      Any CSS you add here will be added to your website. Make sure to use unique classes and/or use the [:compid:] or [:elID:] system variable.

      This variable is a unique id given by the platform for your component.

      Note: You can use .s-comp[:compid:] when editing CSS of a page component. For layout components we can use: .s-laycomp[:elID:] 

      CSS Options

      We can open the css options by clicking on the three dots. This will show the following options:

      Open panel: You can open the design panel, this will open in the left sidebar
      Edit JSON panel: every design panel is a JSON structure, and can be edited.
      Beautify Code: formats your code to be more structured and readable.