Custom CSS for Custom Templates
You will most likely want to customize the CSS for your ScreenSteps Live content.
You can view the full ScreenSteps Live layout css file here. The selectors in that stylesheet will give you a good idea of what selectors to use in your own css.
Below we will show you a few examples of what you can do as well as provide example CSS code. The easiest way to add the CSS examples to your custom template is to insert them as custom CSS to your space.
Remove Borders
This css will remove the borders around the ScreenSteps Live content areas:
#screensteps-main-content, #screensteps-steps, #screensteps-description, #screensteps-inner-content, #screensteps-title-area, #screensteps-search div.search-results, #comments-content { border: none;}
Add border between sidebar and main content area
#screensteps-main-content-wrapper { border-left: 1px solid #ccc;}
Alternate Search Box
#screensteps-content-wrapper #screensteps-search { background-color: white; margin: 0; padding: 10px 20px; }
#screensteps-content-wrapper #screensteps-search p.search-form { background-color: inherit; background-image: none; padding-left: 0; padding-right: 0;}
div#screensteps-main-content #screensteps-search form { width:auto; background: none; border-width: 0;}
div#screensteps-main-content #screensteps-search form input.search-field { width: 500px; font-size: 20px; border: 1px solid #BBB; padding: 5px; vertical-align: middle; float: none; height: auto; line-height: normal; color: black; }
div#screensteps-main-content #screensteps-search form input.search-submit { font-size: 15px; margin: 0 0 0 5px; padding: 6px 10px 5px; vertical-align: middle; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-color: #BBB; background-color: #eee; color: #666; border-style: solid; border-width: 1px; cursor: pointer; display: inline-block; position: relative; float: none; width: auto; height: 36px; text-indent: 0;}
Adjust vertical position of Manual icons
#screensteps-inner-content .asset-list li { background-position-y: 1px;}
Change minimum width of the ScreenSteps Live content area
div#screensteps-content-wrapper { min-width: 910px; }
Customizing image border and background
Each image is wrapped in an "image" div. Use the following selector to adjust the border color and background color:
#screensteps-steps .image { }
Add your comment