Using CSS to change the styling of div and text elements on a site

An important note about adding custom CSS or Javascript to a site in Pressero

It is possible to selectively modify some elements in a skin, like the visibility of sections of an HTML page, or the color of the headings in the documents. This can be done by using a style override in the CSS for the page, inserted into the head content for your site, through the site administration settings in Pressero.

But when adding CSS or Javascript to change the design or behavior of a Pressero site, please keep in mind that the underlying HTML may change as new features are introduced to the system or changes, such as skin changes, are made to the site. We do not recommend or support making CSS or Javascript modifications using these techniques.
 
For example, the style tags identification is different between Pressero default (older) and Responsive (newer) skins, a style override that works on a default skin, will be different from a style tag override on a Responsive skin. So the style override will have to be recreated for that specific skin, and updated on that site, if you wish to change the skin on that site through Pressero site settings.
 
So any changes you make in this manner could be broken at any time without warning. Meaning that there are limitations to what support we give for custom code modifications, please see the article Using Aleyant Support and Professional Services for further detail on using Custom HTML and Javascript in Pressero sites.

The correct way to go about modifying a skin on Pressero is to enable a custom skin on your account that will give you direct access to the HTML, CSS, and Javascript files that comprise the skin. Custom Skinning an add-on option for most Pressero accounts, please open a ticket to support at support.aleyant.com and we will confirm what options are available for your account. Thank you for taking the time to read this information.

Identify the element by name and change the site settings
 

Identifying the name of the div or other style on a page.
Shows using the Inspect Element command in Firefox to show the information for a style object. You must know the name of the style or div (division) that you want to change on the pages. Some examples are below, but you may want to change an element that is not shown on these examples.
 

Adding the code to the head of the pages in Pressero site settings
Shows adding the code to change a style when logged into admin.pressero.com, and going to Sites > sitename > Settings > SEO/HTML (tab on blue bar) from the menu on the left of the window after you login. After saving, clear the cache on the site using /clearcache to see any changes immediately.

Please note that some style and division IDs like those beginning with ct100_ are dynamic, do not attempt to address these elements through CSS, they will change.

Examples of changing various styles

Featured product
Hide the featured product on the site pages.
<style type="text/css">
    #featuredProduct{display:none;}
</style>
 
Or
 
<style>
.item-edit-duplicate{display:none;}
</style>
 
Hide Duplicate Product Button in Shopping Cart
<style>
.sidebar-featured{display:none;}
</style>


Hide user info
The customer’s name will not display on the home page after they have logged in.
<style>
    .userInfo{display:none;}
</style>

Hide recent history
The list of the pages your customer has visited will not be displayed on the home page.
<style>
    .recentHistory{display:none;}
</style>

Hide breadcrumbs
Breadcrumbs, which show a path which brought them to the product page they are viewing, will be hidden.
Example: Products > Envelopes > #10 Window Envelopes
<style>
    .breadCrumbs{display:none;}
</style>

Hide product sort
Allows the customer the option of changing the sort order of the products.
Options are default, Default: Reverse, Alphabetically, or Alphabetically: Reverse.
<style>
    .productSort{display:none;}
</style>

Hide password reset
Hide the password reset option on the login page.
<style>
.pageType_login .resetpassword{display:none;}
</style>
 

Hide the navigation menu 1 on a site's login page
Hide all links in the top navigation menu on a site's login page
<style>
.pageType_login #navigation1{display:none;}
</style>
 
Change link styles
You can access and change the link styles on the page.
Note: !important is important, otherwise the style override may not be effective on all elements.
<style>
    a:link{text-decoration: none !important;}
    a:visited{text-decoration: none !important;}
    a:hover{text-decoration: none !important;}
    a:active{text-decoration: none !important;}
</style>

Change multiple items
Combine them in the head in a single <style> tag, as below, for example:
<style>
    .recentHistory{display:none;}
    .productSort{display:none;}
    a:visited{text-decoration: none !important;}
    .breadCrumbs{display:none;}
</style>

Show site footers in eDocBuilder templates
Site footers are hidden by default in the window that opens when customizing an eDocBuilder template for an order, these style settings will show them.
<style>
    .pageType_customize #footer div {
    display: block;
    }
    .pageType_customize #siteInfo {
    display: block;
    }
    .pageType_customize #navigation4{
    display: block;
    }
</style>
 
Hide Total (excl. GST) on Product Page for Calculator Pricing Engine
 
<style type="text/css">
        .calculatorTotalLabel{display:none;}
</style>
 
Hide Total (excl. GST) on UOM Pricing Engine
 
<style type="text/css">
        .pricingEnginePriceLabel{display:none;}
</style>
 
 
Hide shipping from Cart and Checkout Page
 
<style type="text/css">
    .cartSummaryShipping{display:none;}
</style>
 
Hide Featured Product scroll bar at bottom of responsive skins:
 
<style>
    .featured {display: none;}
</style>
 
Make the purchase order prompt red:

<style>
    .checkoutPOHeding{color:red;}
</style>
 
Hide the payment pending message on the order summary page for open terms payments:
 
<style>
    div.paymentInComplete {display:none}
</style>
 
Remove list style from Order Summary:
 
<style>
.orderSummary ul {
    list-style: none;
    padding: 0;
}
</style>
 
Change Color of Teaser Price box:
 
<style>
.prod-cat-item .prod-teaserprice {
background-color: #62bf75;
color: #fff;
}
</style