To add any of this custom CSS to your site, simply copy and paste the code into the Custom CSS field in the /Manage/Appearance for your site.

If you need help adding custom CSS, see Adding Custom CSS.

Custom CSS Disclaimer ¶ 

Please note that by using the built-in custom CSS functionality you acknowledge that your custom styles may break during future Dozuki system updates. As a best practice, you should routinely test your Dozuki site's styling rules are still unaffected by system updates to the elements and styling rules.

Custom CSS for Website ¶ 

Collapse Error Messages ¶ 

If you'd like Error messages to take up less page space, this code hides those messages and replaces it with an error icon. By hovering over the icon the entire message can still be viewed.

Preview

Block Image

After

Block Image

After On-Hover

Code

/* ############ Hide Error Messages ############# */
div.error {max-height:20px; background-size:20px 20px; padding:5px;
   background-image:url("https://d17kynu4zpq5hy.cloudfront.net/igi/qcp/UTfFSO5xYiEX61w6"); background-repeat:no-repeat; transition:max-height 0.5s;transition:padding-top 0.5s; pointer-events:none;}
div.error p, div.error div  {opacity:0.0;transition:opacity 0.5s;pointer-events:none;}
div.error:first-child {pointer-events:auto;} 
div.error:hover {max-height:300px; visibility:initial;padding-top:20px;background-color:#faf8e2;}
div.error:hover p, div.error:hover div {opacity:1.0;}

Hide User Profile Image Uploader ¶ 

If you'd like to restrict the ability of your Users from uploading images or avatars for their User Profiles, you can use this code to hide the image add/edit tool on the User Profile Edit page.

Preview

Block Image

Before

Block Image

After

Code

#imageCol {
   visibility: hidden;
}

Custom CSS for Guide Pages ¶ 

Change Flag Icon Color ¶ 

Preview

Block Image

Code

.guideFlag img {
width: 50px;
height: 50px;
float: left;
margin-right: 8px;
background-color: #4099FF ;
}

Move Text to the Left and Images to the Right ¶ 

Preview

Block Image

Code

/* Moves images to right side of window */
.stepObjects {
   float:right;
}
 
/* Moves text to left side of window */
.stepText {
   float:left;
   margin-left: 7px;
}
/* Set width of text only steps to 100% */
.textOnly {
   width:100%;
}

/* Moves Available Export Formats Left */
div.stepViewOptions {
   float: left;
   margin-top: -30px;
}

Move Export Formats to the Right ¶ 

Preview

Block Image

Code

div.stepViewOptions {
float: right;
}

Hide Step Numbers ¶ 

Preview

Block Image

Code

.stepDash {
   display: none;
}
 
.stepValue {
   display: none
}

Hide Step Image Placeholder ¶ 

Click here for removing the image placeholder on PDF guides.

Preview

Block Image

Code

/*Hides Images from Steps that don't have pictures*/
.noImage {
display:none;
}
 
 
/*Increases size of text within steps*/
.stepLines {
font-size: 130%;
}
 

/*Set width of text only steps to 100%*/
.textOnly {
width:100%;
}

/*Moves Available Export Formats Left*/
div.stepViewOptions {
   float: left;
   margin-right: 20px;
}

Color Formatted Text ¶ 

Preview

Block Image

Code

In this code, the bold text will become red. To make the bold text a different color, change #F00 to the hex color code for whatever color you would like.

strong {
color: #F00;
}

Code for underlined text:

u, ins {
color: #F30;
}

Change Bullet Icon ¶ 

To customize the icons displayed, you'll first need to select the icons you wish to use from the Font Awesome Icon Database. Copy the Unicode for the icon.

Example:

Block Image

Preview

Block Image
Block Image

Code

/*Custom Bullet Icon*/
.ico-step-icon-reminder:before {
content: "\F017";
}

You can update the icon to swap out (caution, note or reminder).

.ico-step-icon-reminder:before

You can update the Unicode code to match the Font Awesome icon you wish to use.

content: "\F017";

You can also change the icon color by inserting a line of code for color and inserting the html # for the color of your choosing.

.ico-step-icon-reminder:before {
content: "\F017";
color: #27AE60;
}

Change Step Text Size ¶ 

Preview

Block Image

Code

.step-lines p {
margin: 0;
padding: 0 2px 0 28px;
line-height: 1.5em;
font-size: 20px;
}

Adjust Width of Data Capture Fields & Forms ¶ 

Preview

Block Image

Before

Block Image

After

Code

This code is setting the width allowance for each of your data capture components on the step form display. In this example, we are setting each component to take the entire width of the step form (100%).

/*Allows data entry forms to take full width*/
.dataEntryFormHolder form .stepFormFields .stepFormField {
    width: 100%;
}

This code allows you to adjust the specific text input field to a limited width, if you do not want the input fields to span across the full width of the step form. This example is setting the width of the input fields to 30% of the entire form width.

.dataEntryFormHolder form .stepFormFields .stepFormField .inputHolder {
    width: 30%;
}

Custom CSS for New Guide Layout ¶ 

Change Flag Icon Color ¶ 

Preview

Block Image

Code

img.guide-flag-image {
   background-color: #4099FF;
}

Text to the Left and Images to the Right ¶ 

Preview

Block Image

Code

/* Moves images to right side of window */
.stepMedia {
   order: 1;
   margin-right: 0 !important;
}

.stepMedia .newImageMenu {
   right: 1px;
   left: auto !important;
}

/* Adjusts padding for the steps */
.step-content {
   padding-right: 20px;
}

Hide Step Numbering ¶ 

Preview

Block Image

Code

/* Don't display step titles */
.step-title {
   display: none;
}

Make Formatted Text a Different Color ¶ 

Use these examples to change the color of bold, underlined, and italic guide step text. Use CSS color names or hex codes to get the color you want.

Preview

Block Image

Code

/* Change color of bold step text */
.step-lines strong {
   color: red;
}

/* Change color of underlined step text */
.step-lines ins {
   color: blue;
}

/* Change color of italic step text */
.step-lines em {
   color: green;
}

Change Step Text Size ¶ 

Preview

Block Image

Code

You'll want to adjust font-size and possibly line-height. Here's how:

.step-lines p {
   font-size: 25px;
   line-height: 25px;
}

Change Bullet Color ¶ 

This example shows how to change the standard bullet that appears grey by default to display as black instead. You can change the color code to customize the color entirely, if desired.

Preview

BeforeAfter
Block Image
Block Image

Code

.step-lines .bullet_black {
    color: #000;
}

Change Bullet Icon ¶ 

To customize the icons displayed, you'll first need to select the icons you wish to use from the Font Awesome Icon Database. Copy the Unicode for the icon:

Example:

Block Image

Preview

Block Image
Block Image

Code

/* Custom normal bullet icon */
.step-lines .fa-circle:before {
   content: '\f0a9';
}

/* Custom Caution bullet icon */
.step-lines .ico-step-icon-caution:before {
   content: '\f127';
}

/* Custom Note bullet icon */
.step-lines .ico-step-icon-note:before {
   content: '\f24a';
}

/* Custom Reminder bullet icon */
.step-lines .ico-step-icon-reminder:before {
   content: '\f084';
}

You can also change the icon color by inserting a line of code for color and inserting the hex code for the color of your choosing:

/* Custom Reminder bullet icon */
.step-lines .ico-step-icon-reminder:before {
   content: '\f084';
   color: #27AE60;
}

Custom CSS for Full Screen/Operator View ¶ 

Change Step Text Size ¶ 

Preview

Before
Block Image
After
Block Image

Code

/* change the size of text and bullets on steps in operator view*/ 

#stepsContainer .bullet {
    width: 24px !important;
    height: 24px !important;
} 

#stepsContainer .step-line {
   font-size: 20px;
   line-height: 22px;
}

Move Bullets to the Right ¶ 

Preview

BeforeAfter
Block Image
Block Image

Code

/*Operator View - Moves Icons Off Images*/
#stepsContainer .indent-0 {
    margin-left: 15px;
}

Change Bullet Icon Size ¶ 

This change works best when the bullets are moved the right and off the edge of the step image. You can adjust the sizing of the both the line height and font size to achieve your desired look.

Preview

BeforeAfter
Block Image
Block Image

Code

/*Operator View - Increases All Icon Sizes*/
#stepsContainer .ico-step-icon_caution {
    line-height: 16px;
    font-size: 20px;
}
#stepsContainer .ico-step-icon_note {
    line-height: 16px;
    font-size: 20px;
}
#stepsContainer .ico-step-icon_reminder {
    line-height: 16px;
    font-size: 20px;
}

Custom Bullet Icons ¶ 

Preview

Block Image

Code

/*Operator View - Custom Quality Check Bullet Icon Color - Green*/
#stepsContainer .ico-step-icon_reminder:before {
content: "\f14a";
color: #27AE60;
}

Custom CSS for Category Pages ¶ 

Enlarge Summary Text in Category Page Banner ¶ 

Preview

Block Image

Before (14px default).

Block Image

After (16px).

Code

In this code, the summary text will become 16px. To make the text a different size, change 16 to the px size for whatever size you would like.

/*Enlarge category banner text*/
.banner-text .topicHeaderText {
    font-size: 16px;
}

Custom CSS for Wiki Pages ¶ 

Back to Top Button ¶ 

If you'd like a "back to top" button for longer pages (like this one), this code will enable that.

Preview

This button will be fixed in the bottom right corner of pages it is applied to.

Block Image

Code

Copy the following code into the custom CSS section:

/* ######### Back to Top Button ######## */
a[href*="#top"] { font: bold 1.5em/34px "Lato",Arial,sans-serif;color: #FFF;margin: 0 0 0 44px;text-shadow: 0 1px 2px rgba(70,70,70,0.5); background-color:#2182ac; z-index:11; background: linear-gradient(0,#2182ac,#2aa3d8); padding:5px 15px 5px 15px; box-shadow: 0px 5px 10px #333; position:fixed; bottom:20px; right:20px;
}

For the page you want the button to appear on:

  • Copy the page URL
  • Go into page edit mode
  • Create a new link with:
    • Link_URL: (page url)#top <----- "Add #top to the end of the page url"
    • Link_Text: back to top <------ "This text will appear on the button"

Example:

http://www.dozuki.com/Wiki/Custom_CSS#top

back to top

Custom CSS for Guide PDF ¶ 

Hide Step Numbers ¶ 

Preview

Block Image

Code

span.stepValue {
display: none;
}

Hide Image Placeholder ¶ 

Code

.stepImages .noImage {
    display: none;
}

Display Custom Bullet Icons ¶ 

If you've set Custom Bullet Icons for your site, you'll want your PDFs to match.

Preview

Block Image

Code

/* Custom Caution bullet icon */
.ico-step-icon-caution:before {
   content: "\f05e ";
}

/* Custom Note bullet icon */
.ico-step-icon-note:before {
   content: "\f1b8 ";
   color: #27AE60;

}

/* Custom Reminder bullet icon */
.ico-step-icon-reminder:before {
   content: "\f14a";
}

You can also change the icon color by inserting a line of code for color and inserting the hex code for the color of your choosing:

Preview

Block Image

Code

/*Custom Reminder Bullet Icon & Color - Green*/
.ico-step-icon-reminder:before {
   content: "\f14a";
   color: #27AE60;
}

Preview

Block Image

Code

.site-url:before {   content: "CONFIDENTIAL";}

OR

td.copyright:after {
    content: ” - Uncontrolled If Printed.“;
}

Code

td.site-url {
    display: none;
}

0 Comments

Add Comment