|
Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy.
While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs. |
This article will explain how to change the buttons on your theme. This allows you to adjust or even supply your own buttons!
Visit the button theme area of the theme under Themes > [ThemeName] > Buttons. Here you can choose button sets from your other themes or choose from predefined button sets.
You are able to preview all the buttons in the current button set by clicking the "View Full Button Set" Link under the Active Button Set preview.
To choose a new button set, select from the dropdown or click the button set and click save. You can also preview these full sets with the same link (View Full Button Set) as above.
The buttonset will copy all necessary CSS to your stylesheet in the /* [Buttons] */ section.
Modify Buttons with CSS
You are also able to directly style these buttons with the CSS. All of the Buttons are hierarchical with their CSS classes. All buttons have the class "ThemeButton".
All Add to Cart buttons have the class "AddToCartThemeButton" as well as a specific class for the type of page the button appears on.
For Example the following classes are applied to an add to cart button on the category page:
CategoryProductAddToCart, ThemeButton, AddToCartThemeButton, CategoryAddToCartThemeButton
And these classes are applied to the add to cart button on the Product Details page:
ProductDetailsAddToCartButton, ThemeButton, AddToCartThemeButton, ProductDetailsAddToCartThemeButton
Using this information you could have 2 separate button styles for these 2 buttons by styling the CategoryAddToCartThemeButton and ProductDetailsAddToCartThemeButton classes with different styles.
Another thing you can do is style only the ThemeButton class in order to have a uniform style across all buttons on your theme. You can then style individual buttons as you see fit.
For example:
.ThemeButton {background:#ccc; border:1px solid #000; box-shadow:0px 0px 5px #333;}
How to style a button with an image:
To style a button with an image use CSS similar to the following CSS:
.AddToCartThemeButton {
background-image: url('/Shared/Themes/Element/Buttons/addtocart.png');
width: 202px;
height: 76px;
/* the properties after this are required to hide the text of the button */
border: none;
cursor: pointer;
font-size: 0;
line-height: 0;
color: transparent;
background-color: transparent;
}
The Width and Height need to be the same as the image's dimensions.