Styling the Sun Template

Paragraph/Graphic Styles

Sun has predefined paragraph and graphic styles that can be customized and updated to apply the style across the entire template.
Click here to learn how to customize Paragraph styles. 
Click here to learn how to customize Graphic styles.
Click here if your Paragraph/Graphic style isn’t working.



Editing a swatch in a template will automatically update that color across the entire template which greatly increases your workflow. 
Here’s a step-by-step guide to changing color swatches:
Step One
Go to the Swatch panel.
Step Two
Right-click on the color you want to change and select Swatch Options
Step Three
Pick your color and select OK. You can also rename the color if desired.
For more information on editing color swatches, click here.



State Buttons
State buttons are used throughout the Sun template. They are used to combine different objects to create a unified hover effect on the text and image.
Step One
Go to the Widgets Library > Buttons > State Button. Drag the state button onto the page.
Step Two
Right-click on the state button and select Clear All Styling. Repeat this and select Clear Widget Contents. Now it’s ready for full customization.
Step Three
Adjust the size of your state button as desired and drag and drop any text, images, or objects that you want to include in the state button.
Rollover Effects
To customize the rollover effects, select the state button, go to the upper left and select State Button: Normal. Now you can select the state that you want to customize. You can do some of the following:
  • Change the opacity of individual objects
  • Change the font color, size, or spacing
  • Enable a fade transition


Here’s a great video (5 minutes) by Adobe Muse that shows how to use State Buttons with rollover effects. 



The Sun template has a pre-designed form for your Contact page.
Customizing the Contact Form
    1. Select the form group.
    2. Click the blue arrow to open the forms’ options panel.
    3. Customize the form options.
    4. Use the Fill and Stroke panel to customize the colors of your form.
Styling Form States
You can customize the following states of your forms:
  • Empty- the Normal state of your form when empty.
  • Non-Empty- the Normal state of your form when filled in.
  • Rollover- the state of your form when being hovered over.
  • Focus- the state of your form when selected.
  • Error- the state of your form when something has gone wrong.
Select the form field and the state you’d like to change in the States Panel and customize each field’s state using the Fill and Stroke panel. 


Google Maps Styler

To add your own icon to the map pin, go to the Google Maps Styler option panel and change the image under the Custom Marker tab. 
Have more questions? Submit a request