Online Application: CSS Examples

You can customize your Community Theme with CSS code by taking the following steps:

1. Navigate to the Community Themes tab.
2. Select to Edit the Theme you want to update.
3. In the Custom CSS field, you can paste some, or all, of the following examples.
4. Save your changes.

Note: You can choose/change the color references in these examples by searching for a website that displays the  Hex number and color. For example: http://www.color-hex.com/. You can also Copy colors from an existing logo or image by using free tools, such as ColorPick Eyedropper (available as an Add-On to Chrome).
 

/* Updating the hero image - this is what displays for the Community login page */
.targetx-dashboard-hero {
background-image: url("https://yourdomain.com/hero.png"");
}


/* Top left corner logo image- this is what displays for the Community login page  */
.targetx-header-university-icon {
background-image: url("https://yourdomain.com/logo.png"");
}

If you do not want the Hero image or Logo image to display, you MUST set the above code to indicate NONE. For example:

/* DO NOT DISPLAY hero image */
.targetx-dashboard-hero {
background-image: none;
}

/* DO NOT DISPLAY Top left corner logo image */
.targetx-header-university-icon {
background-image: none;
}

/* Header color */
.targetx-header {
    color: #66000 !important;
}

/* Standard button color */
.targetx-button {
  background-color: #660000 !important;
  box-shadow: 0 2px 0 red;
}

/* Changing the style of the “required” fields */
.targetx-input-label.targetx-required:before { 
    font-family: "Times"; 
    display: inline-block; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: inherit; 
    content: "\27A5"; 
    position: absolute; 
    font-size: 5px; 
    left: -10px; 
    top: -4px; 
    vertical-align: middle; 
    color: #585e69; 
    font-size: 25px; 
    left: -31px; 
    color: #d81118;
}

/* Change the style of a section header that has required fields */
.targetx-section-header .targetx-required:before { 
  font-family: "targetx-icons"; 
  display: inline-block; 
  font-weight: normal; 
  font-style: normal; 
  text-decoration: inherit; 
  content: "\27A5";
  position: absolute; 
  font-size: 21px; 
  left: -27px; 
  top: -5px; 
  -webkit-transform: translateY(-2px); 
  transform: translateY(-2px); 
  vertical-align: middle; 
  color: #585e69;
  color: rgb(216, 17, 24);  
}

/* Hiding the University Name and Logo from overlapping with the hero image  */

div.targetx-dashboard-hero-info { 
display:none; 
}

/* Align the text for radio buttons */

.radio .outer {
    margin-right: 10px;
}

.targetx-option-label {
    display: flex;
    padding-left: 0 !important;
}

label.radio {
    margin-bottom: 15px;
}

/*Submit Success logo - The logo is in the middle of the page just above the "thank you...This is the text that recommenders see after successful submission of a recommendation. */

.targetx-submit-success .targetx-submit-success-logo {

background-image: url("https://yourdomain.com/site_label/resource/static_resource_13_digit_numerical_value/static_resource_title");
background-repeat: no-repeat;
width: 70px;
height: 70px;
}

Configuring the Hero Image to resize for mobile

1. Navigate to the Community Theme tab.
2. Select the Theme for your Online Application.
3. In the Custom CSS field, enter the following: 

   figure.portal-hero {
   background-size: cover !important;
   background-repeat: no-repeat !important;
   background-position: center !important;
   }
   

4. Save your changes.

Hiding the 'Application Process Name' in the application

.app-process-name{display:none;}

<style>
.app-process-name

{display:none;}


</style>

Hiding the Events column in Applicant Dashboard

1. Confirm Communities 1.9 or higher is installed.
2. Navigate to the Community Theme tab.
3. In the Custom CSS field, enter the following:

• For Applicant Dashboard version 2006.3 or higher you must use the code listed here.

.my-events{display:none;}
.menu-item.events-nav-link {
display: none;
}
.menu-item.appts-nav-link {
display: none;
}
.my-events{display:none;}

• This will hide the entire section titled My Events, thus disabling access to Events and Appointments from the dashboard.

.menu-item.appts-nav-link{ 
display: none; 
}

• This will hide Appointments & Interviews from the drop down menu.

.menu-item.events-nav-link {
display: none;
}

• This will hide Events from the drop down menu.

4. Save your changes.

For Applicant Dashboard version 2006.3 or higher you must use the code below:

.go-to-events { display: none; }

.go-to-appointments { display: none; }

If you want to hide the entire My Events section, you need to add the following CSS:

/* This hides the MyEvents section from the Applicant Dashboard */

.portal-block--borderless {
display: none;
}

This hides the Appointment Scheduler link in Applicant Dashboard:
    .go-to-appointments { display: none; }

Hiding the option to 'Review Application' in the application

1. Navigate to the Community Theme tab.
2. In the Custom CSS field, enter the following:

.review-app{display:none;}

Applies to:

<style>
.review-app

{display:none;}


</style>

Hiding the 'Start New' application button in the application

If you want to hide the button that allows students to start a New application, follow these steps:

Hiding the 'Started On' or 'Due On' fields in the application

You can hide the 'Started On' or 'Due On' fields by adding them to the Custom CSS.

.started-on{display:none;}

-OR-

.due-on{display:none;}

Preventing the text on your Key Questions page from overlapping

1. Navigate to your Community Themes tab.
2. Click on the record for your Online Application Theme and Edit.
3. In the Custom CSS field, add the following code:​​

h1.targetx-application-form-title.ng-binding { 

padding-bottom: inherit; 

}

4. Save your changes.

Replacing the title or text for ‘No Applications Started’ messages in the application

1. Navigate to the Community Theme tab.
2. In the Custom CSS field, enter the following:

.no-applications-title:before { 
content: "My "; 
} 

Example 2: In this example, we will replace the Text  (circled in red below) :

1. Navigate to the Community Theme tab.
2. In the Custom CSS field, enter the following (replace the highlighted section with your own text):

.no-applications-text { 
text-indent: -9999px; 
line-height: 0; /* Collapse the original line */ 
} 

.no-applications-text::after { 
content: "Start your application today!"; 
text-indent: 0; 
display: block; 
line-height: initial; 
} /* New content replaces original line height */ 

Results:

div.targetx-application-fee-container > center > button
{ margin-bottom: 15px; }

.targetx-application-fee-container:after
{ content: 'Please Submit Your Application after providing payment'; }