CSS Classes?

[[email protected]]

Is there a list of available CSS classes to use with Site Templates?

[CnP.Support.AM]

Good day @[email protected]

We cannot possibly list all CSS classes. You can find the available classes in the custom CSS field in the Site Template.

[[email protected]]

For future users...here's the custom CSS support referenced.

<style>
/* C&P Event Default Custom CSS */
/* Note:
* Note: The event registration form Cascading Style Sheet (CSS) is provided for users familiar with CSS.
* Note: You may customize the event registration form using the following CSS. The CSS does not apply to any other page element.
* Comments are added to the right side of property, wherever possible. (Some properties are self-explanatory)
* The default CSS may be reverted back by clicking on the revert button.
* Note: Template above the Event Engine will not be effected.
* Please post your questions to the Event Forum at: https://forums.clickandpledge.com/forumdisplay.php?f=56
*/

/* Font & Size Styles */
.CPEF .event-block th, .CPEF .event-block td, .CPEF .event-block div, .CPEF .event-block input, .CPEF .event-block textarea, .CPEF .event-block li, .CPEF .event-block a, .CPEF .event-block h3, .CPEF .event-block label, .CPEF .event-block select, .CPEF .event-block button, .CPEF .organization_text, .CPEF .btn-sold-out .text-error{
font-family: inherit; /* or use family name e.g. - Arial, Helvetica, sans-serif; */
font-size: 12px; /* registration form font size */
}
.CPEF .counter-custom div span, .CPEF .counter-custom .timecount{
font-size: 15px !important; /* counter & timer font size */
}
.CPEF .tab-custom h3, .CPEF .btn-custom, .CPEF .billing-header-custom h3, .CPEF .modal-custom .modal-header h3{
font-size: 14px; /* continue/process buttons & headers tab font size */
}
.CPEF .nettotal{
font-size: 20px; /* total & tax font size */
color: #51a451; /* total & tax font color */
}
.CPEF .td-custom table th, .CPEF .td-custom table td{
font-size: 11px!important;
}

/* Tab Styles */
.CPEF .tab-custom>li>a {
color:#555; /* tab font color */
background-color: #EEE; /* tab background color */
}
.CPEF .tab-custom>li>a:hover {
background-color: #E8E8E8; /* tab background hover color */
}
.CPEF .tab-custom .active a:link, .CPEF .td-custom a:link{
color: #0088cc; /* tab & link font active-color */
}
.CPEF .tab-custom a:hover, .CPEF .td-custom a:hover{
color: #005580; /* tab & link font hover color */
}
.CPEF .nav-tabs>.active>a, .CPEF .nav-tabs>.active>a:hover{
color: #0088cc; /* active tab font color */
background-color: #fff; /* active tab background color */
border: 1px solid #ddd; /* active tab border style */
}
.CPEF .tab-content .tab-pane{
background-color: #ffffff; /* active tab background color */
border: 1px solid #dddddd; /* active tab border color */
}

/* Counter Styles */
.CPEF .counter-custom span{
font-size: 15px!important; /* counter text font size */
color: #c09853; /* counter text font color */
}
.CPEF .counter-custom{
background-color: #fcf8e3; /* counter background color */
border: 1px solid #fbeed5; /* counter border style */
}
.CPEF .counter-custom .timecount{
color: #424242; /* timer text font color */
}

/* Organization Styles */
.CPEF .organization_text{
color: #444;
}

/* Table and Content Styles */
.CPEF .table-custom, table.detailList, .table-bordered{
border: 1px solid #dddddd; /* tableborder style */
}
.CPEF .th-custom, .CPEF .billing-header-custom{
color: #666666!important; /* table header columns text font color */
font-weight:bold!important; /* table header columns text font weight */
background-color: #E8E8E8!important; /* table header columns(th) background color */
border-left: 1px solid #dddddd!important; /* table header columns(th) border style */
}

.CPEF .td-custom{
background-color: #ffffff!important; /* table columns(td) background color */
color: #444!important; /* table columns text font color */
border-left: 1px solid #dddddd!important; /* table columns(td) border style */
border-top: 1px solid #dddddd!important; /* table columns(td) border style */
}

/* Buttons Styles */
.CPEF .btn-add-custom{
color: #333333!important; /* add button font color */
background-color: #f5f5f5; /* add button background color */
}
.CPEF .btn-add-custom:hover{
background-color: #E8E8E8; /* add button hover background color */
}
.CPEF .btn-custom{
color: #E5F7FF!important; /* continue, process, cancel, ok button font color */
background-color: #51a451!important; /* continue, process, cancel, ok button background color */
}
.CPEF .btn-custom:hover{
color: #E5F7FF!important; /* font HOVER color for CONTINUE, PROCESS, CANCEL, OK button */
background-color: #449244!important; /* continue, process, cancel, ok button hover background color */
}
.CPEF .btn-copy-custom, .CPEF .btn-load{
color: #FFFFFF; /* copy & load button font color */
background-color: #faa732; /* copy & load button background color */
}
.CPEF .btn-copy-custom:hover, .CPEF .btn-load:hover{
color: #FFFFFF; /* copy & load hover font color */
background-color: #f89406; /* copy & load button background HOVER color */
}
.CPEF .btn-sold-out .text-error{
color: #b94a48; /* sold out button font color */
}

/* Popup Styles */
.CPEF .modal-custom, .CPEF .modal-custom .tab-pane{
background-color: #fff; /* popup/modal background color */
}
.CPEF .modal-custom .modal-header{
background-color: #efefef; /* header background color */
border-bottom: 1px solid #ffffff; /* header border style */
}
.CPEF .modal-custom .modal-header h3{
color: #444444; /* header font color */
}
.CPEF .modal-custom .nav-tabs>li>a {
background-color: #EFEFEF; /* left tab background color */
color: #555; /* left tab font color */
font-size:14px; /* left tab font size */
}
.CPEF .modal-custom .nav-tabs>.active>a{
color: #4995D7; /* attendee registration left active tab font color */
background-color: #FFFFFF; /* attendee registration left active tab background color */
}
.CPEF .modal-custom .td-title{
background-color: #EFEFEF!important; /* right form header title */
}
.CPEF .modal-custom .modal-footer{
background-color: #f5f5f5; /* footer background color */
border-top: 1px solid #ddd; /* footer border styles */
}
.CPEF .modal-custom .previous-custom a, .CPEF .modal-custom .next-custom a, .CPEF .modal-custom .finish-custom a{
color: #fff; /* footer active button font color */
background-color: #08c!important; /* footer active button background color */
}
.CPEF .modal-custom .pager .disabled>a{
color: #fff; /* footer disabled button font color */
background-color: #08c; /* footer disabled button background color */
}
.CPEF .modal-custom .pager li>a{
border: none; /* footer button border style */
background-position: initial; /* footer button background-position style */
color: #fff; /* footer button text color style */
}
.CPEF .modal-custom .pager li>a:active{
background-color: #08c!important; /* footer button text color style */

}

/* Other Styles */
.CPEF .close {
font-size: 20px!important;
color: #000;
}
/*For Leda Template */
.SiteBackgroundImage {
background-image:url("https://s3.amazonaws.com/clickandpledge/Salesforce/Designer/Events/Sites/Templates/Leda/images/slides/001.jpg");
background-size: cover;
}

/*For Default Template */
.SiteBackgroundImage_default {
background-image:url("https://s3.amazonaws.com/clickandpledge/Salesforce/Designer/Events/2.7000/Sites/Templates/Default/Images/top-bg.png");
background-repeat:repeat;
}

/* C&P Event Core CSS - do not change */
.CPEF .table th, .CPEF .btn-add-custom, .CPEF .btn-add-custom:hover, .CPEF .btn-custom, .CPEF .btn-custom:hover, .CPEF .btn-copy-custom, .CPEF .btn-copy-custom:hover, .CPEF .btn-load, .CPEF .btn-load:hover, .CPEF .modal-custom .modal-header{
background-image:none; /* do not change */
background-position:inherit; /* do not change */
filter: none;/* do not change */
}
.CPEF .table-hover tbody tr:hover th, .CPEF .table-hover tbody tr:hover td {
background-color: none!important; /* do not change */
}
.CPEF .modal-custom, .CPEF .modal-custom .tab-pane{
border: 0; /* do not change */
}
.CPEF .nav-tabs>.active>a, .CPEF .nav-tabs>.active>a:hover{
border-bottom-color: transparent; /* do not change */
}
.CPEF .td-custom .table-bordered td, .CPEF .td-custom .table-bordered td:hover, .CPEF .td-custom .notable td, .CPEF .td-custom .notable td:hover, .CPEF .td-custom table td, .CPEF .td-custom table td:hover{
background: transparent!important; /* do not change */
}
.CPEF .tab-content .tab-pane{
border-top: 0; /* do not change */
}
.CPEF .modal-custom .modal-footer {
box-shadow: none; /* do not change */
}
/* End of C&P Event Default Custom CSS */

/* Add your custom CSS here */

/* End of your custom CSS */

</style>