{{indexmenu_n>20}} ====== Header Layout ====== This wiki page will go over the layout for the header section in the default design. The header section is contained in the sub template file **header.tpl**. Below is an explanation of how the different parts work together, by understanding this you will be able to better customize the look to your own desires. Since this uses RWD that responds to the size of the screen, in each instance it will first show the "small view", then the "large view", and any other "breakpoints" in between if there are any. This will give you an idea of what changing something will affect in the different screen sizes. ===== Overall Header Layout ===== The entire header for each page is contained in the sub template **header.tpl**. The header uses HTML 5
tags like so:
...
Note that you can have multiple
tags contained within the same page. For this reason, we also use CSS classes so that we can uniquely style the main "page" header, using the **.page** CSS class. That way you are free to use the
tag yourself for your own custom design without worrying about the default CSS attempting to style your own header. Note that the **clearfix** class is a special helper class to make sure any "floating" contents inside the
will not over-flow below the boundaries of the header((In other words, it keeps the contents from overlapping when there are "floating" elements contained inside the header)). The **clearfix** class can be used on any "container" element that has floating elements inside it. **Small View (Mobile):** {{ :startup_tutorial_and_checklist:design_configuration:specific_html_elements:header-overall-small.png }} The screenshot above shows the "header" as it will look in the small view, when either your browser width is small enough, or you are on a mobile device. **First Breakpoint: 50em (800px) wide and "up"**: {{ :startup_tutorial_and_checklist:design_configuration:specific_html_elements:header-overall-50em.png }} The screenshot above shows what the header looks like at the minimum width of 50em((which translates to 800 pixels when using default font size in the browser)) which is the first and only media breakpoint min-width that affects the header. There are other media break-points, but this is the only one that has a direct effect on the header layout. If your browser window is at least 50em (800px) the layout will change from the small header layout displayed in the first screenshot, to the larger layout above. Note how the logo now has a background behind it, and there are menu items and links and such displayed in the larger version. In the smaller version, those menu options are "tucked away", accessed by tapping on the menu icon in the top bar. ===== Header Logo ===== **Small View (Mobile):** {{ :startup_tutorial_and_checklist:design_configuration:specific_html_elements:header-logo-small.png }} **First Breakpoint: 50em (800px) wide and “up”:** {{ :startup_tutorial_and_checklist:design_configuration:specific_html_elements:header-logo-50em.png }} The same HTML markup is used for both the small and the larger view of the logo. The HTML below:
The first thing you will want to change, is the **title="Website Name"**, change all of them to match your own website name. There are 4 places to change that in the above HTML snippet. You will also want to adjust the **alt="Website Name"** that is part of the tag for your logo. There are different ways to display a logo, and the software has used a few different ways in the past. The current way actually inserts the logo as an image in the HTML. In the large view, it also will have a background image that works to separate the logo from the menu. It uses the above method for a few different reasons. The first is that it is the most semantically "descriptive" in the HTML code, it is pretty obvious that this is a logo image that links to the home page. Other methods, for instance using the logo image as the background image, are not as semantic and give the search engines less to go on. By having the image tag directly in the HTML instead of using a BG image for the logo, you can set ALT and TITLE attributes on the image so that it can be one more thing for the search engines to identify for your site. In the small view, if your logo is a larger width than the screen size, it will be resized to 100% screen width. That way users do not have to scroll just to see your full logo image. Although this is not very noticeable with the default logo being just 275px wide, if you use a larger logo you will notice this come into play. ==== Change the Logo ==== To change the logo, upload your replacement logo image to **my_templates / external / images / logo.jpg**. We recommend using a logo at about the same dimensions as the starting default template for best results. You can use a different size but you may need to make adjustments to the CSS for other parts of the header. ==== Use a Text Slogan ==== This is not often used, but it may be a good idea! Not only will it give your visitors something to help identify and remember your site, but the slogan text is actual text, not a graphic. This helps with SEO as well, it allows search engines to pick up on your slogan text so that the text is not "locked inside" an image, that would otherwise make your slogan invisible to search engines. To start using a slogan, just insert your text slogan into the right place, the header.tpl already has a ready-made place to do this, in the section below: For instance, if you wanted to use the slogan **Greatest Site in the Multiverse!**, it might look like this: Greatest Site in the Multiverse! Note that in the sample above, we went ahead and removed the HTML comments, since it should be pretty obvious that this is your slogan. Also removing the comments results in smaller size, so faster page loading. Be sure to [[#Test Your Changes]] to make sure that the slogan displays like you want. We have set up the default styles for the slogan, such that it should look good for a variety of different slogan lengths, on multiple size screens, but it is still good to test. Also consider making your slogan short and sweet, something that is easy for your visitors to remember and something unique to your site. You can actually use the slogan **instead of** the logo graphic if you want! To only use the slogan, remove this section from the header.tpl: And as always, be sure to [[#Test Your Changes]] to make sure everything lines up correctly with only using the slogan. If you want to remove the slogan altogether, in order to reduce the page size a little, you can remove the entire slogan section below: ===== Main Menu Links ===== The below explains how the main menu links work: **Small View (Mobile):** {{ :startup_tutorial_and_checklist:design_configuration:specific_html_elements:header-menu-small.png }} The main menu is exposed in the small (mobile) view by tapping on the menu icon in the top left corner, as illustrated in the screenshot above. **First Breakpoint: 50em (800px) wide and “up”:** {{ :startup_tutorial_and_checklist:design_configuration:specific_html_elements:header-menu-50em.png }} As illustrated in the screenshot above, the main menu links are displayed by default in the 50em and up media breakpoint. This is because 50em (800px) is the smallest width that the entire menu can "comfortably" display without causing the menu to wrap to a second line, or cause a horizontal scrollbar, or other similar undesired effects. Even though these 2 versions looks completely different, they are actually both displaying the same "contents", but using a media break-point to style them completely differently. Below is the "HTML Code", this is from the **header.tpl** template: Note that parts not dealing directly with the main menu have been skipped, denoted by the **...**. The last **** may not directly relate to this menu, but we chose to include it in the example above to emphasize the importance of paying attention to opening and closing HTML tags((If you are moving HTML around, it is important to pay close attention to make sure you are matching up starting and ending HTML tags or it can result in all sorts of shenanigans.)). Now to break it up some to explain each part below. ==== Small View Menu Icon ==== This line adds the menu icon in the top right corner for the small (mobile) view. This is how it works, so that you can make use of this yourself for your own changes: The class **fixed-link** is a special class, that does something in JS: If a link has this class, it will take the **href** value hash((The hash is the part starting with and including the hash # mark.)), remove the #, and use the result to find any elements on the page that has a matching CSS class. In this case, it uses **#page-bar**, so the JS looks for any elements on the page with the class **page-bar**. If that element is currently "hidden"((It does this check using something like: jQuery(...).is(':visible'); In other words, if **display: none;** is set, it is considered hidden.)), it will use jQuery to quickly "show" it using an animation. And conversely, if it is already **not hiding**, it will hide the element, again using an animation built into jQuery. This functionality is built in, and can be re-used, your requirements for using this: Use an tag similar to this: **Hint:** you can add something inside the ... tag (see the snippet above) like an image, and it will display on top of the button. Images inside this link will be styled to match the width / height of the button. The social connect addon does this when you are logged in with FB account to show the profile pic on top of the normal user menu link. Just doing this will show something that looks like the menu in the top left corner, you can further style it, even totally change it's look, by adding a second class to the tag and using that to style it as needed. The second part, now create a
(or other block element) with class **class-name**. You can change the **class-name** to whatever you want, just make sure the href and the class in your element match up. Then when the user taps on your menu item, it will show/hide the element matching the class. If this functionality interests you but you want to use it for a text link, you might look into using **section-collapser**((TODO: Document the section-collapser class)). ==== Menu Items ==== The HTML code above controls the menu links. This same HTML is used to display the smaller, and the larger view. === Adding / Changing Menu Links === If you would like to add your own link to the top, you would insert your own in the order you would like. The format for the link will need to be: Menu Link You can also **remove** items, or **change the order** of the links if you wish. When doing so, make sure you are copying the "entire" link entity, starting with **** tag and ending with the **** tag similar to what is in the code snippet above. Make sure you do not leave out any part of it or move/remove "too much". Remember to [[#Test Your Changes]] when you make any changes to the menu! === extra CSS class === About Us Contact Us You may notice in the screenshots, that the small view includes the "contact us" and "about us" links at the bottom, and the 50em breakpoint larger view, those are not part of the main menu. This is done by using the **extra** class on the link, any links that have this class will **not be displayed in the larger breakpoint**. We want to make it clear that we (Geodesic Solutions) strongly discourage having any parts of the page inaccessible to one size or another. You can see the [[designers:philosophy]] page for more info. In this case, even though the links are displayed on the small view and hidden on the larger breakpoint if they have the **extra** class, those same links are replicated as text links above the main menu. So it is used as a way to basically move where the link appears in one view or the other. It is usually not a good idea to completely hide a link in one view or another((Of course you are free to do that if you really want to for some specific reason.)) without providing the link in an alternate location "close to" the original. ===== About Us / Contact Us Links ===== **Small View (Mobile):** {{ :startup_tutorial_and_checklist:design_configuration:specific_html_elements:header-about-links-small.png }} Note that in the small view, the about us and contact us links are made to be part of the main menu, tucked away so that you tap on the menu icon in the top left corner to view. **First Breakpoint: 50em (800px) wide and “up”:** {{ :startup_tutorial_and_checklist:design_configuration:specific_html_elements:header-about-links-50em.png }} The **about us** and **contact us** links are done a little differently. This is one of the very few places that the small view and the larger view are displayed by different markup. Note that we advise to avoid this technique as much as possible. We actually did come up with a solution that still used the same markup for both, but it was so complex that it actually took **more** markup then having 2 versions of the same thing in the HTML, so we opted to make an exception in this case. The **small view** is displayed with the 2 tags near the bottom of the snippet above. The **large view** is displayed by the