CSS Injection Examples

There are numerous ways in which the design of 4me 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 4me 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 4me pages. The background will appear behind the container.

body { background:#5a71be url("https://www.4me.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 4me 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 4me pages.

body.modal { font-size:16px; font-family:"Helvetica Neue",Arial,Helvetica; }

Button Appearance

By default, the buttons on customer-facing 4me 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 4me).

#welcome_logo {
  background: transparent url(https://4me-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 4me 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://4me-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;
}