|
Setting up your website template: KEY: MQs below indicates "media queries". The responsive css code for mobile located in the "media-queries.css". See section below and also support details. Important: When the MQs kick-in, the menu changes to a mobile "click menu". See MQs section below. Step 1: EDIT LOGO HEADER: | More Details Open the "header.js" in a text editor like Notepad or TextEdit and edit the text following "var logotext" with your website name. Click link above for details. If you would like to use a graphic logo, there are instructions later in this document. NOTES: You can switch on a header image in the "header.js". The text header uses a Google Font. See "fonts" in options below. Step 2: EDIT FOOTER: | More Details Open the "footer.js" in Notepad or any text editor and change the "Your Company" text with your website or company name. This will update the footer on all pages. Step 3: EDIT CONTACT INFO: | More Details Open the "phone.js" in Notepad or any text editor and edit the company name, address, phone and fax number and e-mail address (2 places for the e-mail). This will update contact info on the contact page. This info is inside a .js file so search engines can not see your e-mail and you will receive less spam e-mails. Step 4: EDIT MENU: | Menu Editing & Click Menu To change the menu links, add links or rename links edit the "menu.js" in a plain text editor. The template includes a mobile "click menu". Mobile icons are not included in this version. Click link above for more help. NOTES: Colors for the full width menu are in the "style.css". Colors for the mobile click menu are in the "media-queries.css". Step 5: EDIT LEFT SIDEBAR TEXT BOX: | More Details The text inside the box under the menu on the left side is edited in the "menu.js" near the bottom. This text box is global on all pages. Click link above for more help. Step 6: EDIT TWITTER, FACEBOOK, INSTAGRAM, LINKEDIN LINKS: | More details Open the "social-links.js" in a plain text editor. Edit the links with your social network links. The "social-links.js" includes "yes/no" variables to turn off any or all of the social links. This updates the footer social icons. Step 7: EDIT PAGES: | Software choices | Notepad Editing Change the text on all pages with your website text. You can use a text editor like Notepad, Expression Web, Dreamweaver or any wysiwyg editor. Take care not to delete any of the HTML tags that surround the text. You will find notes inside each page to help you navigate. NOTE: You will not see the footer and header in some software because they are .js include files so you can globally edit the header, footer and menu. Step 8: EDIT PAGE TITLES, DESCRIPTIONS AND KEYWORDS: | More Details Open each of the pages and change the page titles (at the very top of the page) and also the description and the keywords with your product or service details. You can edit one page and copy and paste to the other pages (make each page meta title unique). Be careful to only change what's inside the " " so you don't disturb the html code. Page titles are important so your site will get a good listing at Google, Yahoo! and other search engines. Step 9: UPLOAD: | More Details Upload the pages on to your hosting company's server using ftp software or Windows Explorer or your control panel. Be sure to upload the "picts" and "JQuery" folders and all files in these folders. Mobile click menu MQs: The menu changes to a "click" menu for mobile and hides the image and text box. See testing MQs in support. The "media-queries.css" is for mobile and includes some of the same class names as the "style.css" to alter these classes as the browser width becomes more narrow. When editing any font sizes in this template you will need to edit the class in the "style.css", then edit the duplicate class in the "media-queries.css" to setup the mobile font sizes. See responsive support details. To replace the text logo with a graphic logo: edit the "header.js". Change the "var logotype" from "text" to "graphic" (all lowercase). In the "picts" folder you will find a graphic called "logo.png". Edit this graphic with your logo image. The "logo.png" is now 500 pixels wide by 70 pixels high. If you change the size of the logo edit the max-width for the ".logo-respond" class in the "style.css". The header background HEX color can be found in the "style.css" file. A "logo.PSD" file is located in the "extras" folder. The default font used is 26 points "Arial Rounded MT Bold". If you want to change to another image type like .jpg, edit the "header.js" in 1 place from .png to .jpg (near the bottom) and place your 500 x 70 "logo.jpg" in the "picts" folder. The "logo.png" has a transparent background. If you are using a .jpg and want no transparent background, remove the following line in the "style.css" for a solid (non-gradient) background color: background-image: url("picts/header-background.png"); OPTIONS INSIDE THE MENU: At the top of the "menu.js" there are some options you can turn on and off. One option is to show the image under the menu and there also is an option to show a text box under the menu. CHANGING LINKS / ADDING TO THE MENU: See step above "EDIT MENU". ADDING PAGES: | More Details You can add pages to your website by copying and pasting any one of the pages and renaming it to whatever you need. You can then add links from the other pages or in the "menu.js" and "footer.js". FONTS & CSS STYLES: | More Details | Media Queries | Google Fonts This template uses Google Fonts. The code that "calls" the font files is the first line in the "style.css". Click above for details. This template includes Media Queries css code. Edit font sizes in both the "style.css" and "media-queries.css". Click above for details. You can change your font colors and sizes by editing the "style.css" with a text editor. You can find other font colors by clicking here. Change the font sizes in the "style.css" file. Change the class after the note "THE NEXT LINE CONTROLS THE FONT SIZE ON ALL PAGES" px size to change the font sizes or colors on all pages. Change the "title" px size to change all the title sizes. CHANGING THE GRAPHICS/PICTURES: | More Details You can replace each HTML page picture with your own .jpg image. These pictures are now 900 x 170 pixels and respond to the browser width. Each HTML page includes it's own image. These are named according to the page they are on. You will find all pictures in the "picts" folder. Images on the news page are 75 x 75 pixels in size. PAGE HEIGHTS & WIDTHS: So all your pages will maintain a standard height there is a "pageheight" class included in the "style.css" that you can edit. Page widths use the classes "#pagewrapper" and "#left-content" and "#right-content". |
