topbar surgeon / tbs menu / tbs logos · 2015-01-18 · /* top bar surgeon generated css begin…...
TRANSCRIPT
TopBar Surgeon / TBS Menu / TBS Logos © Andrew Tavernor - BigWhiteDuck Stacks 2014-5
Doc Version: 1.0.1c
THESE INSTRUCTIONS ARE IMPORTANT. PLEASE MAKE SURE YOU UNDERSTAND HOW THE TOP BAR IS CONTSTRUCTED
BigWhiteDuck Support cannot help with usage of this stack but please do report any bugs you may find.
NOTES:
The TBS Menu Stack does not contain the Pill Bar and Logo Styler components and so these sections are not relevant.
The TBS Logo Stack just contains the items mentioned in the Logo Settings Section
2
Table Of Contents COMMON QUESTIONS AND OPERATIONAL TIPS ................................................................................... 5
FAQ ......................................................................................................................................................... 5 USING CUSTOM CSS GRADIENTS ........................................................................................................... 8 INSTRUCTIONS ........................................................................................................................................ 8 USING CUSTOM CSS TRANSITIONS FOR THE STICKY TRANSITION SETTING ...................................... 9
THE STRUCTURE OF A TOPBAR ............................................................................................................... 10 HOW THE TBS SETTINGS RELATE TO TOP-‐BAR ................................................................................ 10 STYLING MULTIPLE BAR STATES (STICKY OPERATION) .................................................................. 12 USING TWO TBS STACKS FOR STICKY TOPBARS .............................................................................. 13
PREDEFINED TOPBAR MODES ................................................................................................................. 14 PILL BAR .............................................................................................................................................. 14 TAB BAR ............................................................................................................................................... 15
ABOUT SKINS & IMAGES ............................................................................................................................ 16 BUILT-‐IN SKINS ................................................................................................................................... 16 MAKE YOUR OWN SKINS ..................................................................................................................... 16
SETTINGS ......................................................................................................................................................... 17 STICKY STATE SETTINGS ....................................................................................................................................... 17
Apply to State: ..................................................................................................................................... 17 Sticky Compatibility: ........................................................................................................................ 17
BAR SETTINGS ......................................................................................................................................................... 17 Hide Instructions: .............................................................................................................................. 17 Bar Color: .............................................................................................................................................. 17 Bar Skin: ................................................................................................................................................. 18 Apply to DropDowns: ....................................................................................................................... 18 Bar Opacity: .......................................................................................................................................... 18 Contain Background: ........................................................................................................................ 18 Sticky Transition: ............................................................................................................................... 19 Auto Height: ......................................................................................................................................... 19 Content Padding: ................................................................................................................................ 20 Content Margins: ................................................................................................................................ 20
TEXT SETTINGS ....................................................................................................................................................... 20 Use Google Font: ................................................................................................................................. 20 Google Font: ......................................................................................................................................... 20 Italic ......................................................................................................................................................... 20 Font Weight: ......................................................................................................................................... 20 Fallback Font: ...................................................................................................................................... 20 Font Size: ............................................................................................................................................... 20 Text Colors: .......................................................................................................................................... 21 Text Shadows: ..................................................................................................................................... 21
PILL & TAB BARS ................................................................................................................................................... 21 Pill Bar: ................................................................................................................................................... 21 Tab Style Pill Bar: ............................................................................................................................... 21 Apply to DropDowns: ....................................................................................................................... 22 Turn On Shadows: ............................................................................................................................. 22 Inset Shadows into Bar: .................................................................................................................. 22
MENU BAR ............................................................................................................................................................... 23 Menu Color: .......................................................................................................................................... 23 Opacity: .................................................................................................................................................. 23 Detailed Padding: ............................................................................................................................... 23
3
Auto DD Padding: ............................................................................................................................... 23 Detailed Margins: ............................................................................................................................... 24 Auto DD Margins: ............................................................................................................................... 24 Height: .................................................................................................................................................... 24
MENU ITEMS ........................................................................................................................................................... 25 Color: ....................................................................................................................................................... 25 Skin: ......................................................................................................................................................... 25 Make Into Buttons: ............................................................................................................................ 26 Button Settings: .................................................................................................................................. 26 Inset Shadow: ...................................................................................................................................... 26 Use Round Corners: .......................................................................................................................... 26 Change Line Height: .......................................................................................................................... 26 Detailed Padding: , Detailed Margins: ....................................................................................... 26 Exclude Dropdowns: ........................................................................................................................ 26 Supress Flicker: .................................................................................................................................. 26
MENU ITEMS: MENU TEXT MARGINS AND PADDING SUB-‐SECTION ............................................................ 27 Auto Width: .......................................................................................................................................... 27 Detailed Padding: ............................................................................................................................... 27 Detailed margins: ............................................................................................................................... 27 Caret Color: ........................................................................................................................................... 27 Caret Positioning: .............................................................................................................................. 27
DIVIDER .................................................................................................................................................................... 28 Show Divider: ...................................................................................................................................... 28 Color: ....................................................................................................................................................... 28 Size and Position: ............................................................................................................................... 28
ACTIVE ITEM ........................................................................................................................................................... 29 Background: ......................................................................................................................................... 29 Active Item Skin: ................................................................................................................................ 29 Image Scale: .......................................................................................................................................... 30 Item Underline: ................................................................................................................................... 30
ACTIVE ITEM: TEXT SETTINGS SUB-‐SECTION ................................................................................................... 31 Color: ....................................................................................................................................................... 31 Capitalize: .............................................................................................................................................. 31 Text Underline: ................................................................................................................................... 31 Active Shadow: ................................................................................................................................... 31
HOVER SETTINGS .................................................................................................................................................... 32 Text Color: ............................................................................................................................................. 32 Background Color: ............................................................................................................................. 32 Hover Image: ....................................................................................................................................... 32 Text Underline: ................................................................................................................................... 32 Item Underline: ................................................................................................................................... 32 Hover Shadow: .................................................................................................................................... 32
HOVER SETTINGS – ACTIVE ITEM HOVER SETTINGS ....................................................................................... 33 Text Color: ............................................................................................................................................. 33 Background Color: ............................................................................................................................. 33
DROP DOWN SETTINGS ......................................................................................................................................... 34 Fade In Dropdowns: ......................................................................................................................... 34 Fade Time: ............................................................................................................................................ 34 Opacity: .................................................................................................................................................. 34 Dropdown Color: ............................................................................................................................... 34 Dropdown Skin: .................................................................................................................................. 34 Text Alignment: .................................................................................................................................. 35 Dropdown Shadow: .......................................................................................................................... 35 Border Color: ....................................................................................................................................... 35 Border Width / Detailed Border: ................................................................................................ 35 Round Corners / Detailed Rounding: ........................................................................................ 35 Advanced Sizing: ................................................................................................................................ 36 Left Padding: ........................................................................................................................................ 36 Right Padding: ..................................................................................................................................... 36
4
Top Padding: ........................................................................................................................................ 36 Bottom Padding: ................................................................................................................................. 36 Line Height: .......................................................................................................................................... 36 Width: ..................................................................................................................................................... 36
LOGO SETTINGS ...................................................................................................................................................... 37 Advanced Sizing: ................................................................................................................................ 38 Hide Preview Area: ........................................................................................................................... 38 Preview: ................................................................................................................................................. 38 Load your preview Image Here: .................................................................................................. 38 Position Units: ..................................................................................................................................... 39 Top: .......................................................................................................................................................... 39 Left: .......................................................................................................................................................... 39 Image Size Units: ................................................................................................................................ 39 Height: .................................................................................................................................................... 39 Auto Height: ......................................................................................................................................... 39 Width: ..................................................................................................................................................... 39 Auto Width: .......................................................................................................................................... 39 Scaling: ................................................................................................................................................... 39 The following settings allow you to gain complete control of the CSS settings for the logo. Only use them if you know what they mean! ...................................................... 40 Overflow Handling: ........................................................................................................................... 40 Float: ........................................................................................................................................................ 40 Clear: ....................................................................................................................................................... 40 Position Type: ...................................................................................................................................... 40 z-‐Index: ................................................................................................................................................... 40
5
Common Questions and Operational Tips
FAQ Why are many controls replicated from the TopBar stack.
• To enable you to style a sticky top bar with different settings “when fixed”. For example, changing the color or opacity when fixed requires this to be set in TopBar Surgeon.
• When using custom layouts, such as contained background or pill bar you will need to set certain properties manually. Most notable of these it the bar color. A standard TopBar has its background color applied to the top-bar-wrapper. In contained or pill mode the color is applied to either top-bar or the menu section. Because TopBar surgeon does not use JavaScript to get the properties of the TopBar from the page, it does not know what the background color is.
! This behavior is a conscious design decision. By making TopBar Surgeon
code independent of of your TopBar settings, the generated CSS can be applied to many different pages or even different sites with predictable results.
What is the meaning of the Default Settings for things like color and background.
• Any control set to Default will use the CSS style that it inherits. • In the case of only one TopBar Surgeon stack on your page, the Default
setting will be the style set in the TopBar Stack – for example with Background color set to default, your TopBar will be the color set in the TopBar – Styles settings of the TopBar stack
• If you are using two TopBar Surgeon stacks with a sticky TopBar (one to control the static state and one to control the fixed state) then the Default state refers to the settings of TopBar’s immediate ancestor. This is the way CSS inheritance works.
Sticky TopBar Color : RED
Over-ride Color
TBS: Apply to State:Default
TBS: Apply to State:Fixed
Color: BLUE
YES
NO
Default Setting in Bar Settings refers to:
RED BLUE
6
What is the Bar State Control For?
• If you are not styling two separate states for a Sticky TopBar leave this set to default.
• When set to default BarState will apply the settings you make in TopBar
Surgeon to each and every state of TopBar* o There are noteable exceptions to this in the case of Pill
Bars which are never displayed on Small (Mobile) Screens. Pill Bars are only displayed on “Tablet Up” sized screens.
o If you want a Pill Bar on a mobile screen – write your own CSS, they look rubbish!
• If you are styling a Sticky TopBar, with different styles for the static (un-Stuck) and Fixed (stuck) states, then you will use two TBS stacks. The first will be set to Bar State: Default, the second to Bar State: When Fixed. See the section: Styling Multiple Bar States (Sticky Operation) for detailed instructions on how to deal with two state Sticky TopBars.
Why do I need to load a separate preview image for Advanced Logo Stying?
• In order to provide a preview image for logo styling, TBS defines a new TopBar of its own (from the Foundation component source) in the edit preview area. This obviously has no knowledge of the image you have set in Joe’s Foundation TopBar stack.
• Make sure that you use exactly the same image in both to ensure that your TopBar will appear as you expect.
• It is recommended to style your image in TBS – Logo Settings first as you may need to make alterations to the source image to get the effect you want. Once you are happy with the result simply load that image as a custom logo in the TopBar – Title Area settings, with Content set to Custom.
Where are the CSS codes that TBS has generated?
• The stacks plugin for Rapid Weaver places all the CSS styles in a file named in the format stacks_page_pageX.css. Where X refers to the unique page where the stack resides.
• You can find this file by using the Develop > View Source menu in Safari and then clicking on the Resources button (Safari Developer mode must be enabled in Preferences.)
• In Chrome it is under View > Developer > Developer Tools, again then click on resources and you will see a list of all the files that current page is using.
!
7
• To view the Top Bar Styler generated CSS simply scroll down the generated .css file described above and you will find the CSS between two comments as follows:
/* Top Bar Surgeon Generated CSS BEGIN… */
Generated CSS is here
/* …END Top Bar Surgeon Generated CSS */
• If you have two Top Bar Surgeon stacks on the page then you will have another set of codes below the first. They appear in the order that you placed the TBS stacks on the page. The second stack should only be used for styling the .fixed or “stuck” state of a sticky TopBar. The codes for this case will be further identidied as follows:
/* Top Bar Surgeon Generated CSS BEGIN… */ /* FIXED STATE CSS */
Generated CSS is here
/* …END Top Bar Surgeon Generated CSS */ What do I need to do with the CSS codes mentioned above?
You don’t need to do anything. As long as your TopBar Surgeon is on the page your TopBar will be styled according to the settings you have made. Copy your TopBar Surgeon stack to another page and that TopBar will be styled too.
What can I do with the CSS codes mentioned above?
You can copy the CSS codes and paste them into RapidWeaver’s page inspector or Foundation Site Styles. If you are using RapidWeaver version 6 you can copy the styles once and apply them to your whole site. This avoids having to have a TBS stack on any of your pages. Remember though that once you do this the settings are fixed.
How do I save my TopBar Surgeon Settings.
Why not keep a project with your TBS stacks setup and ready to go in it. You could have several pages, each with a different TBS stack styling on it. Don’t forget that you can also create a User Stack and just drag that out of your stacks elements container when you need it.
Why Doesn’t Top Bar Surgeon Have a Global Settings Option?
There are simply too many settings to allow this to be practicable. Performance of Rapid Weaver and Stacks would be severely degraded.
8
Using Custom CSS Gradients Several of the TopBar Surgeon controls allow use to add a custom CSS gradient. This not only means that you can use any possible gradient with as many colors and opacity elements as you like but it also cuts down on the, already very large, number of Settings in the TBS Stack settings pane. The only real limitation with this approach is one of a slight added convenience to you the user, but the potential gains are well worth it. After all you are only going to be adding one or possibly two gradients to your TBS stack and that will serve your whole site.
Instructions There are many easy to use gradient generators on the web. Choose whichever you like the most. This example with use the one from ColorZilla which can be found at: http://www.colorzilla.com/gradient-editor/ Simply define your gradient on the site, and copy the CSS it generates. Here’s the inconvenient part… You need to add the text: !important before each and every semi-colon (;) at the end of each statement. These may not be at the end of a line, as some lines are long and wrap to the next line. Do this in a text editor or a word processor. When your done it should look something like this: background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.11) 3%, rgba(255,127,127,0.46) 91%, rgba(211,63,63,0.48) 96%, rgba(183,0,18,0.5) 100%) !important; /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(3%,rgba(255,255,255,0.11)), color-stop(91%,rgba(255,127,127,0.46)), color-stop(96%,rgba(211,63,63,0.48)), color-stop(100%,rgba(183,0,18,0.5))) !important; /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.11) 3%,rgba(255,127,127,0.46) 91%,rgba(211,63,63,0.48) 96%,rgba(183,0,18,0.5) 100%) !important; /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.11) 3%,rgba(255,127,127,0.46) 91%,rgba(211,63,63,0.48) 96%,rgba(183,0,18,0.5) 100%) !important; /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.11) 3%,rgba(255,127,127,0.46) 91%,rgba(211,63,63,0.48) 96%,rgba(183,0,18,0.5) 100%) !important; /* IE10+ */ background: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.11) 3%,rgba(255,127,127,0.46) 91%,rgba(211,63,63,0.48) 96%,rgba(183,0,18,0.5) 100%) !important; /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#80b70012',GradientType=0 ) !important; /* IE6-9 */ As you can see amidst all this there are only actually 6 “!importants” needed (highlighted). This is because the background statement is repeated 6 times to cover all possible browsers. A more complex gradient will have more than 6 however. Once done simply paste this into the CSS Gradient Text Box of your chosen setting.
9
Using Custom CSS Transitions for the Sticky Transition Setting
This is a similar process to the one for custom gradients but you DO NOT need to add !important to the end of the lines. Because we are adding a CSS style that is not part of Foundation for Rapid Weaver we don’t need to override the default one with an !important. Find your favoruite CSS Transition Generator on the web, copy the code that it creates and past it into the Transition text box that appears when you check the Sticky Transition Setting. A good one called Ceaser can be found at:
http://matthewlein.com/ceaser/ Ensure that you paste the code in its entirety including the start that reads “Transition:”. The Sticky Transition in Top Bar has a built in default ease transition which may well suffice for your needs without alteration. Just for reference here it is, you can edit it to change the timings and then paste it back in.
transition: all 0.5s ease-in-out 0.1s; Obviously more complex transtions such as bounce and other cubic-bezier functions will have a lot more code but just paste it all in just the same.
10
The Structure of a TopBar If all you want to do is change basic settings then you can probably skip this section although I would advise anyone to read if you want to understand how TopBar is defined and how it relates to the settings in TopBar Surgeon.
Figure 1: Simplified Structure of a TopBar
The color coded structure in Figure 1. Is a simplified graphical representation of the HTML structure of a TopBar. top-bar-wrapper is the container that holds the topbar. In normal operation this is where the background color resides and it occupies 100% of its parent (e.g. the page, or a column etc)
top-bar is the main container that holds all the elements that make up the navigation system including the title-area (logo, site title and slogan) and sections which each contain content. sections (left, center & right) contain the drop-zone and menu items. The configuration of these sections is determined by the settings that you make in the TopBar stack settings. For example, if you select Alignment:Right then your menu items will be in the right section.
How the TBS settings relate to Top-‐Bar
! This is how the Contain Within Body setting works. Top-bar-wrapper displays a full width background color but top-bar within it is constrained to the width of the body and has a transparent background.
Using TopBar Surgeon you can take this one step further and contain the background to the body using the Contain Background setting. This works by simply setting the top-bar-wrapper background to transparent and coloring the top-bar instead. This is a much more robust way of doing things in a responsive environment than forcing margins onto top-bar-wrapper
11
Figure 2 TBS Settings
Bar Settings These are pretty obvious and don’t require any additional information here. See the detailed information in the Bar Settings Section
Menu Bar The menu bar section makes changes to the section container (see The Structure of a Top Bar) that holds the menu items. So in Figure 2. the menu bar has had a background color of aqua blue applied to it while the Bar settings have the default black background applied.
Menu Items The menu items are the series of list items that make up the clickable links that you see in the top bar. Each one is a member of an unordered list and as such has its own container. In figure 2. the Menu Item borders have been set to dotted lines so that their boundaries are visible.
Figure 3 Menu Items after Styling
Figure 3. shows the menu items after they have had a little styling. With Show as Buttons selected their corners have been rounded, an inset shadow has been applied and a semi transparent skin image applied to the Menu Items background. In order to space the buttons a 5 pixel left & right margin is applied to the Menu Bar Settings (Remember: margins apply to the container). Applying margins in the Menu Item Settings will give more spacing between the text contained in the items (buttons) and their outside borders.
Notice how the ‘appleBar’ skin applied to the Bar still shows through the button skin. By combining these effects dramatic results can be easily achieved.
12
Styling Multiple Bar States (Sticky Operation)
Foreword : Inheritance As with many of the advanced settings used in TopBar Surgeon it is important to realize that the principle of inheritance in CSS will affect the results that you obtain from any given setting. The fixed state of a sticky toolbar (which we will refer to as stuck) inherits all its style properties from the “normal” TopBar. If you have overridden, for example, the dropdown color, then this will be carried through to the fixed state unless you tell TBS otherwise. This seems, on the surface, to be fine and present no problems at all but you can sometimes experience unexpected styling if using advanced features such as the pill bar for the static case and a normal fixed TopBar when stuck. The obvious solution is for TBS to output the full CSS style codes for every element for the stuck case. This however is very inefficient and produces many lines of, often unnecessary, CSS in web pages. The way that the stack settings user interface works is quite basic and does not make it easy to have logical settings to account for all possibilities in this complex scenario. For this reason, the Sticky Compatibility option has been included. This will write out more verbose CSS when using dual styled sticky TopBar’s and hopefully sort out any inheritance issues with minimal manual restyling necessary. Even with this setting the priority has been to generate CSS that is as optimized as possible so that your web pages will not be filled with unnecessary code.
13
When 2 TopBar Surgeon stacks are present on the page with both
Apply to State properties set to Default:
TopBar will be styled according to the settings in the second TBS stack
When a TBS stack has its Bar State property set to When Fixed:
The styling that it applies WILL NOT be shown in the RapidWeaver edit mode (as the TopBar is not Fixed in Edit Mode) – makes sense if you think about it.
This behavior actually makes it easy to style your fixed TopBar in edit mode:
1. Style your TopBar as normal using TBS
2. Copy the TBS stack and paste a second copy below the first one
3. The second TBS stack is now controlling the style of the TopBar in edit
mode – so apply all your fixed settings and make the TopBar look how
you want
4. Finally switch the second TBS stacks’ Apply to State to When Fixed
and your ready to preview
5. If you want to make further changes to your fixed TopBar settings just set
the Apply to State back to default and that stack will be used to display
the preview of TopBar in Edit Mode – just remember to set it back to
When Fixed before previewing or publishing.
Using Two TBS Stacks for Sticky TopBars TopBar Surgeon has been designed specifically to handle sticky TopBars in a way that requires minimum input from the user. By using the Apply to State selector you can simply tell TBS which state the stack applies to. In this way you can style the non-stuck Topbar to your liking and then simply copy and paste the stack onto the page, change the Apply to State in the second stack and all your styling is preserved for the sticky state. You can than go ahead and make the changes to the sticky state (for example a taller bar or padding changes to the items so that they animate on stick) while retaining the overall look of your design.
!
14
Predefined TopBar Modes
Pill Bar When Pill Bar is selected in the Menu Bar settings the TopBar takes on the appearance of a Pill Bar, like the one used by Apple and many other sites.
Figure 4. Pill Bar in edit mode
When in Pill Bar mode the display of Site Logo, Title and Slogan are disabled regardless of the settings in the TopBar stack.
Pill Bar setting utilizes the Menu Bar Area to form the Pill.
(see: How the TBS settings relate to Top-Bar for a description of the Menu Bar)
• top-bar-wrapper and top-bar both have their background property set to
transparent.
• The chosen bar color is applied to the background of the menu bar area
Both of these settings are applied automatically when Pill Bar is selected. • Using the Apply To DropDowns setting means that Dropdown menus are
adjusted to reflect the pill bar style. First level dropdowns will have the only the bottom corners rounded to match the Pill settings. 2nd level and subsequent dropdowns will have all 4 corners rounded to match
Why do it this way… It seems complicated
• By using the section (ul) rather than the topbar itself then many more layouts are possible, for example:
• Vertical Pill Bars for use in sidebars or Foundation Pillar Stacks.
• The pill corners can be rounded, a border added and a drop shadow displayed which is constrained only to the area of the menu bar so you can achieve things like the following:
!
15
Figure 5.Vertical Magellan TopBar
Figure 6. Right Aligned Floating/Sticky Pill Bar
Figure 7. Pill Bar over Floating Body
Tab Bar Next setting down from the Pill Bar is a checkbox that says Tab Style Pill Bar, which will create a set of tabs. The bottom corners are not rounded and the bottom border can optionally be hidden.
TIP
Figure 8. Tab Bar used with Custom HTML menu to trigger Foundation Dropdowns in Mega width mode
By setting the shadow to inset, you can create a nice 3D effect without the need to apply a skin image.
16
About Skins & Images
Built-‐In Skins There are several built in skins supplied with the TopBar surgeon stack that will apply common styles to your TopBar. You can also find these skins in the Stack Media Container in the Group : Top Bar Skins for use on menu items etc. The Skins are very efficient ways to add interest to your TopBar because they are of an extremely small file size. Each skin is just 1 pixel wide and 100 pixels high (to allow for taller TopBars without stretching the image} and is a grey scale, semi- transparent .png file.
The colors on the samples below are not built into the skin they are the TopBar background color showing through.
AppleBar 1 AppleBar 2
Convex Bar Concave Bar
Channel Bar Dark Channel Bar
Make Your Own Skins
The Manual Skin Setting where you can select any image file to use a a TopBar backround. This may be a solid image and of any size (it can be scaled using the Image Scale setting). It is however much more efficient for page load times to use either small tile images or 1 pixel wide strip images like the ones above. If you find an effect you like, simply copy the image into your favourite image editing software, turn it into a greyscale image, reduce the opacity and finally when you are happy with it resize it to 1 pixel wide and export as a 24-bit png file.
!
17
Settings Sticky State Settings
Apply to State:
Default:
Applies this instance of TBS’s settings to the current TopBar on the Page. This will include both the static and fixed state of a sticky TopBar .
Unless you are using a sticky TopBar with separate styling for the fixed state leave this setting as is.
When Fixed:
Applies to a sticky top bar when in its fixed State only. This setting allows you to define separate styles for the TopBar as it fixes to the top of the page when scrolled up. Please read the Section titled “Styling Multiple Bar States (Sticky Operation)” before you use this setting
Sticky Compatibility: When selected this mode will generate more verbose CSS code in order to ensure proper overriding of settings when using multiple TopBar styles as described above. This setting is only needed when Apply to State is set to “When Fixed”. If your TopBar styles are behaving as desired you don’t need to enable this. Use it only when needed.
Bar Settings
Hide Instructions:
Show or hide the stack content instructions and preview when Logo Styling. This setting is duplicated in the Logo Settings.
Bar Color:
Default: Do nothing.
Override Color: Select a new bar background color
Transparent: Make the bar background transparent
18
Bar Skin:
Apply an image to the bar background
Manual Skin:
Select an image to display on the bar background. If you use a semi-transparent background the color of the bar will show through.
Predefined Skins:
TopBar Surgeon contained six predefined Bar Skins to alow you to quickly style your TopBar. These skins are 1 pixel wide x 100 pixels high .png files. They are low opacity greyscale and allow the selected bar color to show through. These skins are also placed in the Stacks media container for you to drag onto other areas of the TopBar that accept skins, such as buttons and dropdowns.
You can easily create you own skins and use them in manual mode.
Apply to DropDowns:
Automatically applies the selected bar skin to the Dropdown menus
Bar Opacity:
Change the opacity (transparency) of the bar background.
Contain Background:
YOU MUST HAVE “Contain Within Body?” TURNED ON IN TopBar – Setup for Contain Background to work
This setting will cause the background fill to be contained to the same width as the “Contain Within Body” setting in TopBar Settings, rather than just the bars content. This setting can be particularly effective on Floating Body type pages where you don’t want the TopBar to appear wider than the body.
Contain Background works by turning off the Top-Bar-Wrapper background fill and instead applying a background fill to Top-Bar itself (see section The Structure of a TopBar).
Important: Because Top-Bar has no background set in Foundation for RapidWeaver, TBS cannot inherit the background color set in the stack. You must, therefore, select a manual Bar Color in TBS-
!
19
Bar Settings. When you select Contain Background, an initial color f #666666 is automatically applied.
Contain background is implemented in this way so as not to interfere with the responsive behavior of TopBar. No margins are set to push TopBar away from the edge of the page, it is purely a background color effect.
With narrower browser widths and on mobiles and tablets the TopBar will still fill the full width of the screen. The contained background color will simply follow the width of the contained content set in the TopBar stack.
Sticky Transition:
Applies to Sticky TopBars when styled with two TBS stacks so that the static and fixed stylings are different – please read and understand the section “Styling Multiple Bar States (Sticky Operation)”
Use this setting with a Sticky TopBar to provide an animated effect as the TopBar becomes fixed. You can apply separate transitions to the fixed and default state TBS stacks which will correspond to the transitions as the TopBar sticks and unsticks respectively. Animated properties include the size of the bar and the positioning of the elements within it. So for instance you will see an animation if the When Fixed bar is either of a different size or if you have applied padding to the Manu Bar elements etc.
Manual CSS Transition:
You can paste in a complex CSS transition (with timing functions). An excellent online tool for generating transitions easily is Ceaser – found at http://matthewlein.com/ceaser/. Copy the code it generates and paste it into TBS.
You should paste the entire code generated starting with Transition: ……
Auto Height:
When checked this sets the TopBar height to Auto. The TopBar will automatically resize its height to contain its contents. This setting works with custom height settings and is useful if you have a lot of menu items that wrap onto a second line and apparently disappear from the TopBar.
20
Bar Padding:
Change the padding around the entire contents of the TopBar. This includes the Title-Area and the Menu Items. Individual elements padding can be changed in the Menu Bar and Menu Items Settings below.
Bar Margins:
Change the margins around the entire contents of the TopBar. This includes the Title-Area and the Menu Items. Individual elements margins’ can be changed in the Menu Bar and Menu Items Settings below.
For Pill Bars these setting will constrain the outer dimensions of the entire bar
Text Settings
Use Google Font:
This enables the use of Google Fonts in the TopBar INDEPENDENTLY of any Google fonts settings in the Foundation Theme. If you need your TopBar font to be different to your defined Google font in Foundation, use this setting.
Do not set Top Bar to use google fonts or inherit header fonts.
Google Font:
Ensure you type the name exactly is it appears on the Google Fonts website including spaces and numbers. Press Enter when done.
Italic
Make the font italic. Font italics faces are not available in all Google Fonts.
Font Weight:
See the Google Fonts Website for weights available for each font.
Fallback Font:
Use a serif or sans-serif font face if Google Fonts are not available online.
Font Size:
Override TopBar Font Size: Only needed with sticky TopBars where you want a different size when fixed.
21
Text Colors:
Override:
Change the color of the menu items individually as per:
Menu Text Color:
Title Text Color:
Slogan Text Color:
Text Shadows:
When checked enables text shadows.
Change the appearance of the shadows with the settings that are revealed. Apply shadow settings to:
Menu Shadow
Title Shadow
Slogan Shadow Pill & Tab Bars
Pill Bar:
When checked, puts the TopBar into Pill Bar mode.
Most pill bars will be used with the TopBar Align: Center setting. You can use Align:Left or Right to give a smaller left or right aligned pill bar. The pill bar is constructed from just the TopBar menu items, please read the section “Predefined TopBar Modes : Pill Bar” for a detailed description of how Pill Bar settings work
Tab Style Pill Bar:
Automatically squares off the bottom corners of a Pill Bar to make it appear as a Tab Bar.
Hide Bottom Border:
Hides the bottom border of the tab bar so its background runs into the content below.
22
Apply to DropDowns:
Pill Bar Settings will be applied to dropdowns in a smart manner. The first level of drop downs will only have the bottom corners rounded so that the top of the dropdown looks better against the TopBar. 2nd level and subsequent dropdowns will have all four corners rounded.
These s
Settings can of course be overrriden by using the DropDown Settings Below. Rounding is optional and set in the Pill Bar round Corners Setting Below.
Pill Border Settings:
Style the Pill Bar Border
Turn On Shadows:
Enables a drop or inset shadow for the Pill or tab bar as per the shadow settings below.
Figure 10: PillBar with Shadow
Inset Shadows into Bar:
Applies the shadow settings to inset into the bar rather than behind it. Using this setting you can give the bar a 3D appearance without the use of images or skins. This setting does however work well in addition to images and skins.
Figure 11: PillBar with Inset Shadow
Figure 9: Smart PillBar Corner Rounding
23
Menu Bar
Please see the section: How the TBS settings relate to Top-Bar for a detailed description of what is meant by the menu bar so that you can understand what these settings apply to.
Menu Color:
Default:
Override Color:
Transparent:
Opacity:
Change the opacity (transparency) of the Menu Bar background.
Detailed Padding:
Use to control the padding of the menu items. This can be useful if you want a taller top bar (perhaps to accommodate a larger logo) but don’t want the menu items to be centered in the bar.
Figure 12; Top Padding Example with Tall TopBar
Auto DD Padding:
Notice how the Top Padding is not applied to the DropDown as would be normal by inheritance. This is using the Auto DD Padding setting. Top Bar Surgeon does this for you automatically to improve the look of your menus. If you wish to add padding to the DropDowns you can do so in the DropDown Settings and Disable Auto DD Padding.
24
Detailed Margins:
Used to adjust margins around the menu bar. For example applying a right margin will move all the menu bar items to the left (away from the right hand side of the TopBar). This is useful to align menu items with padded page content or in Floating Body designs.
Be extremely careful when applying margins, particularly top margins as you can seriously affect the look of descendant’s such as the DropDown items. Padding is much safer and can achieve the look you require in most cases.
Auto DD Margins:
When enabled, the Dropdown menus do not inherit the Detailed Margin settings above. Generally, it is not desirable to apply margin changes to the vertically aligned dropdown menus. You can of course disable this but careful setting is necessary of the Dropdown margins to prevent them from becoming unusable.
Height:
Adjust the height of the menu items container.
DO NOT ALTER THIS VALUE UNLESS YOU ARE FAMILIAR WITH THE CSS BOX MODEL AND UNDERSTAND THE UNDERLYING STRUCTURE OF THE TOP BAR - YOU MUST ALTER MARGINS AND PADDING ABOVE FOR THIS TO TAKE EFFECT. It is easy to prevent dropdowns from functioning if you get these settings wrong. You have been warned.
!
!
25
Menu Items
Color:
Change the color of the menu items independently of other TopBar text elements
Skin:
Select either an image or gradient to cover the background of each menu item. Using partially transparent items allows the background color to show through.
Many different effects can be achieved by altering the Scaling of the Image.
You can used Fixed Width if for example your background skin is a circular button and you want all items to remain circular without being distorted dependent on the width of the menu item (which is determined by the length of the text that it contains.)
Using these settings it is possible to make a TopBar that looks nothing like a TopBar! For example:
Figure 13: TopBar with Fixed Width Item Skins and Transparent Background
Just to prove that this is a real TopBar, here it is in Edit mode:
Figure 14: Styling the Round Button TopBar in Edit Mode
!
26
Make Into Buttons:
Gives the menu items appearance of buttons. Note that they are not true buttons just made to look like discrete buttons using shadows and border. By the appropriate use of skin images for the hover state, it is easy to even give them the appearance of being depressed on hover.
Button Settings:
Apply Shadow:
When checked the full range of shadow settings specified in the settings below it will be applied to the Buttons.
Inset Shadow:
Use Round Corners:
When checked the rounding settings specified in the settings below it will be applied to the Button corners.
Change Line Height:
The height of the menu elements where the text sits. The example in Figure 13 uses this setting set to 60px to match the size of the skin image used.
You can also reduce or increase this value to control vertical alignment when used with padding.
Detailed Padding: , Detailed Margins:
Use these settings to space out your menu items as you wish. This is particularly useful if you are displaying images or using the Make into Buttons setting. For example to introduce a 10px space between each of the buttons just set the Left Margin to 10px.
Exclude Dropdowns:
When enabled this setting stops the DropDown menus from inheriting changes you make to the item margins. . You can of course disable this but careful setting is necessary of the Dropdown margins to prevent them from becoming unusable.
Supress Flicker: (Available with Detailed Margins Selected)
Enabling suppress flicker will attempt to stop any flicker or color flashing on Hover if you have added inappropriate margins or combinations thereof in the various settings. continued…..
27
NOTE: You will have to manually set the hover backgound with this option enabled, the default TopBar Hover setting will be disabled.
Try not to use this setting as it usually indicates that another setting is inappropriate.
Menu Items: Menu Text Margins and Padding Sub-‐Section
Auto Width:
Detailed Padding:
Detailed margins:
These settings allow you to change the margins, padding and text width for the menu items. This is really useful if you want to use an underline effect for Active and/or Hover and you only want to underline the width of the text not the whole item container width.
This is the type of effect you can achieve:
Figure 15: Top Bar with Auto Width Undelines
• Set Active Item Underline and/or Hover Item Underline to on.
In this case both are set to Red with a thickness of 2px. • Set Auto Width On, • Left & Right Margins to 15px • Left and Right Padding to 0.
You can of course use the text underline settings but then you have no control of the width of the line and it will be the same color as the text and very close to it.
Caret Color:
Set the color of the caret used to indicate the presence of a dropdown.
Caret Positioning:
Move the Caret Up/Down and Left/Right to you requirements. This is particularly useful if you have used the Change Line Height feature and want to further personalize your positioning.
28
Divider
Show Divider:
This setting is only needed if you are styling a Sticky Top Bar with a different style when fixed.
Default:
Used in almost all circumstances. Just use the TopBar stack settings.
Show*:
Show the Dividers if they have been hidden by another TBS stack.
Hide*:
Hide the Dividers.
* Dividers must be enabled in the Foundation Top Bar Stack for these settings to work.
Color:
Default:
Use the default color for dividers from the Foundation TopBar stack
Override:
Specify a different color for the dividers.
Size and Position:
Height:
Change the height of the Divider line
Top Margin:
Add a Top Margin to the Divider to move it down
Width:
Change the Width of the Divider. (Default is 1px)
!
Figure 16: Dividers set to Red, 6px wide, 6px high, Top Margin 18px
29
Active Item
Background:
Default:
Use the setting specified in the Foundation TopBar stack.
Color:
Choose a custom color to use as the background for the Active Item. You must specify this a an RGB color (Red, Green Blue) where black is 0,0,0 and white is 255,255,255. You can use a website such as http://www.colorpicker.com to get the values.
Enter the values for Red, Green and Blue in the input text boxes.
Opacity:
Choose the opacity (transparency) of the background color.
None:
Set the background to none. This setting is only used in the second TBS stack if you are using two TBS stacks and you want to override the setting made in the first stack. i.e. If you set a background color for the Static state but don’t want a background for the fixed state.
Active Item Skin:
Default:
Image:
Select an image to skin the Active Item. If this is semi-transparent the background color will show through. You can use a full size image or a 1px wide skin. The built in skins can be found in Stacks Media in the Group: TopBar Skins.
!
30
Image Scale:
Set the scaling of your image so that it looks the way you want. Use the Fixed Width Setting to prevent distortion of images such as circles. See the Menu Items section for a detailed description of this.
CSS Gradient:
Use a custom CSS gradient. An easy to use and very powerful gradient generator can be found at http://www.colorzilla.com/gradient-editor/.
Follow the instructions in the section Common Questions and Operational Tips on how to edit the gradient prior to pasting it into the CSS Gradient text box.
None:
Set the skin to none. This setting is only used in the second TBS stack if you are using two TBS stacks and you want to override the setting made in the first stack. i.e. If you set a skin for the Static state but don’t want a skin for the fixed state.
Item Underline:
Underline Color:
Thickness:
Underline the Active Item Container by showing its bottom border. If you want to limit the width of this underline to the width of the text in the Menu Item then see the instructions in the Menu Text Margins and Padding Sub-‐Section
!
31
Active Item: Text Settings Sub-‐Section
Color:
Default:
No active item text color.
Override:
Choose a color for the text of the Active item. This is the menu item referring to the page that the user is currently viewing.
Capitalize:
Capitalize the text of the currently active page.
Text Underline:
Underline the text of the currently active page. Note this is a simple text underline. The Item Underline setting above provides much more styling options.
Active Shadow:
Apply a shadow to the Active Item. You can specify the offsets, color and blur for a variety of effects.
32
Hover Settings
Text Color:
Default:
Color:
None:
See the description of these settings under Active Item, the behavior is the same.
Background Color:
Default:
Color:
None:
See the description of these settings under Active Item, the behavior is the same.
Hover Image:
Choose an Image to be displayed when the Item is Hovered Over.
Text Underline:
See the description of these settings under Active Item, the behavior is the same.
Item Underline:
Underline Color:
Thickness:
Underline the Active Item Container by showing its bottom border. If you want to limit the width of this underline to the width of the text in the Menu Item then see the instructions in the Menu Text Margins and Padding Sub-‐Section
Hover Shadow:
Apply a shadow to the Hovered Item. You can specify the offsets, color and blur for a variety of effects.
33
Hover Settings – Active Item Hover Settings
These settings apply only to the Hover behavior of the Active Item
Text Color:
Default:
Color:
None:
Background Color:
Default:
Color:
None:
See the description of these settings under Active Item, the behavior is the same.
34
Drop Down Settings
Fade In Dropdowns:
When selected the dropdown will be faded in with an Ease Transition rather than just appearing in its default harsh manner. This gives a much more polished effect.
Fade Time:
Specify the time taken for the dropdown to fade in. Default 0.25s
Opacity:
Set the opacity (transparency) of the dropdown background.
Dropdown Color:
Default:
Use the TopBar Stack default styling for the dropdown background.
Color:
Choose a color for the dropdown background.
Transparent:
Make the dropdown background transparent.
Dropdown Skin:
Default:
Image:
Select an image to skin the dropdown with. If this is semi-transparent the background color will show through. You can use a full size image or a 1px wide skin. The built in skins can be found in Stacks Media in the Group: TopBar Skins.
Image Scale:
Set the scaling of your image so that it looks the way you want. Use the Fixed Width Setting to prevent distortion of images such as circles. See the Menu Items section for a detailed description of this.
35
CSS Gradient:
Use a custom CSS gradient. An easy to use and very powerful gradient generator can be found at http://www.colorzilla.com/gradient-editor/.
Follow the instructions in the section Common Questions and Operational Tips on how to edit the gradient prior to pasting it into the CSS Gradient text box.
Text Alignment:
Change the text alignment of the menu items in the Dropdown menu.
Default:
Left:
Right:
Centre:
Dropdown Shadow:
Adds a drop shadow to the Dropdown menus.
You can specify the offsets, color and blur for a variety of effects.
Border Color:
Choose the color of the dropdown border. Note this will only display if you set a width of 1px or greater in the setting below
Border Width / Detailed Border:
Set the width of the Dropdown Border.
Round Corners / Detailed Rounding:
Round the corners of the Dropdown Menu.
36
Advanced Sizing:
Enable advanced sizing control for the Dropdown menu contents.
Left Padding:
Right Padding:
Top Padding:
Bottom Padding:
Set detailed padding values for the menu items in the Dropdowns.
Line Height:
Change the line height of the menu items in the Dropdowns.
Width:
The percentage width of the Dropdown total width that is used to display the menu items.
37
Logo Settings
Logo settings are for advanced users. They allow you to control the positioning, size and behavior of the logo.
Using these settings you can create
• overflowing logos that expand beyond the constraints of the TopBar • large logos that bring more prominence • and many more effects depending on you imagination
For example:
Figure 17: TopBar with overflowing .png Logo #1
Figure 18: TopBar with overflowing .png logo #2
!
38
Advanced Sizing:
Enable the logo settings
Hide Preview Area:
Uncheck this setting to show the stack preview/help area on your Edit Page – you must do this as this is where the logo preview box will appear.
Preview:
Select this box to enable the logo sizing preview to be generated in the stack preview area.
When the two options above are set correctly you should see the following in your TBS stack:
Figure 19: Preview Logo Styler Ready for Operation
The Preview window contains a live vanilla TopBar generated by the TBS stack that will display your alterations to the logo settings in real time. It is necessary to do this as the Foundation Top Bar stack does not display custom images in Edit Mode. It is therefore also necessary to tell the TBS preview TopBar the identity of your image. This should be the exact same image, as you will load into the custom logo of the Foundation TopBar Stack.
Load your preview Image Here:
Browse for or drop the logo image file that you will add to your Foundation TopBar stack. Ensure that you use the same image for reproducible results.
39
Position Units:
Set the units used for logo positioning to either pixels or as a percentage.
Top:
Top position of the logo.
Left:
Left Position of the logo.
Image Size Units:
Set the units used for logo sizing to either pixels or as a percentage.
Height:
Logo image height.
Auto Height:
Override Height Value and use Auto Height.
Width:
Logo image width.
Auto Width:
Override Width Value and use Auto Width.
Scaling:
Contain:
Fluid:
Cover:
Choose the scaling type to ensure best display of your logo dependent on the image type and how you are postioning it.
40
The following settings allow you to gain complete control of the CSS settings for the logo. Only use them if you know what they mean!
Overflow Handling:
Visible:
Hidden:
Scroll:
Default:
Inherit:
Set the CSS Overflow handling value.
Float:
Set CSS Float Property value
Clear:
Set CSS Clear Property Value
Position Type:
Relative:
Absolute:
Inherit:
z-‐Index:
Set the z-index of the logo.