View our Custom CSS Guide



One of the great things about your Conferences i/o app is that it's entirely customizable.  You can change colors, add logos, and even change the typeface seen throughout your app.  Even without a HTML or CSS expert in your organization, it's easy to change the look of your app to better suit your preferences.  To learn about adding logos and branding your app, click here.



Custom CSS


Adding Custom CSS to your Conferences i/o app is entirely optional.  If you don't feel comfortable with making changes to your app then there is no pressure to do so.  If you are looking to further customize your app, you can create a lot of visual changes with only a few lines of code.


To make changes to your CSS, make sure you are signed in as an Admin.

   Go into your Admin settings 

 •  Under App Administration, click 'Branding & Custom CSS'

 •  Scroll down to the first yellow box and type in your Custom CSS (see guide below)

 •  Click save at the bottom of the page and review your changes




The look that is shown in the example above was accomplished with only a few changes and a very small amount of code.



Changing the background color of the Standard Header Image


Colors are represented with HEX or RGB codes.  Use a tool (ColorSnapper for Mac, ColorPix for Windows) if you do not know the code to your desired color. A suggested website tool for finding different color hex codes can be found on the w3schools.com site.


header {

    background: #YourColorCodeHere;

}


Copy and paste this line of code into the CSS box to change the Standard Header Image background color. 

Note: this line of code will not change the background color of an image you have uploaded.  We recommend matching the header background to the background color in your Standard Header Image to create a fluid look.  


Changing the background color of the Session Headers

Colors are represented with HEX or RGB codes.  Use a tool (ColorSnapper for Mac, ColorPix for Windows) if you do not know the code to your desired color.

#main .link-list h1 {
    background: #YourColorCodeHere;
}

Copy and paste this line of code into the CSS box to change to the color of the Session Headers, only applicable to multi-session apps.

Note: We recommend using the same color used in your Standard Header Image for a clean look (if not white). If the Standard Header Image is white, take a color used in the comapny logo and apply that to the Session Headers color.




There is a lot more you can do in our Custom CSS Guide.