ProPhoto provides controls for nearly every aspect of your design. If you aren’t able to achieve the look you need using ProPhoto settings, search this site and look for settings you can use to get the styling you need. Often, it makes the most sense to use a child template when you need to create variations of your design for certain pages.
Custom CSS can be complex, and we typically aren’t able to provide help with custom code. But we’ve provided some complimentary help below if you’re feeling cavalier and want to brave the world of website coding with CSS styling.
Related to CSS is SASS, which can be added to any specific block, row or column. Both are explained below.
How do I work with custom CSS/SASS?
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/SASS code.
Entering CSS rules
There are two places in ProPhoto where you can enter CSS. The Template item is the top-level item in the template layout, so code you enter in “ProPhoto > Customizer > Layout > Template > Advanced” will apply to any matching items in the layout for that template.
You can paste full CSS code into the Template level Custom CSS box. This code travels with the template and can be removed or changed in each one. It is included in design exports like any other setting.
Custom CSS added to “ProPhoto > Settings > Advanced > Custom Code > Site custom css” exists above both the template and design level.
It does not travel with designs so be used very sparingly and only for things you know you want to apply no matter what design or template is active.
Entering SASS rules
SASS is a powerful CSS preprocessor that that helps developers write consistent CSS and do it more quickly. We use it here to create the CSS rules that go into the stylesheets that apply to your design. All you need to know about SASS when working on your design is that it’s just like a normal CSS rule but without the selector. The property and value is all that is needed (although you can add a property and value).
Each block, row, and column has a custom SASS box. The rule there applies only to that particular block, row or column. For example, let’s say I want to increase the top and bottom margin of a specific row because the provided padding settings are not working for me. I go to “ProPhoto > Customizer > Layout > Row > Row Appearance > Row custom SASS” and paste my properties and values as shown below.
This is not an advanced usage of SASS but it is the type of usage that will be most common. 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/SASS code whenever possible. You might decide to contact us before trying to use CSS/SASS code, just to make sure you haven’t missed an option somewhere in ProPhoto.
