Mobile Footer Color

This particular option can be found by logging into your site's admin area and going to:
"ProPhoto" > "Customize" > "Mobile" > "Footer Menu"

If you haven’t already done so, you’ll want to check out our Footer Menu information.

Mobile-friendly layout is used to keep your site simple and easy to use on small phone screens. Instead of using a typical menu bar in the header area, which can quickly become too wide for the narrow screen of a phone, the mobile-friendly footer menu places links as buttons below your pages. Your photos and text take priority, and visitors can navigate to other pages when they’re done looking at the page they are on.

Footer menu color scheme

You can select from 5 different color scheme: black, blue, white, light gray, and yellow.

Use this area to choose a color scheme.

Since these color schemes are presets, the color of the text on each button is selected automatically for good contrast. In this example, blue is the selected color scheme, which uses white text on each button:

And the footer background

Override menu color scheme with CSS

While the built-in color schemes are suitable for most situations, you might decide to override the color scheme with your own color choices. At the moment, this is done using CSS code pasted below any other code in this box:
“ProPhoto” > “Customize” > “Advanced” > “Custom Code” > “Custom CSS”
You can paste this code below any other code in that box:

/** this overrides the color gradient seen on mobile menu buttons & popups **/
.ui-btn-active {
border-color: #D56835;
background-image: -webkit-gradient(linear,left top,left bottom,from( #D56835 ),to( #AC4815 ));
background-image: -webkit-linear-gradient( #D56835, #AC4815 );
background-image: -moz-linear-gradient( #D56835, #AC4815 );
background-image: -ms-linear-gradient( #D56835, #AC4815 );
background-image: -o-linear-gradient( #D56835, #AC4815 );
background-image: linear-gradient( #D56835, #AC4815 );
}
/** this code overrides the 'select' glow seen in mobile menus **/
.ui-focus, .ui-btn:focus {
-moz-box-shadow: 0 0 3px #D56835 inset, 0 0 9px #D56835;
-webkit-box-shadow: 0 0 3px #D56835 inset, 0 0 9px #D56835;
box-shadow: 0 0 3px #D56835 inset, 0 0 3px #D56835;
}

To override colors, edit this code by changing each appearance of #D56835 in the code to another color value. Also, replace #AC4815 with a second color. These two colors will create a gradient effect – use the same color value for both for a solid color effect.


This particular option can be found by logging into your site's admin area and going to:
"ProPhoto 4" > "Customize" > "Mobile" > "Footer Menu"

If you haven’t already done so, you’ll want to check out our Footer Menu information.

Mobile-friendly layout is used to keep your site simple and easy to use on small phone screens. Instead of using a typical menu bar in the header area, which can quickly become too wide for the narrow screen of a phone, the mobile-friendly footer menu places links as buttons below your pages. Your photos and text take priority, and visitors can navigate to other pages when they’re done looking at the page they are on.

Footer menu color scheme

You can select from 5 different color scheme: black, blue, white, light gray, and yellow.

Use this area to choose a color scheme.

Since these color schemes are presets, the color of the text on each button is selected automatically for good contrast. In this example, blue is the selected color scheme, which uses white text on each button:

And the footer background

Override menu color scheme with CSS

While the built-in color schemes are suitable for most situations, you might decide to override the color scheme with your own color choices. At the moment, this is done using CSS code pasted below any other code in this box:
“ProPhoto” > “Customize” > “Advanced” > “Custom Code” > “Custom CSS”
You can paste this code below any other code in that box:

/** this overrides the color gradient seen on mobile menu buttons & popups **/
.ui-btn-active {
border-color: #D56835;
background-image: -webkit-gradient(linear,left top,left bottom,from( #D56835 ),to( #AC4815 ));
background-image: -webkit-linear-gradient( #D56835, #AC4815 );
background-image: -moz-linear-gradient( #D56835, #AC4815 );
background-image: -ms-linear-gradient( #D56835, #AC4815 );
background-image: -o-linear-gradient( #D56835, #AC4815 );
background-image: linear-gradient( #D56835, #AC4815 );
}
/** this code overrides the 'select' glow seen in mobile menus **/
.ui-focus, .ui-btn:focus {
-moz-box-shadow: 0 0 3px #D56835 inset, 0 0 9px #D56835;
-webkit-box-shadow: 0 0 3px #D56835 inset, 0 0 9px #D56835;
box-shadow: 0 0 3px #D56835 inset, 0 0 3px #D56835;
}

To override colors, edit this code by changing each appearance of #D56835 in the code to another color value. Also, replace #AC4815 with a second color. These two colors will create a gradient effect – use the same color value for both for a solid color effect.

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us