Adding custom CSS code

The great thing about ProPhoto is that it allows you to customize your site without any coding. However, once in a great while there may be something you can't do with the ProPhoto options and so some custom CSS coding is required. While we can't really provide any technical support for custom CSS coding ourselves, the ProPhoto Visual Builder does give you a number of options for adding CSS code. CSS can be applied at the design, layout, block, row or column level, which allows for a lot of flexibility and control. Below is some complimentary help if you're feeling cavalier and want to brave the world of website coding with CSS styling.

Entering CSS rules

Design level custom CSS

If you have custom CSS code that you would like to apply to your entire design, it can be added in the "ProPhoto > Settings > Advanced > Custom Code" area of the Visual Builder:

Be aware that any CSS added here will be applied to all layouts within the design.

Layout level custom CSS

If you have CSS code that you would like to use for a specific layout, you can do so by going to the Custom CSS field in the layout's Appearance settings area. See here:

Block, row and column level custom CSS

For more granular control, custom CSS can also be applied directly to blocks, rows or columns. When you click to edit a block, you can use the block, row or column's Appearance settings to enter your CSS code.

Any CSS code entered for a block/row/column will apply only to that particular block/row/column. For more information on how to create CSS rules search online - there are many great resources for learning how to work with CSS code, including:

• W3 Schools: CSS

Again, avoid using custom CSS code whenever possible. You might decide to contact us before trying to use CSS code, just to make sure you haven't missed an option somewhere in ProPhoto.