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.
How do I work with custom CSS?
Your web browser provides you with an inspector or developer tools pane which you can use to select items in your page layout as you view your site. Using tools like these, you can analyze the HTML markup and find the IDs and classes which ProPhoto gives to the items in your layout. Check your web browser help info, if you can’t find this tool.
Using the browser’s tools, you can select an item to find the HTML tag, CSS class, or ID to refer to it in your CSS code.
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:
Again, avoid using 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.
