CSS Injection Examples
CSS injection examples show how to customize customer-facing Xurrent pages and Self Service styling.
There are numerous ways in which the design of Xurrent can be adjusted by adding cascading style sheet (CSS) content. Below several examples are provided to help account administrators get started.
Container Width
Adjust the width of the container of the customer-facing Xurrent pages, such as the Sign In page, in which the text, fields, links and buttons are displayed.
#modal_container { width:700px; }Background
Specify a background color and or background image for the customer-facing Xurrent pages. The background will appear behind the container.
body { background:#5a71be url("https://www.xurrent.com/images/gradient.png") repeat-x; }Logo Position
Move the organization logo that has been selected for the account to a different position on the customer-facing Xurrent pages.
#account_logo { position:relative; top:200px; left:150px; }Text Font
Specify the font size and font family for the text in the container of the customer-facing Xurrent pages.
body.modal { font-size:16px; font-family:"Helvetica Neue",Arial,Helvetica; }Button Appearance
By default, the buttons on customer-facing Xurrent pages are already styled. It is possible, however, to adjust the appearance of these buttons by first resetting their styling and subsequently applying your custom style.
/* reset */
.def_button {
color: #6e6e6e;
font: bold 12px Helvetica, Arial, sans-serif;
text-decoration: none;
padding: 7px 12px;
position: relative;
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
border: solid 1px #dcdcdc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.def_button:hover {
border-color: #999;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.def_button.def_save {
color: #fff;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
background: #937db7;
filter:progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#937db7',endColorstr='#856cae');
background: -webkit-gradient(linear,0% 0,0% 100%,from(#937db7),to(#856cae));
background: -moz-linear-gradient(-90deg,#937db7,#856cae);
border: 1px solid #72579d;
}
.def_button.def_save:hover {
background: #856cae;
filter:progid: DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#856cae',endColorstr='#7d63a9');
background: -webkit-gradient(linear,0% 0,0% 100%,from(#856cae),to(#7d63a9));
background: -moz-linear-gradient(-90deg,#856cae,#7d63a9);
border: 1px solid #6a5294;
}Welcome Page Graphic
Place a graphic on the Welcome page, the page that is displayed on the right side of the screen after a user accesses Xurrent.
#welcome_logo {
background: transparent url(https://Xurrent-demo.s3.amazonaws.com/examples/twitter_full_logo_blue.png) 0 0 no-repeat;
width: 200px;
height: 37px;
}Self Service
Adjust the appearance of the Xurrent Self Service interface.
.topbar .topbar-inner {
background: #00a0d1;
height: 75px;
}
#itrp_page {
margin-top: 75px;
}
body.ie7 #itrp_page {
position: relative;
top: 75px;
}
.topbar .brand {
margin: 15px;
padding: 0;
background: transparent url(https://Xurrent-demo.s3.amazonaws.com/examples/twitter_full_logo_white_blue.png) 0 0 no-repeat;
width: 222px;
height: 40px;
text-indent: -9999px;
}
.nav a {
color: #e8e8e8;
}
.nav .dropdown-menu {
background: #00a0d1;
}
.nav .dropdown-menu li a {
color: #e8e8e8;
}
.nav .dropdown-menu .divider {
background-color: #00a0d1;
border-color: #12b0e1;
}
#itrp_page .expandable .expandable_header {
background-color: #fff;
}
#itrp_container .button.reopen {
color: #900;
}