How to work with custom CSS

If you’re already familiar with CSS or interested in learning, you’ll be happy to know that Ion fully supports adding your own custom CSS to your creatives. Of course, you have the ability to modify your theme’s CSS; but, if you are just looking to add a simple one time class or inline styling to one of your elements, adding CSS directly to your creative might be the way to go.

Where to add CSS in Creative Studio:

@media screen and (max-width: 767px) {
h1 {font-size: 1.2em;}
}

/*MEDIUM SCREENS*/
@media screen and (max-width: 1199px) {
}

/*SMALL SCREENS*/
@media screen and (max-width: 991px) {
}

/*EXTRA SMALL SCREENS*/
@media screen and (max-width: 767px) {
}

Adding Classes and Inline Styles to an Element on the Page

Once you’ve written some classes for the page and/or creative, you can apply them to specific elements. To do this, you’ll want to select the element on the canvas, then locate the “Custom” dropdown at the bottom of the edit panel. Here you can add CSS Classes that you’ve written in the page tab to your elements or you can write inline styles for the element.

Modifying Ion CSS Classes (Examples)

Hamburger Menu

You might be interested in modifying classes that have already been written into Ion or your theme for a specific case. To do this, you’ll have to identify the name of the class and overwrite it. We can find the name of the class using Chrome’s (or any other browser) inspect tool. In this case we will be looking to modify the color of the hamburger menu so we need to find out the class that is causing our hamburger menu to be white.

First, we open up the preview of our creative, locate the element, right click, and inspect. After clicking to inspect the element, we’ll see the HTML and CSS for the page pop up.

In this example, we can see that the class applied to this element is “.ixp-nav .ixp-nav-toggle .ixp-nav-icon-bar”. We can even test this within Chrome’s inspect tool by changing the background color and seeing if it modifies the actual page.

Once we have the name of the class we can go back to Creative Studio and modify it in the page or creative CSS. In this case, we want the hamburger menu to change creative-wide.

Immediately we see the color of the hamburger menu change!

Buttons

Your theme comes with many button presets; but you might find yourself in a situation where you want to modify the buttons on your page. You could do this using inline styling if it’s only one button or you could change all of the buttons creative wide in the Creative CSS editor under the page tab.

To do this, go to the page tab and select the button. Under custom in the edit panel, you’ll see a few CSS classes added to the button. In our case we’ll adjust button-a in order to change all the buttons on the page with that class. If we wanted to change only the large buttons, we could alter button-large.

Once you’ve found the button class name, you can go to the page panel and edit the creative or page CSS. We modify the button-a class by typing:

.button-a {
   /* styles to change */
  background-color: red;
  border-color: red;
  border-radius: 25px;
  color: white;
}

In our example, we’ll change the background color and border. Additionally, we might want to change the hover color for our button. We can do this by typing:

.button-a:hover {
  /* styles to change */
  background-color: maroon;
  border-color: maroon;
  border-radius: 25px;
  color: grey;
}

Here we can specify what the button should look like when the user hovers over it.

You should see the change take effect in Creative Studio after hitting OK.

Placeholder Text in Forms

To change your placeholder text on a form, you’ll want to add the following to your creative or page CSS.

.ixp-component-form-style-brand-brand .ixp-component-dropdown-inherit .select2-default .select2-chosen {
   color: #222;
}

.ixp-component-form-style-brand-brand .ixp-component-textbox-inherit .ixp-component-textbox-input:-moz-placeholder {
   color: #222;
}

.ixp-component-form-style-brand-brand .ixp-component-textbox-inherit .ixp-component-textbox-input::-moz-placeholder {
   color: #222;
}

.ixp-component-form-style-brand-brand .ixp-component-textbox-inherit .ixp-component-textbox-input::-webkit-input-placeholder {
   color: #222;
}

.ixp-component-form-style-brand-brand .ixp-component-textbox-inherit .ixp-component-textbox-input:-ms-input-placeholder {
   color: #222;
}

.ixp-component-form-style-brand-brand .ixp-component-textbox-inherit .ixp-component-textbox-input::input-placeholder {
   color: #222;
}

If you have any questions, please contact us on [email protected].