Text on Header

[Paula]

I have input my logo on my header, but would also like to add some text to the right of the logo, i.e. my store's phone number. When I add the text under Layout > Preferences, the text lines up under the logo. I would like to have it to the right of the logo, and lined up in the center, not on the bottom.

ShopSite Pro user.-

[Paula]

Another design question: How do I input images on my home page, similar to the following website: www.absolutesocks.com

I like how they have the three boxes with images and would like something like that on my site, with my own images, of course.

Another example of what I'm talking about is www.offthepaw.com

Do I create this in a photo editor, then simply paste the photo via preference > layout>
I notice some websites have the changing images; can I also do this using the above method?

Thanks.

[ShopSite Lauren]

For the header, it depends on what ShopSite template you are using (what is the URL to the website you are working on. If you add your logo in the company logo field, and the text in the header field, some templates will automatically add the text to the right of the image. In other templates, you can go to Images > highlight your logo image > Edit Image, and in the "Other Attributes" field, add align="left" this will float the image to the left and allow text to wrap around the image. Another option would be making the phone number an image and adding it as the header image, which is displayed to the right of the logo in nearly all the ShopSite built-in templates.

For your second question, you can create the images that you want, upload them into your ShopSite store, then use the HTML Editor to place them how you want them. In ShopSite, when you go to Pages > Edit Page Content, there is a little [Editor] link at the top of the text fields (if this feature is enabled...if you do not see the link, you can check that it is enabled by going to Utilities > HTML Editor).

Yes you can have rotating images (image sliders, slideshows, etc), but that is some coding (typically JavaScript or jQuery) that needs to be added custom (often can be added in the same page text fields).

[Paula]

Thank you, Nicole. That is very helpful.

So basically the "text editor" can be used similar to as you would use an HTML editor, ie. Adobe or MS Expression Web. Of course with restrictions, but seems to be the same concept, whereas I can add pretty much create a website using the examples I gave you below?

If I wanted to insert the phone number as an image, what can I use as a guide for dimensions, i.e. how large it should be, etc.?

What is the banner image typically used for? Is this for special announcement/offers-type posts?

[Paula]

For the header, I tried your first suggestion, adding align="left" to the Other attributes field. When I save these changes, the blue Publish icon doesn't appear. Also, the logo tag is in different places on the edit image page, including Small, Medium, More Info, etc. Do I add align="left to all of these?

For your second suggestion, I tried adding just a random image under Header, but it still likes to line up a little below the logo. Even tried justifying right, but doesn't seem to help.

[ShopSite Lauren]

What is the URL to your website?

No, you do not need to add the align="left" to all the logo image sizes, only the image size that you are using.

For the phone number image, you will want to make that the size that is appropriate for your store. Some stores that have larger logos may want the phone number image to be larger to look proportionate to the logo, it all depends on what looks best in your particular store.

The banner image is typically used for an image in the main body on the page. In a few themes (mostly older ShopSite themes such as sidebar and rounded) the banner image is displayed near or in the logo area.

-Lauren

[Paula]

Lauren,

It is owlsandfriends.com

I tried adding the text and then a photo, with the same results. Notice how "phone number" goes to the bottom.

There is also too much white space above and below the logo.

Also, is there a way to take off the Home/View cart at the top left?

Edited to add: I notice when I change out templates, the white space in the templates disappears a bit.

[ShopSite Lauren]

Replace "phone number" with "<span id="phonenumber">Phone Number Goes Here</span>"

Add the following CSS code into your header field:
<style type="text/css">
body td#mu-submenu {display: none;}
body div#mu-headerspecials {position: absolute; margin: 10px 0px 0px 360px;}
body span#phonenumber {line-height: 180px; font-size: 200%; font-weight: bold; letter-spacing: 1px; font-family: arial narrow, arial, Arial, Helvetica, sans-serif;}
</style>

And most of the space around your logo is part of your logo image, if you right click with your mouse, then select "Select All" you will see your logo highlighted, and most of the spacing around it is part of the image. To remove that spacing you will need to create a new logo image that has less white space.

[Paula]

I decreased the logo white space, so that works.

Do I put <span id="phonenumber">Phone Number Goes Here</span> in the header column as well? I put this along with the code below, all into my header page. It caused more white space below the logo. Did I do this incorrectly?

<style type="text/css">
body td#mu-submenu {display: none;}
body div#mu-headerspecials {position: absolute; margin: 10px 0px 0px 360px;}
body span#phonenumber {line-height: 180px; font-size: 200%; font-weight: bold; letter-spacing: 1px; font-family: arial narrow, arial, Arial, Helvetica, sans-serif;}
</style>

[ShopSite Lauren]

Since you uploaded a new logo image, you will need to re-add the align="left" to the logo image. Then go to Utilities > Publish > Regenerate, to publish all of your store pages with the updated logo, dimensions and alignment.

Yes, add the span phone number section in place of where you currently have the text "phone number"

[Paula]

Making progress, but there is still white space below the logo. I went into my photo editor and deleted extra white space, so is there anything else that can be causing this?

This is the code that I entered into the Header under Layout Settings:

<p style="text-align: right"><span id="phonenumber">Phone Number Goes Here</span><style type="text/css">
body td#mu-submenu {display: none;}
body div#mu-headerspecials {position: absolute; margin: 10px 0px 0px 360px;}
body span#phonenumber {line-height: 180px; font-size: 200%; font-weight: bold; letter-spacing: 1px; font-family: arial narrow, arial, Arial, Helvetica, sans-serif;}</style></p>

[ShopSite Lauren]

The code I gave you originally was based off a larger logo. I have adjusted the code to float your text right, change the color, and remove the extra white space at the bottom. Replace the entire header field with the code below:

<span id="phonenumber"><span>tel:</span> 1-800-555-1234</span>
<style type="text/css">
body td#mu-submenu {display: none;}
body div#mu-headerspecials {position: absolute; margin: 10px 0px 0px 374px;}
body span#phonenumber {color: #5F1D48; float: right; line-height: 130px; font-size: 200%; font-weight: bold; letter-spacing: 1px; font-family: arial narrow, arial, Arial, Helvetica, sans-serif;}
body span#phonenumber span {font-weight: normal; font-size: 80%;}
</style>

[Paula]

It worked! Thanks so much. I know absolutely nothing about CSS, as you can see. : )