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.
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 to ensure that your Dozuki site's styling rules are unaffected by system updates to the elements and styling rules.
Custom CSS for Website
Hide User Profile Image Uploader
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; }
Change the Color of Formatted Text
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; }
Back to Top Button
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:
- Copy the page URL
- Go into page edit mode
- Add the Verbiage "Back to Top" to the Additional Information (Wikis or Categories) or Introduction (Guides)
- 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
Custom CSS for Wikis and Categories
Hide the Edit Button in Category Page Banner
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; }
Change Summary Text Size in Category Page Banner
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; }
Custom CSS for Guide Pages
Hide Guide Difficulty in Standard View & Edit View
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; }
Hide Optional Version Title from Release
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; }
Change Part and Tool List Text
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; }
Move Text to the Left and Images to the Right
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; }
Change Step Text Size
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; }
Make Formatted Text a Different Color - In Guides
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; }
Hide Step Numbers
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 }
Hide Step Numbers and Titles
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; }
Bullets
Swap Colored Bullet for Icon
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; }
Change Bullet Color
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; }
Custom Special Bullet Icon Verbiage
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; }
Change Special Bullet Icon
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; }
Guide Comments
Hide All Comment Fields and Buttons from Steps
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; }
Hide All Comment Fields and Buttons from Documents
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; }
Hide Comments Menu from the End of the Documents
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; }
Hide 'View Deleted' Button
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; }
Hiding Guide Comment Count
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; }
Custom CSS for Guide PDF
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.
Hide Step Numbers
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; }
Display Custom Bullet Icons
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; }
Hide Image Placeholders
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; }
Add Custom Footer Text
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"; }
Remove Site URL from Footer
To hide the Site URL from the PDF Footer use the following code.
Before
After
Code
td.site-url { display: none; }
Highlight Text in Step when Bold / Italic styles are Applied
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 }
Custom CSS for Full Screen/Operator View
Change Step Text Size
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; }
Move Bullets to the Right or Left
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
Shifting Right
Shifting Left
Code
/*Operator View - Moves Icons Off Images*/ #stepsContainer .indent-0 { margin-left: 50px; }
Change Special Bullet Icon Size
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; }
Custom Bullet Icons
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; }
2 Comments
Is it possible to update the font size of the forms in the data collection window?
Cody Tilson - Reply
Hi @ctil, currently the forms in the data collection window are formatted so that they display as legible as possible without interfering with the step instruction. Custom CSS could be applied to adjust the font size, just be sure to test it out with the variety of form fields to ensure it does not disrupt your end users’ view.
Heather Crary -