Mobile Header Graphic
Question:
How can I add my own custom Mobile Header Graphic?
Answer:
The default Mobile Header uses a Gradient Grey image that is repeated horizontally.
You have two options:
Option A) Replace the grey gradient image with your own. ->The image will be repeated.
1) Create an image with image editing software of your choice. The image can be smaller then 320px as it will repeat itself.
2) Name the image “mobile-header.jpg”
3) Replace the original image by using a Filemanager (provided by your hosting provider) or an FTP Client.
The file path is: yourdomain/wp-content/themes/smallbiz/images/mobile
4) Simply overwrite the existing image with your own.
Option B) Replace the grey gradient image with your own custom full width header graphic.
1) Create an image with image editing software of your choice. The image should be 320px wide
2) Name the image for example: mobilegraphic.jpg.
Note: do not name the image “mobile-header.jpg”
3) Upload the image in WordPress using the Media Uploader. (Media -> Add New).
3.1) Copy the image URL generated.
4) Access the mobile stylesheet by using a Filemanager (provided by your hosting provider) or an FTP Client.
The file path is: yourdomain/wp-content/themes/smallbiz/css
The file name is: mobile.css
5) Replace the current background image URL (in the red box below) with the new image URL from Step 3.1.
6) Remove: “background-repeat:repeat-x;” from the headerstrip div.
7) Specify and add the height of your header graphic into the CSS. For Example if your header is 60px in height type:
#headerstrip{height: 60px;}
8) Access the mobile frontpage.php by using a Filemanager (provided by your hosting provider) or an FTP Client.
The file path is: yourdomain/wp-content/themes/smallbiz/layouts/mobile
The file name is: frontpage.php
9) Remove the h1 and h2 tag and add your background image css in its place.
