Login   |   21 Sep 2017 
Support Center » Knowledgebase » 6-0004-EN-Design customizations for advanced users i.e. adjust Site Header height
 6-0004-EN-Design customizations for advanced users i.e. adjust Site Header height
Article

IMPORTANT NOTES:

a. Make sure you do not accidentally delete or omit important syntax such as } or ; (semicolon after the value) when editing the stylesheet and macro; otherwise, your shop template will be affected and won't display properly.

b. After editing the website.css and/or website.html files, you may need to enable "Rebuild All" and preview your shop in external browser to see the changes take effect.

c. The information provided below is only applicable to some website themes such as 8-BASE template or 9-AAH theme. Please be aware that all the elements included in a website header group will be affected if you reduce the height or modify the container - for example, in 8-BASE theme, the "Website Name" and "Site Slogan" will be affected if you reduce the height. In other website themes, WebSiteHeader section includes the following: Index1 menu container, Language bar, Minicart, company image and site slogan so you need to know the reason why the size of the WebsiteHeader is pre-determined is to make all these elements fit properly: Index 1 container, Company Image, Website Name, Site Slogan, Language dropdown bar, and Minicart. If the theme you are using affects the position of all other elements, then it will be treated as further customization - see important note below:

d. More importantly, the steps below can be done by anyone who is knowledgeable in css coding and advanced html users. If further customizations are required, then it is considered outside our Support Scope and we will charge an extra fee for template customization requests.

1. Change website Header (banner image) height

To increase/decrease the height of the header, the merchant must edit the value in the website.css file found in My Documents\ShopFactory V10 Websites\<shop folder>\Runtime\contents\styles folder

  • Close ShopFactory
  • Open Windows Explorer and then navigate to your project folder, i.e. My Documents\ShopFactory V10 Websites\<shop folder>\Runtime\contents\styles 
  • Right click on the website.css file and select "Open with..." -> Notepad

Find the line:

 #WebSiteHeader {height:300px;}

And change the value to what you want i.e. 190px; (to make it smaller).

*Make sure you do not accidentally omit important syntax such as } or ; (semicolon after the value) when editing the website.css or website.html files; otherwise, your shop design will be affected and won't display properly. For example, the site header is no longer showing up completely - that may be because you have forgotten to add ; (semicolon) after the value you have just changed.

  • Save the website.css file and close Notepad
  • Open your shop in ShopFactory
  • Save and preview your shop in External browser to see the changes.

You may need to enable "Rebuild all" from the Settings menu and preview the shop again to see if the changes have taken effect.

Note: For templates with a shorter banner height for all other pages except the homepage, for example, Omnia demo shop (using 9-AAH website theme) – where, homepage has taller height while other pages have reduced banner height - you can also reduce the SiteHeader height in other pages via website.html file.

- Open the website.html file from the "<shop folder>\Templates\Website\9-AAH-AA_1024\parseLang" folder

- And then locate the IF statement: If this is NOT the homepage

- Change height value for WebSiteHeader 


- Save and close Notepad.

- If you have the shop already opened in ShopFactory, click on the "Refresh" button on the toolbar.

 

2. Change the height of the Shop Name - find this line in the same website.css file:

#SiteHeading {font-size:30px;background-color:transparent;font-weight:700;font-style:normal;line-height:1.2em;}

 Then change the value of the line-height into something lesser than 1.2 em.

 

3. Change the banner slideshow (banner links) width find this line in the same website.css file:

div#header * {width:764px ! important;}

 

4. Change the Index 1 width, for example 990px (to remove the scroll buttons) - find this line in the same website.css file:

#Index1 and then change the width value to 990

*** if you have changed the website.css file to 990px, you need to edit the website.html file in the project folder –

<project folder>\Templates\Website\<website theme>\parseLang

Edit the macro - change the scroll value to 990:

      <sf:macro object=”LoadIndex1” design=”8-VTE_1” orientation=”Horizontal” scroll=”610” showhomelink=”true” showlinkimagesublevels=”false” showlinkimagetoplevel=”false” />


5. Change the Company Logo dimensions

For example, I am using 8-BASE theme – I need the company logo to be 500 x 104

    1. The company logo must have these actual dimensions (500 x 104) - edit using a photo editor i.e. MS Paint
    2. Edit the website.html to the exact dimensions <project folder>\Templates\Website\<website theme>\parseLang

<div id="CompanyImage">

<a href="index.html" title="">

<img width="500" height="104" src="contents/media/companylogo.png" id="I" name="I" border="0" alt="" title="" hspace="0" vspace="0" align="" onmouseover="window.status='';return true;" onmouseout="window.status='';return true">

</a>

</div>

    1. Edit the style sheet (website.css) as well by locating the #CompanyImage img line

#CompanyImage img { width: 500px !important; height: 104px !important}

4. Save the website.css file and close Notepad
5. Open your shop in ShopFactory
6. Save and preview your shop to see the changes.

 



Article Details
Article ID: 4292
Created On: 09 Jul 2013 8:41 PM

 This answer was helpful  This answer was not helpful

 Back
 Search
 Article Options
Home | Knowledgebase | Downloads
Language:

Help Desk Software by Kayako SupportSuite v3.70.02