Headline Scroller Magic Style GuideFrom PVII: the leader in responsive Dreamweaver tools
The HSL Style Guide
Headline Scroller Magic (HSL) is engineered to be extremely flexible and easy to integrate into any design. Like all PVII tools, HSL appearance is CSS-driven. Like many of our latest tools, certain key design parameters are controlled by options in the product interface. Let's examine those first.
Interface-Managed Styling Options
The following options are selectable from within the HSL interface:
At the bottom of the interface you will find 4 check boxes:
a. Rounded Corners
CSS Border radii will be assigned to elements where they logically make sense.
b. Outer Shadow
A CSS box-shadows will be assigned to the root element.
c. Flush Top
Select this option if your scroller spans the top of your layout or page. Top, left, and right borders will be turned off.
d. Bullet Separator
Sets a separator background image between items. You can also do this manually by using character entities. Here is a good resource:
The HSL CSS Files
Each HSL style theme has its own related CSS file. For the purposes of this document we will analyze the theme 01 style sheet (p7HLS-01.css). We will explore only those rules that you will be likely to edit as you customize your menu.
The Root Rule: Fonts & Background
.p7HLS-01 {
overflow: hidden;
color: #000;
border: 1px solid;
border-color: rgba(0,0,0,0.65);
font-family: "Segoe UI", "Gill Sans", Optima, sans-serif;
}
Set the color for text. Border attributes and color. And font family.
In theme 01, there is no background set. This allows the scroller to adapt to any underlying backgrounds used on the page. In the other themes, a background color is set on this element.
Link Colors
The following rule governs the link attributes for links inside your headline content.
.p7HLS-01 .p7hls-item a {
color: #000000;
text-decoration: none;
border-bottom: 1px dotted;
}
The following rule governs top-level menu link attributes when the item is hovered over or when its associated sub-menu is open.
.p7HLS-01 .p7hls-item a:hover {
color: #000;
border-bottom-style: solid;
}
The declared properties should be self-explanatory.
Headline Item Content
In this section of the style sheet you can set attributes for content padding and font-size, as well as unique styling for paragraphs, links inside paragraphs, and headings.
.p7HLS-01 .p7hls-item {
margin: 0;
padding: 10px 40px 10px 12px;
font-size: inherit;
}
.p7HLS-01.bullet .p7hls-item {
background-image: url(img/p7hls-bullet-dark.png);
background-repeat: no-repeat;
background-position: left center;
}
.p7HLS-01 .p7hls-item h1,
.p7HLS-01 .p7hls-item h2,
.p7HLS-01 .p7hls-item h3,
.p7HLS-01 .p7hls-item h4,
.p7HLS-01 .p7hls-item h5 {
font-size: 1em;
font-weight: bold;
letter-spacing: normal;
}
The above rules should be self-explanatory.
Smartphone Menu Media Query
The following Media Query targets smartphones and narrow windows. The rules inside the query determine how the menu looks when it is reconfigered into a vertical accordion-type menu on small devices or in very narrow browser windows. The query begins with this code:
@media only screen and (min-width: 0px) and (max-width: 700px) {
Inside the query are CSS rules:
@media only screen and (min-width: 0px) and (max-width: 700px) {
.p7HLS-01 .tool-bar { float: none; width: 100%; height: auto !important; padding: 3px 0px; text-align: center; }
.p7HLS-01 .tool-bar ul {display: inline-block;}
}
In the vast majority of cases, will not be needing to edit the rules inside the query.
Editing and determining RGBA colors
The following procedures will enable you to convert HEX colors to RGBA in Dreamweaver CS5 and under. Dreamweaver CS5.5 and up have native support for RGBA built in.
RGBA stands for Red-Green-Blue-Alpha. Each value is separated by a comma. The alpha value allows you to set a transparency level for the element being colored—be it a background color, a text color, or a border color. White (255, 255, 255) and black (0, 0, 0) are easy. Dreamweaver can help you to determine the RGB values using its standard color picker tool.
In your CSS Styles panel, select the rule you want to edit. Start by assigning a Hex color. Let's say #6C6. Open the color picker. Then click the System Color Picker icon:
The System Color Picker will open:
Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your color value to:
rgba(102,204,102,1);
Remember, the "1" at the end is the alpha value and means your color is fully opaque (no transparency). To set transparency, choose a decimal value between 1 and 0. For example, to set 50% transparency, your values would be:
rgba(102,204,102,.5);