Template Main Image Code

Web template support for image configuration

Responsive image code
The following code is used for static banner type images in responsive templates. See jQuery responsive slideshow for animated homepage images.

<!-- RESPONSIVE TOP IMAGE -->
<div class="img-respond-home center-div">
<img src="picts/home.jpg" class="top-image img-respond" alt="image"><br>
</div>

In the style.css you can edit the width, max-width, margins and borders for the image. Search for .img-respond in the style.css to locate this code.

Note: The max-width may be limited by other classes in the style.css like the "contentbox" or "pagewrapper" class.




HTML5 image code
The following code is used in some HTML5 drop menu, and multi-color Exec style templates for the main banner type image at the top of each page. Edit the name of the image (about.jpg) to change the image to display. This is only example code, your template code may be slightly different.

<!-- START IMAGE BAR -->
<div class="imagebar" style="background-image: url('picts/about.jpg');">
<img src="picts/about.jpg" width="750" height="80" class="blockimage left-div">
</div>
<!-- END IMAGE BAR -->

This code displays the image, and then also uses css code to make the same image a tiled background behind itself.

In the above code, to have a solid background color on the right side: remove the style="background-image: url('picts/about.jpg');, then in your color theme css file in the "colors" folder, edit the class .imagebar and add a background color.

To center the image, edit the left-div in the above code to center-div.




HTML 4.01 image code
Older templates: The main "banner" type images used on Allwebco HTML 4.01 templates are setup in a few different Ways. Some templates will tile or repeat the image, some will stretch the image to fit and some will be an exact fit to one side with a blank area or background image on one edge.

Click to view different styles
Image with tiled background image
Image with same image tiled as a background
Blank on one side

Chrome drop menu templates note
If you have a Chrome drop menu template see Chrome sections below and you may also want to see the template image is repeating support page.

Find the banner code
Perhaps you have a tiled image template and want to make this a stretched image style on the index.html (or other HTML page). First, find the following code (look for "PICTURE TABLE" in the HTML page):

Example #1
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="picts/about.jpg">
<a href="index.html"><IMG SRC="picts/spacer.gif" border="0" width="700" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->


Example #1A (From a chrome drop menu model)
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="picts/about.jpg" class="pictbackground">
<a href="index.html"><IMG SRC="picts/about.jpg" border="0" width="700" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->

Note that in the above code the about.jpg is setup as a background and the spacer.gif is used to hold the correct amount of space open (in the chrome model the spacer is the about.jpg instead). There are different ways to make this not tile:


Example #1B (From a template with a slider or AdShow)
Edit this code in the CSS file and add the highlighted line of code to control the repeat:

.pictureend {
background-color: #05341C;
background-image: url("picts/background-picture-end.jpg");
background-repeat: no-repeat;
border-left: #000000 1px solid;
}

If you do not see your end image when you add the above code try the following, adding a position to the background image:

.pictureend {
background-color: #05341C;
background-image: url("picts/background-picture-end.jpg");
background-repeat: no-repeat;
background-position: 600px 0px;
border-left: #000000 1px solid;
}

The CSS class above may be named "pictureend" or "ban-table-home" or "ban-table" or "home-background" or some other similar name. You can search in the .css file for ".jpg" to find code that is using images.

Option #1 make the image wide
If you have set a background image like above that means it can be any size you like and it will not affect the overall page size. Make your image 1500 pixels wide or wider and most viewers will not see the tiling. This is not recommended for templates that are not using background images and Chrome drop menu templates. See other options below and/or the template image is repeating support page for Chrome drop menu templates.

Option #2 color on one side
You can have a sized image and a background color on one side or the other. Here is an example of that code with a black background (new code is in red):

Example #3
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000"><tr><td align="left">
<a href="index.html"><IMG SRC="picts/about.jpg" border="0" width="700" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->

Note: In some templates the image area may already include a background color. This will be a class in your template .css file and may be named something like .pictbackground.

Option #2 in Chrome drop menu templates:
From the code below in a Chrome drop menu, remove only the background="picts/about.jpg" code and adjust the width for your image size. This code is the "Background and image on page" style as shown above in the example links.

Example #1 (From an Chrome Model)
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="picts/about.jpg">
<a href="index.html"><IMG SRC="picts/about.jpg" border="0" width="700" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->

Edit the background color in the "common-style.css" by editing the ".pictbackground" class.

Option #3 stretching the image: You can recode this to stretch this image. First, remove this exact code: background="picts/about.jpg". Now, change this part picts/spacer.gif to this "picts/about.jpg". Finally, change the width="700" to width="100%" and you should have a stretched image instead of a tiled one. Here is an example of the new code:

Example #2
<!-- PICTURE TABLE -->
<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td>
<a href="index.html"><IMG SRC="picts/about.jpg" border="0" width="100%" height="80"></a><br>
</td></tr></table>
<!-- PICTURE TABLE -->


Other Notes: The above examples show you how to change from a tiled style to another style. In general, if you have a stretched style and want a tiled image you will edit example #2 to look like example #1 above. If you have a sized image and want to use another style you would take example #3 and recode it to look like either example #1 or #2.

More Notes: Some templates such as OSnine or some "Webmaster" models have the header image in the header.js or menu_header.js and you will need to edit that file to change the image code type.

Menu Notes: In some templates if you change the image code you may need to move the menu. To move the menu you will edit either the menu.js or your .css file.



Related Topics:
Making tiled images
Replacing the template pictures