How to Edit the Themes in SmugMug


Editing your themes in SmugMug, which is a premium photo-sharing and hosting company, is an option only available for users of the service's Power and Pro accounts. The Basic account allows a user to alter the layout of the SmugMug site, but a user can't directly edit the theme. SmugMug Power and Pro accounts allow you to edit your theme using the Easy Customizer tool, which requires no prior knowledge of Web code. The Power and Pro accounts also allow you to edit via the Advanced Customizer tool, which allows you to insert custom HTML, JavaScript and CSS or Cascading Styling Sheets.

Things You'll Need

  • Pro or Power SmugMug Account

Editing Via Easy Customizer

  • Click on the "Tools" menu bar option, which displays a "hammer" icon upon the menu bar. Select "Easy Customizer" with your cursor.

  • Click on the "Basic Appearance" option located on the right, and click on either the "Dark" or "Light" button to display your site with a dark or white background, respectively.

  • Click on the "Browser" option, and type in a name for your SmugMug website (which will be displayed when viewed upon a search engine) in the "Page Title" field. Click on the "Favicon" field and click on "Choose Image" to upload a custom Favicon (the latter which will be displayed upon browser tabs).

  • Click on the "Header" option. In the "Custom Banner" menu option, select "Choose Image" to upload a custom header image to your SmugMug website or select "Text" to display text instead. If you select "Text," type in a name for your site in the "Text" field, and adjust the color, alignment and font of your text in the appropriate fields underneath.

  • Check the box next to "Add a Navigation bar" in the "Navigation Bar" section, which is located underneath the "Custom Banner" section, to insert a custom navigation bar upon your website.

  • Select "Above," "Below," "To the left of" or "To the right of" in the "my banner" menu option to select where the navigation bar appears in relation towards your custom banner.

  • Click on the "Background" option, and then check mark the "use custom background" box to edit or change the background image of your theme. In the "Type" field, select "Color" to choose a specific background color for your theme or "Choose Image" to insert a picture for the background of your theme.

  • Select either "Repeat Horizontally," "Repeat Vertically," "Tile" or "No" in the "Repeat" menu option to have your background image repeatedly displayed in rows, columns, repeated or not repeated across your websites background, respectively. Select "Top Left," "Top Center," "Top Right" or "Default" to position align the background image upon your website.

  • Click on the "Text" option, then check mark the "Use Custom Fonts and Colors" box to alter the font type and color of the links, titles and content upon your SmugMug theme.

  • Click on the "Boxes" option, then check mark the "Use custom box background" box to customize the appearance of boxes (or sections) upon your SmugMug theme, and click on the button next to "Background" to choose a color, or check mark the "Transparent" box (which will display the color or image behind the section of your SmugMug theme).

  • Click on the "Use custom box borders" to adjust the colors of the "Top Border" and "Bottom Border" of your sections, or click upon the "None" boxes to omit a border lines above and below each section.

  • Click on the "Photos" option, and check the "Use custom photo borders" box. Click the "Border Color" button to customize the color bordering your images. Click on the "Border On Color" button to alter your border color when a cursor moves over your photo.

  • Click on the "Footer" option, then in the "Custom Footer" section, click on "Choose Image" menu option to insert a custom image as the footer upon your theme, or select the "Text" menu option to customize the font, color and size of your custom footer.

  • Click on the "Left," "Center," or "Right" buttons to align your footer upon your SmugMug theme, and in the "Click to URL" field type in a Web link to have your footer link towards a domain. In the "Custom Size" section, enter the pixel dimensions in the "Width" and "Height" fields to adjust the width and height of the footer, respectively.

Editing Via Advanced Customizer

  • Click on the "Tools" menu bar option, and select "Go to Control Panel" with your cursor.

  • Click on the "Edit" link next to the "Advanced Customizer > Site-wide. Almost no limits" line.

  • Navigate towards the "Background Color" section and select the "Light," "Dark" or "Viewer Controlled" option to alter the background color of your SmugMug theme.

  • Navigate towards the "Page Title" section, and enter in the text field the title or name to be displayed upon search engine pages.

  • Enter your customized CSS code into the large text field underneath the "CSS" section. Do not include the "style" tags. Then in the "Javascript" section, insert your customized JavaScript in the text field underneath (omitting the "script" tags which are not required by SmugMug).

  • Navigate towards the "Head Tag" section, and insert any custom code that you desire to be displayed before the closing "head" tag into the text field. Omit the "head" tags as they are not needed here. In the "Body Tag" section, insert your custom HTML in the text field.

  • Locate the "Display SmugMug Header" section, and select "No" to hide the default SmugMug header in your theme. To include the default header, select "Yes, above my custom header" or "Yes, below my custom header" to insert the SmugMug header above or beneath your customized header, respectively. Next, in the "Custom Header" section, insert your custom HTML.

  • Locate the "SmugMug Footer To Show" section, and select "Mini" to display a small SmugMug footer upon your theme. To display the full SmugMug footer above or below your customized footer, select the "Full, above my custom footer" or "Full, below my custom footer" options, respectively. Then, in the "Custom Footer" section, insert your custom HTML into the text field.

  • Locate the "Bottom JavaScript" section and insert your custom JavaScript into the text field. Omit the "script" tags.

  • Click on the "Update" button to update changes made to your SmugMug theme, or "Email It!" to send a copy of your SmugMug code to your email address.

Related Searches


Promoted By Zergnet



Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!