Let us help you get the most out of Norvax technology

Frequently Asked Questions: Advanced Editing in SiteLever

 

Will I ever have to adjust the code on my SiteLever website?
Some changes do require that you edit the code itself. For many these changes, we've provided the code changes for you to copy and paste into your site in this FAQ. If you ever need more assistance, submit a Custom Support request.
back to the top

Does SiteLever use frames?
No. Areas that look like frames are templates associated with pages marked by content tags.
back to the top

 

What are SiteLever content tags?
SiteLever content tags are HTML comments that SiteLever uses to associate pages with templates. They look like this:

            <!--start content section-->
            <!--end content section-->

 

How do I add a product or service to my navigation bar?
NOTE: Not all templates use the procedure described below. If you have any question about your template, please contact our support department.

1) Click on "Template Editor" and select the template you want to change.

2) Click "Edit"

3) Switch to HTML mode by clicking on the "Normal/HTML" button.

4) The piece of code that displays each link on your navigation bar will look like this:

<A class=nav href="index.jsp">Home</A><BR><!--separator-->

Or this:

<TR><TD><A class=left href="/index.jsp">Home</A></TD></TR>

It is important is to copy the entire code between the beginning of the <A> tag and the separator.

Move to the place in the sequence of links where you want to paste the new page link on your navigation bar. For example, if you want the new link between "Home" and "About Us" insert the text where shown below:

<TR id=navitem>
<TD><!--start primary link-->

<A class=nav href="index.jsp">Home</A><BR><!--separator-->
INSERT TEXT HERE

<A class=nav href="about.jsp">About Us</A><BR><!--separator-->

<A class=nav href="news.jsp">News</A><BR><!--separator-->

<A class=nav href="companies-represented.jsp">Companies</A><BR>
<!--separator-->

<A class=nav href="/quote/info1.jsp">Quotes</A><BR><!--separator-->

<A class=nav href="contact.jsp">Contact</A><BR><!--separator-->

<!--end primary link-->
</TD>
</TR>

Now you can change the text:

<A class=nav href="index.jsp">Home</A><BR><!--separator-->

and destination URL of the link:

<A class=nav href="index.jsp">Home</A><BR><!--separator-->

5) Use the "Preview" button to check your work.

6) When satisfied, save and publish the template. The changes will be visible immediately.
back to the top 

After I added text to my home page (index.jsp) the image that was aligned at the top is now floating in the middle. What should I do?
This happens because of how the HTML is constructed. The image is located in a table cell in the same row as the block of text. As you add more text the row gets longer, and the image moves down. If you want the image to remain at the top of the block of text, you have to change the image alignment in the HTML code.

To change alignment of an image that is associated with a block of text:

1) View your site normally on the internet.

2) Place your mouse cursor/pointer over image you intend to re-align.

3) Right-click on the image (use the button on the right-side of your mouse). This will open a pop-up menu.

4) Select "Properties" (usually at the bottom of the menu). This will open a box that presents information about the image.

5) Make note of the name of the image. It is located near the top of the box and will typically end in .jpg or .gif (we use "individual_family.jpg" in the examples that follow). You will need this name in order to identify the image within the HTML code.

6) Open "Page Editor" or "Template Editor", depending on where the image is located.

7) Navigate (in "Browse Mode" or "System File Mode") to the page or template where the image is located.

8) Click "Edit".

9) Click the "Normal/HTML" button (located on the SiteLever toolbar).

10) Look through the code for the name of your image.
NOTE: You can pres CTRL+F to open a "Find" box. This will search for any word or phrase you type in the search field. Type the name of the image here.

Your image will appear in a block of code that looks something like this:

<TD vAlign=center align=left>
<IMG src="images/individual_family.jpg" border=0></TD>

IMG refers to the image file. TD refers to the table cell the image is sitting in.
vAlign stands for "vertical alignment" within the table cell.

11) Change vAlign=center to read vAlign=top
The tag should now look like this:

<TD vAlign=top align=left>
<IMG src="images/individual_family.jpg" border=0></TD>

This will align the image with the top of the table cell.

 

12) Use the "Preview" button to check your work. When you're finished, close this window by clicking on the "X" in the upper right corner.

13) Click the "Save and Finish Later" button.

14) Make the changes public by clicking "Publish This Page".

back to the top 

 

How do I display an external site within my template?
You can link to an external site from your site.  You can set the link to open the other site in a new window (see "How do I open a page in a new window?").

If you want the site to load within your template, you can display it in a HTML frame. To do this, you will need to edit the code in HTML format:
 
1) Click on "Page Editor" and select the page that you want to load the external site in. If you have not created the page, please do so first.

2) Click "Edit".

3) Switch to HTML mode by clicking on the "Normal/HTML" button.

4) Insert the following code, replacing "somewebpage.com" with the site's URL.

<iframe src="http://www.somewebpage.com" frameborder=no width=700 height=500 hspace=0 vspace=0></iframe>

You can change the options defined below by changing the number in the code:

frameborder - "yes" or "no" to add a frame around the frame

height - height of the frame in pixels

width - width of the frame in pixels

hspace - extra space measured in pixels on either side of the frame

vspace - extra space measured in pixels above and below the frame

back to the top 

 

 

How do I place an image behind the text in my site?
To put an image in the background of a page:

1) Upload the image you want to use, as described in the question above.
NOTE: To upload an image for background use only, first upload the image into a page as described above. Then delete the image from the page you put it on. This will remove the image from the page, but will leave a copy of the image on the server for you to use.

2) Open the "Template Editor".

3) Locate the name of the template you want to edit in the center list.

4) Click "Edit" (located to the right of the template name).
 
5) Click the icon with the word "Normal/". This lets you view the HTML code.

6) Locate the body tag. It should look something like:

<body topmargin=0>.

7) Edit the tag so that it reads:

<body background="folder/image.ext" topmargin=0>

folder is the name of folder that your image is located in.
image.ext is the name and file extension (usually ".jpg" or ".gif") of the image you want to use as your background.
NOTE: Make sure that the image name and file extension are typed correctly. If either part is wrong, the image won't be displayed.

8) Check your work using the "Preview" icon in the upper left corner of the "Template Editor".

9) Save your work by clicking on the "Save and Finish Later" button.

10) Make the changes public by clicking on "Publish This Page".

back to the top 

 

How do I change the font style for just one section of text?
In addition to the styles in your style sheet, you can also add styles to a specific part of an individual page. Styles that are added to individual pages are known as local styles.
NOTE: The preferred way to add local styles to a portion of text is with <span> tags, though you will see often see web developers and programs (including SiteLever) use other tags.
Text with <span> tags looks like this:

<span>Text to be styled.</span>

To add local styles to a page:

1) Click on "Page Editor" and select the page that you want to load the external site in. If you have not created the page, please do so first.

2) Click "Edit".

3) Switch to HTML mode by clicking on the "Normal/HTML" button.

4) Find the portion of text you want to style.

5) Add <span> tags to the section of text you want to style. Place the opening tag before the text, and place the closing tag after the text. It should look like this:

      <span>Text to be styled…</span>

NOTE: The closing tag has a slash before the word "span": </span>

6) Add a style attribute to the opening <span> tag:

<span style="">Text to be styled.</span>

7) Within the quotation marks, add styles, separated by a semi-colon:

<span style="color; font-family; font-size; font-style; font-weight">Text to be styled.</span>

8) Specify the value for those styles:
         
<span style="color=blue; font-family=Arial; font-size=14px; font-style=italic; font-weight=bold">Text to be styled.</span>

This local style will turn this text:
         
          Text to be styled.

into this:

            Text to be styled.

NOTE: For your styles to display correctly, it is important to choose fonts that are found on most computers. "Arial", "Verdana", "Times", and "Georgia" are safe choices.

9) Use the "Preview" button to check your work.

10) When you're finished, save and publish the template. The changes will be visible immediately.

back to the top 

Norvax Newsletter Sign Up

Free monthly online marketing and technology tips. See a newsletter sample.