Now that we have the empty framework for our Adobe Portfolio set up, our next task is to decide on a theme template. Let's click the Switch Themes icon on the left to see the list of predesigned themes. At the time of this writing, we have eight themes. Under each theme is a link to view a live example. Each theme has its own style and features. For example, six of the themes have a top navigation menu and two have the menu on the left. Only two themes, Marta and Lukas, have a sticky menu. I really like a menu that stays at the top of the page as the viewer scrolls down the page. So let's use the Marta theme for this tutorial.

To choose the Marta theme, click the Continue Editing button (see screenshot). This will set Marta as our theme. As you can see, the site has changed to include the default settings for Marta, including the orange navigation and masthead (see screenshot). We will keep the navigation but not the masthead.

1. Go to the Floating Remote and open the This Gallery tab (see screenshot).
   
   
2. Click the toggle button to turn off the Masthead.
   
   Our next step is to set the Site-Wide settings, this menu is also in the Floating Remote.
   
   
3. Open the Site-Wide tab (see screenshot).
   
   As you can see, we have controls for the Background color/image, Colors and Fonts. We also can toggle the Navigation and Footer on/off. Finally, we have settings for the Website Container. Let's work our way downward.
   
   

   Background, Colors and Font

4. Click the Background, Colors and Font link to open the panel (see screenshot).
   
   On this panel, we can set the background color or upload a background image. We can also set the font and colors. Note that these are global style settings and are for all pages of your portfolio.
   
   
5. Select the Background tab on the top left and the Image & Color tab on the right.
   
   
6. To set a background color, check the box next to Include Background Color and set the color of your choice in the Color Picker (see screenshot).
   
   
7. To upload a background image, click the Upload Image icon and upload a jpeg, jpg, png or gif.
   
   
8. Crop the image as needed and/or use the Scale slider under the image to scale the image.
   
   
9. Click the Image Options tab and set the options as needed (see screenshot). These settings will control how the background image covers the webpage.
   
   
10. Click the Colors & Font link to open that panel.
    
    As you can see, we have three color schemes from which to choose (see screenshot). Click on the first color box for each theme to see a live preview of those colors on your portfolio.
    
    
11. Click on the color box for the color scheme of your choice.
    
    In the Fonts section, we can set the font for our webpages. Later, we will customize the decorative font for the navigational links, titles and etc.
    
    We have the option to choose from a few standard fonts. If you want to use a special Typekit font, click the Manage Web Fonts link.
    
    
12. On the All Typekit Fonts tab, use the search box to find your font and add it to your My Typekit Fonts (see screenshot). Click Done to close the pop up box and go back to Colors & Font. You should see your new font listed in the font list.
    
    
13. Select your new font from the list and click Done.
    
    

    Website Container

14. Open the Website Container panel (see screenshot).
    
    As you can see, we can set the width of the page content, left/right margins, the maximum width of the webpage and the content alignment. Let's keep the defaults.
    
    

In the next tutorial, we will finish setting the Site-Wide options.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.