Support / FAQ

Examples of Custom CSS code for your Quote Roller templates and proposals.

Focus: The focus of this Self Help article is to provide you information about custom CSS.  I recommend keeping a text editor such as Notepad open and as you make changes to Custom CSS Code you backup previous copies so that if something messes up you can revert back to your previous version rather than starting over.  This also applies when editing source code in our Content Editor. Also note that Ctrl + Z will UNDO your last change and Ctrl + Y will REDO your last change.

Please note that w3 Schools provides a complete guide with tutorials along with complete reference for learning everything from basic to advanced CSS coding at http://www.w3schools.com/css/default.asp

What if I need to add styles for PDF document only?
Use “.pdf” class before CSS selector and it will be applied to PDF document only. Like this:
.pdf .block .content.pricing-table .pricing-table-section h3 { color:#F00;}

Notes: Without .pdf root class the style will be applied to both versions.

How can I change margins of the document? Margins of the page can be changes with special CSS selectors. Just add the following code:
#pdf_cover_page_style { margin: 5cm 2cm 2.5cm 2cm; } 
#pdf_inner_page_style { margin: 2cm 2cm 2.5cm 2cm; }

Notes: It’s especially useful when you need to apply custom background image and have to change top and bottom margins. Please note that it will be applied only to PDF document.

How can I remove signature block? Just add this CSS code and the signature block will be removed from PDF document.
.signature {display:none;}

How can I hide Subtotal column in the pricing table? Add the following CSS to hide Subtotal column in the pricing table.
.pricing-table .pricing-table-section th.subtotal,
.pricing-table .pricing-table-section td.subtotal {display:none;}
.pricing-table .pricing-table-section tr.summary {display:none;}

How can I remove the price from Proposal views?
.document .proposal-doc .pricing-table table th.price,
.document .proposal-doc .pricing-table table td.price {width:0px; padding:0px;}

How can I remove the Subtotal line for each Catalog type (Services, Products, Subscriptions) from Proposal views?
.proposal-doc .pricing-table table tr.summary {display:none;}

How can I remove the QTY line from Proposal views?
.pricing-table .pricing-table-section th.qty,
.pricing-table .pricing-table-section td.qty {display:none;}


How can I hide the total and grand total from the proposal?
.pricing-table .pricing-table-summary {display:none;}

How can I “right-align” the total and grand total amounts at the bottom of the pricing list?
.proposal-doc .block .content .pricing-table .pricing-table-summary table tr.grand td.value {text-align:right;}

How can I hide the Document Caption (Name of the template or proposal) on the cover page for the PDF version?
.pdf .document-name{ display: none}

How can I left align the Document Caption (Name of the template or proposal) on the cover page for the PDF version?
.pdf .document-name {margin-left: -200px;}

How can I hide the Document Meta (Created by and Prepared For) information on the PDF Version of the proposal?
.proposal-doc .doc-meta {display:none;}

How can I left align the Document Meta (Created For and Prepared by) information on the cover page?
.document .meta-column {margin-left: -400px;}

How can I remove “Section” header names on the Web Version and PDF Version of the proposal?
.document .section-caption {display:None;}

Where can I find accurate color codes for use in CSS? http://www.w3schools.com/tags/ref_colormixer.asp

Where can I find color names supported by all browsers?
http://www.w3schools.com/tags/ref_colornames.asp

How to Modify Properties of Text
http://www.w3schools.com/css/css_text.asp

Property

CSS Code Example

Notes

Text Size

font-size:14px;

Can use %, pt, em, and other sizing units.
http://www.w3schools.com/cssref/pr_font_font-size.asp

Font Family

font-family: Michroma, “Nova Cut”, Tahoma, sans-serif;

Fonts listed in Change Design Option and “Web Safe Fonts” may be used.  PDF Generator does not display web safe fonts so they will only show in web version. In order for a font to be used it must be selected in the Change Design options.  Ie for Michroma to be displayed it must be selected in “Document Caption”, “Document Meta”, “Section Header”, etc.  The first available font will be used and others are considered fall back fonts.
http://www.w3schools.com/cssref/pr_font_font-family.asp

Color

color: red;

Can use HEX codes (ie. #F00 or #FF0000)
http://www.w3schools.com/cssref/pr_text_color.asp

Underline

text-decoration: underline;

overline, line-through, underline, or none can be used
http://www.w3schools.com/cssref/pr_text_text-decoration.asp

Case

text-transform: capitalize;

uppercase, lowercase, or capitalize can be used

Indentation

text-indent: 20px;

px, pt, cm, em, etc. Negative values are allowed

Letter Spacing

letter-spacing: 3px;

px, pt, cm, em, etc. Negative values are allowed

Word Spacing

word-spacing: 10px;

px, pt, cm, em, etc. Negative values are allowed

Line Height

line-height: 150%;

150% = 1.5X    200% = 2X etc

Alignment

text-align:center;

Left, Center, Right, or Justify can be used.

Shadow

text-shadow: 2px 2px #FF0000;

http://css3gen.com/text-shadow/ Text Shadows can be stacked with commas for cool 3D effects like this emboss effect:

text-shadow:-1px -1px 1px rgba(255, 255, 255, .09), 1px 1px 1px rgba(0, 0, 0, .49);

White Space (Word Wrap)

white-space: nowrap;

Full Explanation: http://www.w3schools.com/cssref/pr_text_white-space.asp


Modern View Modifications

How can I make the Table of Contents static?\
#view_container #view_container_wrp #content {top:5px!important; position:absolute; left:300px;}
#view_container #view_container_wrp #sidebar {position:fixed; top:5px; padding-top:0px; background:transparent; width:300px; height:100%; overflow: auto;}

Note: Due to smaller screens and to prevent scroll bars from being added if you have too many section names you can make them closer together by adding the following code.  Modifying the bold numbers adjusts the vertical spacing of each item.

/* Logo Area*/ #view_container #view_container_wrp #sidebar .logo-section {padding-top:10px padding-bottom:10px;}
/*Table of Contents Text*/ #view_container #view_container_wrp #sidebar .toc h3 {font-size:12px; margin-top:12px; margin-bottom:8px;}
/*Between Section Names*/ #view_container_wrp #sidebar .toc ul li {margin-top:2px; margin-bottom:2px;}
/*Section Names*/ #view_container #view_container_wrp #sidebar .toc ul li a {font-size:12px; padding-top:3px; padding-bottom:3px;}
/* Under Section Names*/ #view_container #view_container_wrp #sidebar .toc {padding-bottom:0px;}
/*Above Accept Button*/ #view_container #view_container_wrp #sidebar .accept-action a.button, #view_container #view_container_wrp #sidebar .accept-action button.button {margin-top:10px;}

How can I format “TABLE OF CONTENTS” text?

#view_container #view_container_wrp #sidebar .toc h3 { REPLACE WITH DESIRED TEXT FORMATTING }

How can I remove the Accept and Decline buttons from the “Web Theme – Modern” View?
#view_container #view_container_wrp #sidebar .accept-action {display: none;}
#view_container #view_container_wrp #content .proposal-actions-main .proposal-actions-main-wrp .right {display: none;}


How can I change the “color” of the Catalog Descriptions field for my items that I add to my pricing table?
Please note
: This color can only be changed on the “Default” Pricing table layout. Just change the color: “red” to a different color, as shown below. HEX codes are also allowed.
.document .proposal-doc .block .content .pricing-table table td.description p {color: red;}

Classic View Modifications

How can I remove the Accept and Decline buttons from the “Web Theme – Classic” View?
#top_header_control #header_panel .header-panel-wrp .action-accept,
#top-header_control #header_panel .header-panel-wrp .action-decline {display:none;}
.sidebar-actions {display:none;}

If you need help on how to add code to your templates, please click here

Have Questions, please feel free to contact us?
For faster support, please login into your Quote Roller account and click on the blue Help/Questions button found on the upper right of your account.

Posted in: Templates