To add any of this custom CSS to your site, simply copy and paste the code into the Custom CSS field found under Manage > Configuration > Appearance for your site Managment Console.

If you need help adding custom CSS, see Adding Custom CSS, contact your CSM, or reach out to support@dozuki.com.

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 to ensure that your Dozuki site's styling rules are unaffected by system updates to the elements and styling rules.

To restrict your users' ability to upload images or avatars for their User Profiles, use this code to hide the image add/edit tool on the User Profile Edit page.

Before

After

Code

#imageCol {
   visibility: hidden;
}

Use this code to change the color of bold, italicized, and underline words site-wide.

Note: The coding in the section will change the formatted text Site-Wide vs. exclusively in Guide Steps.

Before

After

Code

/* Change Site Wide Bold Text Color */
strong {
color: #F00;
}

/* Change Site Wide Underlined Text Color */
u, ins {
color: #008000;
}

/* Change Site Wide Italicized Text Color */
em {
   color: #4169E1;
}

If you want a "Back to Top" button for longer pages (like this one), this code enables that.

This button is fixed in the bottom-right corner of the pages to which it is applied.

Note: This is a multiple step process, the code is placed in the custom CSS section of the manage page and customized to the site name, additionally a customized link will also need to be created for each Wiki, Category, or Guide you want the button to appear.

Preview

Code

Copy the following code into the custom CSS section:

Note: The guide code will create a button for all guide links within guide introductions.

/* ######### Category and Wiki Pages 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;
}

/* ######### Guide Page Back to Top Button - placing your nanosite name in the href* code in place of {nanosite} ######## */

[itemprop="description"] a[href*="https://{nanosite}.dozuki.com/Guide/"] { 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 each page you want the button to appear on:

1. Copy the page URL
2. Go into page edit mode
3. Add the Verbiage "Back to Top" to the Additional Information (Wikis or Categories) or Introduction (Guides)
4. Highlight that text, and create a new link:
   • Paste the page url you copied and add #top to the end of the page url.

Example:

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

Use this code to hide the Edit button in the sub-header of Category Pages.

Note: This code only affects category pages. If you also want to hide it for guides, remove the second line of code (starting with li.page-navigation-link.hidden-mobile).

Before

After

Code

/*Hide Edit Button in category banner but not in guide banner*/
li.page-navigation-link a#edit-nav-link {
    display: none;
}
li.page-navigation-link.hidden-mobile a#edit-nav-link {
    display: inline-block;
}

Use this code to adjust the size of the text in the summary.

You can change the font-size px value to any size of your choosing.

Note: The summary text is set to a default font-size of 14px.

• In this example, the summary text is changed to 20px.

Before

After

Code

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

Use this code to hide the Guide Difficulty displayed on Guides in Standard and Edit Views.

Before

After

Code

/*Hide Guide Difficult Bar in View & Edit*/
div.details-item.difficulty {
    display: none;
}

div#difficultyDiv.formField {
    display: none;
}

If you leverage auto-numbering for version titles, you can hide the optional version title field so only the auto-populated number will appear.

Before

After

Code

/* Hide "Title (optional) from Release */ 
label[for=releaseTitle] {
   display: none;  
}

#releaseTitle {
    display: none;
}

Use this code if your work instructions do not reference Parts or Tools, but rather another category of material clasification ie - PPE, Equipment, Materials.

You will alter the content to what you would like displayed.

Note: This code change will take effect in Standard View only. Site verbiage will retain 'Parts' and 'Tools' in Edit View and Operator View.

• In this example the text for 'Tools' is replaced with 'Equipment'.

Before

After

Code

/*Change Displayed Title for Parts and Tools Lists */
h3.column.full-width {
    visibility: hidden;
}

.column.one-half.item-list-tools:before {
    content: 'Tools';
    visibility: visible;
    font-size: 16px;
    color: #333;
    margin: 0;
    font-weight: 600;
}

.column.one-half.item-list-parts:before {
    content: 'Equipment';
    visibility: visible;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

Use this code to have the text and image flipped.

Note: The change will take effect in Standard View only, it will NOT adjust how the guide displays in Edit View.

• Operator View may see some slight changes due to bullet padding requirements of making the CSS change; it does not typically impede the use of Operator View.

Before

After

Code

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

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

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

Use this code if you would like to increase, or decrease, the text size.

Note: Adjust the font-size in px. Depending on the degree of change, you may also need to adjust the line-height or padding.

Before

After

Code

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

Use this coding to change the color of bold, underlined, and italicized text in Guide Steps.

Before

After

Code

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

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

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

/* Change color of superbold step text */
.step-lines strong em {
   color: #008000;
}

Use this code to only display Step Titles, and hide Step Numbers.

Note: This will only take effect in Standard User View. Step Numbers will still display in Edit View and Operator View.

Before

After

Code

/* Hide Step Numbers in Guides */
.stepDash {
   display: none;
}
 
.stepValue {
   display: none
}

Note: This will take effect in Standard View and Edit View. Step Numbers and Titles will still display in Operator View.

Before

After

Code

/* Hide Step Numbers and Titles in Guides*/
.step-title {
   display: none;
}

If you want more than three icons to choose from, you can swap one (or more) of the colored bullets for the additional icon(s).

You will need to start by copying the unicode from the preferred icon in the Font Awesome Icon Database.

Note: You will place the unicode for the desired icon content line in both sets of code given below; one is for Author View, and the other for Operator View.

Note: To apply custom icons on PDF's review the Custom CSS code for PDFs.

To swap the red bullet in both Author View and Operator View, enter the Unicode for the desired icon in the content element of the code below.

/* Custom Red Bullet Icon in Author View */

.bullet_red:before {
content: '\f1bd'! important; 
font-family: icomoon ;
font-size: large;
font-style: normal ! important;
}

/* Custom Red Bullet Icon in Operator View */
#stepsContainer .bullet-red:before {
 content:'\f1bd' ! important;
font-family: icomoon;
color: red;
visibility: visible;
font-size: large ;
font-style: normal;
}

.bullet-red {
visibility: hidden;
font-style: normal;
}

To swap the orange bullet in both Author View and Operator View, enter the Unicode for the desired icon in the code below:

/* Custom orange Bullet Icon in Author View */
.bullet_orange:before {
content: '\f0f3'! important; 
font-family: icomoon ;
font-size: large;
font-style: normal ! important;
}

/* Custom orange Bullet Icon in Operator View */
#stepsContainer .bullet-orange:before {
 content:'\f0f3' ! important;
font-family: icomoon;
color: orange;
visibility: visible;
font-size: large ;
font-style: normal;
}

.bullet-orange {
visibility: hidden;
font-style: normal;
}

To swap the yellow bullet in both Author View and Operator View, enter the Unicode for the desired icon in the code below:

/* Custom yellow Bullet Icon in Author View */
.bullet_yellow:before {
content: '\f1b9'! important; 
font-family: icomoon ;
font-size: large;
font-style: normal ! important;
}

/* Custom yellow Bullet Icon in Operator View */
#stepsContainer .bullet-yellow:before {
 content:'\f1b9' ! important;
font-family: icomoon;
color: #f3e00e;
visibility: visible;
font-size: large ;
font-style: normal;
}

.bullet-yellow {
visibility: hidden;
font-style: normal;
}
​

To swap the green bullet in both Author View and Operator View, enter the Unicode for the desired icon in the code below:

/* Custom green Bullet Icon in Author View */
.bullet_green:before {
content: '\f140'! important; 
font-family: icomoon ;
font-size: large;
font-style: normal ! important;
}

/* Custom green Bullet Icon in Operator View */
#stepsContainer .bullet-green:before {
 content:'\f140' ! important;
font-family: icomoon;
color: green;
visibility: visible;
font-size: large ;
font-style: normal;
}

.bullet-green {
visibility: hidden;
font-style: normal;
}
​

To swap the light blue bullet in both Author View and Operator View, enter the Unicode for the desired icon in the code below:

/* Custom Light-blue Bullet Icon in Author View */
.bullet_light_blue:before {
content: '\f1e2'! important; 
font-family: icomoon ;
font-size: large;
font-style: normal ! important;
}

/* Custom Light-blue Bullet Icon in Operator View */
#stepsContainer .bullet-light_blue:before {
 content:'\f1e2' ! important;
font-family: icomoon;
color: lightblue;
visibility: visible;
font-size: large ;
font-style: normal;
}

.bullet-light_blue {
visibility: hidden;
font-style: normal;
}
​

To swap the blue bullet in both Author View and Operator View, enter the Unicode for the desired icon in the code below:

/* Custom Blue Bullet Icon in Author View */
.bullet_blue:before {
content: '\f085'! important; 
font-family: icomoon ;
font-size: large;
font-style: normal ! important;
}
/* Custom Blue Bullet Icon in Operator View */
#stepsContainer .bullet-blue:before {
 content:'\f085' ! important;
font-family: icomoon;
color: blue;
visibility: visible;
font-size: large ;
 font-style: normal;
}
.bullet-blue {
  visibility: hidden;
   font-style: normal;
}
​

To swap the violet bullet in both Author View and Operator View, enter the Unicode for the desired icon in the code below:

/* Custom Violet Bullet Icon in Author View */
.bullet_violet:before {
content: '\f1cb'! important; 
font-family: icomoon ;
font-size: large;
font-style: normal ! important;
}
/* Custom Violet Bullet Icon in Operator View */
#stepsContainer .bullet-violet:before {
 content:'\f1cb' ! important;
font-family: icomoon;
color: violet;
visibility: visible;
font-size: large ;
 font-style: normal;
}

.bullet-violet {
  visibility: hidden;
   font-style: normal;
}
​

Use this code to change the standard bullets to different colors by changing the color code.

Note: The element coding for each native color bullet is the same as in the section above,Swapping a Colored Bullet for Icon, but here we are only modifying the line for color: and not the content.

This example is changing the bullet that is black by default to display as steel blue instead.

Before

After

Code

.step-lines .bullet_black {
    color: #4682B4;
}

Use this code to change the "Caution," "Note," and "Reminder" present icon display titles to your specifications by changing the content of the code below

This example changes Caution to Safety, Note to Quality, and Reminder to Inspect.

Before

After

Code

/* Change the icon verbiage to show "Safety" for Caution */ 
span.bullet-icon_caution {
    visibility:hidden;
}
span.bullet-icon_caution:before {
    content: "Safety ";
    visibility:visible;
}

/* Change the icon verbiage to show "Quality" for Note */ 
span.bullet-icon_note {
    visibility:hidden;
}
span.bullet-icon_note:before {
    content: "Quality ";
    visibility:visible;
}

/* Change the icon verbiage to show "Inspect" for Reminder */ 
span.bullet-icon_reminder {
    visibility:hidden;
}
span.bullet-icon_reminder:before {
    content: "Inspect ";
    visibility:visible;
}

Use this code to change the special bullet icons from the preloaded ones.

Note:You will need to start by copying the unicode from the preferred icon in the Font Awesome Icon Database.

In this example the note icon is altered.

Before

After

Code

/*Custom Bullet - Note Icon*/
.ico-step-icon-note:before {
content: "\f0ad";
}

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

/*Custom Bullet Caution Icon*/
.ico-step-icon-caution:before {
content: "\f0ad";
}

Bonus Tip:

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

This example is adjusting the reminder bullet icon but the color coding can be applied to all bullet icons.

Code

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

Use this code to not allow users to post or view comments on individual steps.

Before

After

Code

/* Hides the comment icon from the step. */
.button.button-link.add-comment-button.right.js-show-comments.js-comment-count {
display: none;
}

Use this set of code to hide all comment capabilities from users, including each step of guides, and the end of all documents.

Note: This code set will essentially disable all Comments.

Note: If you do not include all of the code given here, unresponsive buttons may still appear in your documents.

Before

After

Code

/* Hides the comment input fields from the bottom of the document. */

form.add-comment-form.js-add-comment-form {
display: none;
}

/* Hides the comment icon from the step. */

.button.button-link.add-comment-button.right.js-show-comments.js-comment-count {
display: none;
}

The comment field will remain, but the user will not be able to see delated comments or watch for new comments that are posted to the document.

Before

After

Code

/* Hides the 'Add a comment', 'Watch' and 'View Delated' buttons in the Comment Menu from the bottom of the document. */
.guide-comments-container a.comments-header-button {
    display: none;
}

This code removes the option to view delated comments at the end of a document.

Note: 'Add a Comment' and 'Watch' Buttons will remain.

Before

After

Code

/* Hides the 'View Deleted' button from the bottom of the document. */
a.iconLink.comments-header-button.button.button-medium.toggle-deleted.js-toggle-deleted {
display: none;
}

Located next to 'Add a Comment' and 'Stop Watching' buttons at the end of a guide.

Before

After

Code

/* Hides the comment count from the bottom of the document. */
h3.js-comment-count {
display: none;
}

/* Hides the 'Add a comment' button from the bottom of the document. */
.guide-comments-container a.comments-header-button {
    display: none;
}

/* Hides the comment icon from the step. */
.button.button-link.add-comment-button.right.js-show-comments.js-comment-count {
display: none;
}

Note: Custom Guide PDF CSS is its own section in the Management Console, and thus, this code will only apply when entered in that field.

Use this code to hide the step numbers and only display step titles.

Note: To hide, change display specification to none.

• To reapply Step Numbers change display specification to value.

Before

After

Code

/* Hiding Step Numbers from displaying in PDFs */
span.stepValue {
display: none;
}

If you set Custom Bullet Icons for your site, and you want your PDFs to match using the same icon unicode and color codes.

'Before

After

Code

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

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

}

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

Note: You change the icon color by inserting a line of code for color and using the same hex color code for the color of you choose for guide pages:

Code

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

If a step does not have an image loaded, a placeholder will appear on the PDF, use this code to remove this placeholder.

/* Removes Image placeholder in PDFs*/
.stepImages .noImage {
    display: none;
}

To customize left-footer text on the PDF modify the content line of the code below to reflect what should be displayed.

In this example it will read - Uncontrolled If Printed.

Before

After

Code

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

To customize the center footer text modify the content line of the following code:

In this example it will read CONFIDENTIAL.

Code

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

To hide the Site URL from the PDF Footer use the following code.

Before

After

Code

td.site-url {
    display: none;
}

To draw more attention in a PDF to text that has been set as Bold or Italics, use the following code.

Preview

Code

.step-lines strong em {
    background-color: #FFFF00
}

To increase or decrease the text size while viewing a guide in Full Screen or Operator View.

Note: There is coding to adjust the bullet size as well, you will need to modify both the bullets width and height, as well as the font-size and line-height.

Before

After

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;
}

To move the bullets to the right, change the margin-left pixel variable to a larger number; the larger the number, the further right the bullets will shift.

To move the bullets to the left, change the margin-left pixel variable to a negative number; the smaller the number, the further left the bullets will shift.

Before

After

Code

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

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

Note: This coding adjusts only special bullets, and not standard colored bullets.

Before

After

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;
}

To adjust the bullet seen in Full Screen and Operator View, copy the unicode from the preferred icon in the Font Awesome Icon Database, and place it in the content section of the code.

Note: Change the icon color by placing the CSS color code in the colorsection on the code.

In the following example the reminder bullet icon is changed, and the color was changed changed to the color green.

Before

After

Code

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