Knowledge Base

Answers to Common liveSite Questions

Back to Knowledge Base

 
Site Design

liveSite Software CSS Classes

liveSite software includes many CSS "hooks" you can use to style virtually any of the HTML that is output from the software.  With a basic knowledge of CSS, you can create stunning website designs.  Below is a list of all the CSS classes that are added to the software as it generates your web page content.

System Themes

If you are using a System Theme for the styling of your site, The Theme Designer will creates default values for many of these CSS elements for you so calendar pages, catalog pages, order forms, etc. so all liveSite pages look similar.  Of course, you can override any of them in the Advanced Styling area of the Theme Designer.

Custom Themes

If you are using a Custom Theme for the styling of your site, you won't be using the Theme Designer.  Instead you will be using your own CSS.  To get the default styling for all elements that you can then customize for your custom design, you will need to include liveSite's front-end css file at the very top of your Custom Theme CSS file:

/* ALWAYS load the frontend styling first which normalizes browsers and defines basic elements to make liveSite work */
@import url(/livesite/frontend.min.css);

Be sure to replace "livesite" with the path to your liveSite software directory (if different).

 

CSS Classes

These classes/ids are found throughout the software system.

Updated for liveSite v9.1.

.software_attachment
.software_badge
.software_captcha_label
.software_captcha_question
.software_captcha_answer
.software_chat_region
.software_error, .software_notice
    .icon
    .description
    .error
.software_input_text
.software_input_password
.software_input_radio
.software_input_checkbox
.software_input_file
.software_input_submit_primary
.software_input_submit_secondary
.software_input_submit_small_primary
.software_input_submit_small_secondary
.software_select
.software_textarea
.software_fieldset
.software_legend
.software_hr
.software_button_primary
.software_button_secondary
.software_button_small_primary
.software_button_small_secondary
.software_highlight
.software_office_use_only
.software_menu
    .current
.software_mobile_switch
.software_mobile_switch_desktop (if in desktop mode)
.software_mobile_switch_mobile (if in mobile mode)
.software_monthly_calendar
    .inactive
.software_photo_gallery_album
    .heading
    .album
        .thumbnail
            .image
            .album_frame
        .name
        .number_of_photos
    .photo
        .link
            .image
.software_pagination
    .previous
    .number
    .current
    .next
.software_quick_menu (must use !important)
    .menu
.software_login_region
    .username_label
    .password_label
.software_translation
.software_catalog
    .search_heading
    .search_subheading
    .full_description
    .heading
    .featured_and_new_item_table
        .top_item
            .heading
            .full_description
            .keywords
            .price
            .more_detail
        .item
            .image
            .short_description
            .price
    .item_table
        .item
            .image
            .short_description
            .price
    .code
.software_catalog_detail
     .full_description
     .keywords       
     .price
     .form

     .details
     .code
#software_ad_region_[name].software_ad_region_static or .software_ad_region_dynamic
         If dynamic:
    .menu
    .items_container (this class and the 2 below were renamed to not contain "ad" in order to avoid issues with Adblock Plus)
        .items
            .item
.software_cart_region .full
.software_cart_region .empty

    .items
    .arrows
.software_catalog_search_results
    .item
        .image
        .short_description
        .price
.software_comments
    .comments_heading
    .comment
        .notice
        .name_line
            .added_by
            .name
        .date_and_time
        .message
    .add_comment_heading
    .watcher_container
        .watcher_count
        .watcher_question
        .watcher_action
.software_rss_link
.software_icalendar_link 
.software_tag_cloud 
.software_discounted_price
.software_form_view_directory
.software_menu_sequence_buttons
    .next
    .previous
.software_social_networking
    .addthis_button
    .twitter_button
    .facebook_button
    .facebook_button_count
    .plusone_button
    .linkedin_button

.software_change_password
.software_random_password
.software_email_a_friend
.software_error_page
.software_forgot_password
.software_login
.software_logout
.software_photo_gallery
   .software_photo_gallery_album
        .heading
            .album
                .thumbnail
                .name
                .number_of_photos
            .photo
                .link
.software_membership_confirmation
.software_membership_entrance
.software_my_account
.software_my_account_profile
.software_email_preferences
.software_view_order
.software_update_address_book
.software_custom_form
.software_custom_form_confirmation
.software_form_list_view
.software_form_item_view
.software_form_view_directory
.software_calendar_view
.software_calendar_event_view
.software_catalog
.software_catalog_detail
.software_express_order
.software_order_form
.software_shopping_cart
.software_shipping_address_and_arrival
.software_shipping_method
.software_billing_information
.software_order_preview
.software_order_receipt
.software_registration_confirmation
.software_registration_entrance
.software_search_results
.software_affiliate_sign_up_form
.software_affiliate_sign_up_confirmation
.software_affiliate_welcome
.software_system_region_header
.software_system_region_footer

Added additional button classes to submit buttons so for example, the "Add to Cart" or "Checkout" buttons can be styled differently to add emphasis:

.add_button
.save_button
.submit_button
.cancel_button
.back_button
.checkout_button
.ship_arrival_button
.ship_method_button
.purchase_button
.billing_button
.add_comment_button
.login_button
.register_button
.guest_button

These classes allow you to style elements within specific Page Types:

.software_change_password
.software_random_password
.software_email_a_friend
.software_error_page
.software_forgot_password
.software_login
.software_logout
.software_registration_confirmation
.software_membership_confirmation
.software_email_preferences
.software_update_address_book
.software_custom_form
.software_custom_form_confirmation
.software_form_item_view

.software_billing_information
    .apply_gift_cards

.software_registration_entrance
    .login
        .heading
        .data
    .register
        .guest
            .heading
            .data
        .heading
        .data

.software_membership_entrance
    .login
        .heading
        .data
    .register
        .guest
            .heading
            .data
        .heading
        .data

.software_my_account
    .my_profile
        .heading
        .data
    .email_preferences
        .heading
        .data
    .membership
        .heading
        .data
    .commissions
        .heading
        .data
    .affiliate
        .heading
        .data
    .order_history
        .heading
        .data
            .complete_orders
                .heading
                    .data
                        .row_1
                        .row_0
            .incomplete_orders
                .heading
                .data
                    .row_1
                    .row_0
    .address_book
        .heading
        .data
            .row_1
            .row_0
    
.software_my_account_profile
    .contact
        .heading
        .data
    .billing
        .heading
        .data

.software_view_order
    .order .data
    .products
        .ship_tos
            .heading
        .products .heading
            .heading_item
            .heading_description
            .heading_selection
            .heading_price
            .heading_amount
        .products .data .row_1
        .products .data .row_0
        .products .data
        .order_totals
             .heading
        .order_totals .data        
    .billing .heading
    .billing .data
    .payment .heading
    .payment .data

.software_shopping_cart
    .special_offers
        .software_fieldset
            .software_legend
    .products
    .ship_tos
        .heading
        .data
    .products .heading
        .heading_item
        .heading_description
        .heading_selection
        .heading_price
        .heading_amount
    .products .data .row_1
    .products .data .row_0
    .ship_tos .data
    .order_totals
         .heading
    .order_totals .data        
    .recurring_products
        .products
            .products .heading
                .heading_item
                .heading_description
                .heading_selection
                .heading_price
                .heading_amount
            .products .data .row_1
            .products .data .row_0
        .applied_offers
            .heading
            .data
        .offers data
        .cart_update
        .cart_link

.software_order_preview
    .ship_tos
        .heading
        .data
    .products .heading
        .heading_item
        .heading_description
        .heading_selection
        .heading_price
        .heading_amount
    .products .data .row_1
    .products .data .row_0
    .ship_tos .data
    .order_totals
         .heading
    .order_totals .data        
    .recurring_products
        .products
            .products heading
                .heading_item
                .heading_description
                .heading_selection
                .heading_price
                .heading_amount
            .products .data .row_1
            .products .data .row_0
    .applied_offers
        .heading
        .data
    .applied_gift_cards
    .billing heading
    .billing data
    .payment heading
    .payment data
    .order_terms
    .cart_link
    
.software_express_order
    .special_offers
        .software_fieldset
            .software_legend
    .ship_tos
        .heading
        .data
    .products .heading
        .heading_item
        .heading_description
        .heading_selection
        .heading_price
        .heading_amount
    .products .data .row_1
    .products .data .row_0
    .ship_tos .data
    .order_totals
         .heading
    .order_totals .data        
    .recurring_products
        .products
            .products heading
                .heading_item
                .heading_description
                .heading_selection
                .heading_price
                .heading_amount
            .products .data .row_1
            .products .data .row_0
    .applied_offers
        .heading
        .data
    .applied_gift_cards
    .billing .heading
    .billing .data
    .payment .heading
    .payment .data
    .order_terms
    .cart_link

.software_order_receipt
    .product_messages
    .order .data
    .ship_tos
        .heading
        .data
    .products .heading
        .heading_item
        .heading_description
        .heading_selection
        .heading_price
        .heading_amount
    .products .data .row_1
    .products .data .row_0
    .ship_tos .data
    .order_totals
         .heading
    .order_totals .data        
    .recurring_products
        .products
            .products .heading
                .heading_item
                .heading_description
                .heading_selection
                .heading_price
                .heading_amount
            .products .data .row_1
            .products .data .row_0
    .applied_offers
        .heading
        .data
    .applied_gift_cards
    .billing heading
    .billing data
    .payment heading
    .payment data
    .order_terms
    .cart_link

.software_order_form
    .products
        .heading
            .heading_item
            .heading_description
            .heading_selection
            .heading_price
            .heading_amount
        .products .data .row_1
        .products .data .row_0
    .select_ship_to

.software_form_list_view
    .form_list_search
    .row_1
    .row_0

.software_form_view_directory    
    .filters
        .heading
        .data .row_1
        .data .row_0
    .summary
        .heading
        .data .row_1
        .data .row_0

.software_calendar_view
    .software_calendar
        .calendar_view
        .monthly
        .weekly
        .upcoming
        .software_monthly_calendar
            .heading
            .data
                .calendar_[id]
                .inactive
                .today
        .data .row_1
        .data .row_0
        .row_1
        .row_0

.software_calendar_event_view
    .heading
    .data

.software_catalog_detail
    .product_selection
        
.software_shipping_address_and_arrival
    .heading
    .data
        .shipping_address
            .data
    .address .heading
        .custom_shipping_form
    .arrival_heading
    .arrival_dates

.software_shipping_method
    .address .heading
    .data
        .arrival .heading
        .data
    .ship_to .heading
        .products .heading
        .products .data .row_1
        .products .data .row_0
    .methods .heading
    .shipping_methods
        .data .row_1
        .data .row_0

.software_search_results
    .search_results_search
    .search_results_heading
    .data .row_1
    .data .row_0
    .item .data .row_1
    .item .data .row_0

.software_affiliate_sign_up_form
.software_affiliate_sign_up_confirmation
.software_affiliate_welcome

.software_button_tiny_secondary

 

These new Custom Formats have been added:

.heading-primary
.heading-secondary

 

Examples

 

Example #1: If you wanted to hide the ability for visitors to register on your Registration Entrance Page Type Pages, you would add this CSS code to your Advanced Styling (for System Themes):

 

.software_registration_entrance .register
{
   display: none !important;

 

Example #2: If you want your "Add to Cart" buttons to have a red background to be more noticable, but only on your Catalog Detail Page Type Pages, you would add this CSS code to your Advanced Styling (for System Themes):

 

.software_catalog_detail .add_button
{
   background-color: red !important;
}

 

Example #3: If you wanted to increase the font size of all text headings for all Page Types, you would add this CSS code to your Advanced Styling (for System Themes):

 

.heading
{
   font-size: 120% !important; 
}

 

 

 

 


 
Add Feedback:
Was this page helpful? Please let us know how we can improve it.
Please login or register to add your feedback.