My Instructions
%20Instructions
%20Instructions
%20Instructions
%20Instructions
User Manual:
Open the PDF directly: View PDF 
.
Page Count: 35
| Download | |
| Open PDF In Browser | View PDF |
REFERENCE GUIDE Side Navigation Template Contents Introduction Changing Logos Changing the Hero Image Changing Colors Changing Quick Links Changing Variables 3 4 11 15 23 33 -2- Introduction Welcome to the Side Navigation Template Reference Guide. This guide outlines quick custom changes that can be made to the templates to fit your brand. If you need assistance in implementing the templates in your project, please contact MadCap Technical Support at https://www.madcapsoftware.com/support/. -3- Changing Logos The logo needs to be replaced in a skin file (Side-Navigation.flskn) and a master page (Home-Page.flmsp). Tip: Before selecting a new logo in these files, you should save your image at the desired size. The dimensions of the placeholder logo is 229 x 55 pixels. Your image does not need to be this exact size, but it should be sized so that it looks good both in the skin header and Home page footer. -4- How to Change the Logo in the SideNavigation Skin File Use the following steps to change the logo that is seen at the top of the online output. 1. Open the Project Organizer, expand Skins, and double-click Side-Navigation. 2. Select the Styles tab. Notice the placeholder logo in the preview to the right. -5- 3. On the left side of the editor, in the Header section, expand Logo > Background. 4. Next to the Image field, click . -6- 5. Click . 6. In the dialog, Iocate and double-click your logo. -7- 7. In the Insert Image dialog, click OK. You should now see your logo in the preview instead of the placeholder logo. 8. Save the file. -8- How to Change the Logo in the Home Master Page Use the following steps to change the logo that is seen at the bottom of the Home page in the online output. 1. Open the Content Explorer, expand Resources > MasterPages, and double-click Home-Page.flmsp. 2. Right-click the placeholder logo and select Image Properties. -9- 3. In the Image Properties dialog, select the General tab. 4. In the Select File section, locate and choose your image. If you have already added your image to the project, you can select it from the top area. If you have not yet added it to the project, click and select it (the image will then be added to the project). 5. Click OK. 6. Save the file. - 10 - Changing the Hero Image The hero image is the large banner image that spans across the screen of the Home page in online output. The hero image used in this template is changed in Styles.css. Tip: The hero image included in this template project is 5184 x 3456 pixels. You don’t need to have an image that is exactly this size, but for best results it is recommended that you have a very big one with an aspect ratio similar to the one in this template. That way, it is likely to have a good appearance on screens of all sizes. Otherwise, you might need to make other adjustments to make it look good on the Home page. Since this template includes white font color overlay on the hero image, a darker image will look best. - 11 - How to Change the Hero Image 1. Open the Content Explorer, expand Resources > Stylesheets, and double-click Styles.css. 2. In the Stylesheet Editor, make sure you are in Advanced view. - 12 - 3. On the left side of the Stylesheet Editor, find and expand the div group. Then select topic-hero. 4. On the right side of the editor, next to background-image, click - 13 - . Note: If you have group view enabled instead of alphabetical view, you will need to expand the Background group before making your changes. 5. In the Select File section, locate and choose your image. If you have already added your image to the project, you can select it from the top area. If you have not yet added it to the project, click and select it (the image will then be added to the project). 6. Click OK. 7. Save the file. - 14 - Changing Colors To change the colors in the project, you need to edit multiple files. In all of these files, there is a color referred to as the “Brand,” which you probably want to replace with your own company or product color. In addition, you may find black, white, and shades of gray in these files, which you can also change. - 15 - How to Change Colors in the Regular Stylesheet 1. Open the Content Explorer, expand Resources > Stylesheets, and double-click Styles.css. 2. In the Stylesheet Editor, make sure you are in Advanced view. - 16 - 3. On the left side, expand (Variables) and select :root. 4. On the right side of the editor, next to --Brand (or any of the other CSS variables) click , and use the dialog to choose a new color. These CSS variables are used for various styles throughout the stylesheet. Note: If you have group view enabled instead of alphabetical view, you will need to expand the Custom group before making your changes. 5. Save the file. - 17 - How to Change Colors in the Table Stylesheet 1. Open the Content Explorer, expand Resources > Table Stylesheets, and doubleclick Alternate-Row-Color.css. - 18 - 2. Use the tabs on the left to edit different parts of the table stylesheet, and edit the color in any of the appropriate fields. Most of the relevant fields are set to black, white, and gray, which you might decide to leave as is. If you want to change the “Brand” color, select the Header tab, and in the Background section, edit the Color field. The new color will be reflected in the preview area at the bottom of the editor. 3. Save the file. - 19 - How to Change Colors in the Skin 1. Open the Project Organizer, expand Skins, and double-click Side-Navigation. 2. On the left, select the Styles tab. - 20 - 3. At the top of the editor, make sure Web Medium is selected. - 21 - 4. Expand any of the nodes and edit the color in the appropriate fields. Most of the relevant fields are set to black, white, and gray, which you might decide to leave as is. If you want to change the “Brand” color, edit any of the following: Search Suggestion Link > Font > Color Search Result Link > Font > Color Search Result Link (active) > Font > Color Search Result Link (focus) > Font > Color Search Result Link (visited) > Font > Color Search Result Path > Font > Color Search Pagination Item > Font > Color 5. Save the file. - 22 - Changing Quick Links At the bottom of the Home page topic, there are a series of Quick Links, which you can adjust. Before making any modifcations, you need to open the Home page topic and enable the structure bars in the XML Editor. After this, you might want to make the following kinds of changes: n Change the text hyperlinks n Chage the images n Remove columns - 23 - How to Open the Home Topic and Enable Structure Bars 1. Open the Content Explorer, and double-click Home.htm. 2. At the bottom of the XML Editor, make sure the two structure bar buttons are selected (borders will appear around the buttons when enabled). With these buttons enabled, you will see bars to the left or top of the XML Editor, depending on the location of your cursor in the topic. - 24 - How to Change the Text Hyperlinks 1. Scroll to the bottom of the topic where the Quick Links are displayed. Click on any of the text hyperlinks that you want to change. 2. You can simply type to replace the text for any of the links. 3. To change the hyperlink destination, locate the “a” structure bar at the top of the XML Editor. This structure bar is related to the hyperlink where your cursor is located. - 25 - 4. Right-click that structure bar, and from the context menu select Edit Hyperlink. 5. Use the Insert Hyperlink dialog to link to another file in the project or to an external location, such as a website. 6. Click OK. 7. Save the file. - 26 - How to Change the Images 1. Scroll to the bottom of the topic where the Quick Links are displayed. 2. If you want to replace an image with another one, right-click the image and select Image Properties. 3. In the Image Properties dialog, select the General tab. - 27 - 4. In the Select File section, locate and choose your image. If you have already added your image to the project, you can select it from the top area. If you have not yet added it to the project, click and select it (the image will then be added to the project). 5. Click OK. - 28 - 6. If you want to create a hyperlink on an image so that users can navigate to another location by clicking it, begin by right-clicking the image and selecting Hyperlink Image. 7. Use the Insert Hyperlink dialog to link to another file in the project or to an external location, such as a website. 8. Click OK. 9. Save the file. - 29 - How to Remove Columns The area holding the Quick Links is a responsive layout that will adjust the positions of the columns when the output screen size changes. Currently there are five columns (holding five images and hyperlinks) in this layout. You can remove any of these columns that you don’t need. 1. Scroll to the bottom of the topic where the Quick Links are displayed. 2. Click in the rectangle representing the column you want to remove. - 30 - 3. Locate the “div” structure bar at the top of the XML Editor. This structure bar is related to the area where your cursor is located. 4. Right-click the structure bar and select Delete. - 31 - 5. Save the file. Note: Depending on how many columns you remove, you might want to adjust the responsive layout styles that control the look of the Quick Link area. That is because the layout was originally designed to hold five columns of equal width, and removing columns might result in an uneven layout. For more information about editing a responsive layout styles—including how to add more columns—please refer to the Flare online Help. - 32 - Changing Variables You might use variables for company information, social media URLs, product names, the date of publication, and more. To change the definitions for the variables used in this template, edit the General variable set file. You can also create and insert new variables for other purposes. - 33 - How to Change Variables 1. Open the Project Organizer, expand Variables, and double-click General. 2. In the Variable Set Editor, click twice slowly in the Definition cell you want to change and type the new text. 3. Press Enter on your keyboard. 4. Repeat these steps for each variable definition you want to change. (You can also use the buttons in the local toolbar to add new variables if you like.) - 34 - 5. Save the file. When you open a file where a variable has been inserted (e.g., Company.htm, Home-Page.flmsp), you should see the new definition(s) displayed. - 35 -
Source Exif Data:
File Type : PDF File Type Extension : pdf MIME Type : application/pdf PDF Version : 1.4 Linearized : No Page Count : 35 Page Mode : UseOutlines Language : en-us Producer : madbuild Create Date : 2018:11:02 15:51:36-07:00 Modify Date : 2018:11:02 15:51:36-07:00 Title : My Document Author : pstoecklein Subject :EXIF Metadata provided by EXIF.tools