Must-Read ProStores Tricks and Tips
Article ID: KB101708
Made changes in the Design Studio Visual Editor?
In some cases, within ProStores 7.x, we have seen the header and footer HTML code become messed up if
you make changes within the Visual Editor of the ProStores Design Studio. If you experience this problem, we
advise that you republish the header and footer after making changes such as
adding your custom text.
Want to change the layout?
Are you interested in making a column wider or a row taller? A general rule of
thumb is that if you want to make changes to the "template" portion of a site –
that is, the header and footer or left and right columns – you should be
familiar with SSML (ProStores proprietary coding), HTML, and CSS. Making certain changes to the template layout, using ProStores' Visual Editor, can cause unexpected changes that result in layouts that may be different in various browsers. We don’t recommend
making layout changes to the pre-designed header and footer templates. Contact us if you have specific ideas for modifying the design and we’ll let
you know if it’s possible or not.
Taller logo?
For some templates, a taller logo may cause the logo to overlap the page
content area in FireFox. You will need to make a small modification in the
stylesheet. To do this, open the stylesheet (a .css file,
possibly in the images.zip archive), look for the code that defines the logo
area height, and modify the pixel value. Contact the developer of the template
for more detailed instructions.
After editing the file, you will now have to reimport this file as a Template
Set Image:
- On the template set landing page, click Upload Images, select Template
Set Images and click Continue.
- Select Single Image. Click the Browse button and find the "styles.css"
file that you just modified. Click Continue.
Test your page in FireFox to make sure that the logo doesn't overlap the top
area.
Adding your own images and links?
If you want to add your own images and links in the right column (where the
banner ad is), we advise that you modify the template code directly instead of
using the Design Studio Visual Editor. Here’s how you can do that:
- First, upload your images as a Template Set image. Make note of their
file names.
- Open the template (header.tpl, footer.tpl, or another file) in a text
editor such as NotePad.
- You will have to locate the area in the code where you can insert
images. Contact the developer of the template if you need more specifics.
- Add code for an image:
<ss:image source="$templateSet.images ['filename.jpg']" />
- Replace "filename.jpg" with the file name of your image.
- f you want
to make this image into a link, add this code around it:
<ss:link source="webpageurl"><ss:image
source="$templateSet.images ['filename.jpg']" /></ss:link>
- Replace
"webpageurl" with the web page address that you want to link to – for
example, http://www.pixelmill.com or http://www.google.com.
Trust the Designer
Our templates are designed by graphic designers and web
developers, who have been trained to develop these sophisticated layouts and designs for the ProStores system. The designers and developers are experienced with what works and what does not in a ProStores web site.
We advise that you work with the recommended fonts, colors, and layout of the
template so that you achieve a clean, professional look for your ecommerce
store. If you're interested in customizing the colors of the store to go with
your store logo, contact the developer of the template and they can provide you
with custom services or online training.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1084/kb101708.htm
permalink to this article:
http://www.pixelmill.com/support/kb101708.htm
Back to top