Add Images to the Templates

Add Images to the Templates

Add Images and Pictures To the Templates

When you use these templates you may wish to add a image somewhere on the page.

To do this copy the following line and place it in the location you would wish it to appear on your page. Make sure you also copy the image or picture to the images directory of the template

Then change the src and the class-name to match your requirements:

<img src=”add the path to your image here” class=”add appropriate class-name here”>

for example:

<img src=”images/mypicture.jpg” class=”profile-pic”>

Styling and positioning the image.

To add extra css to the template you can use the custom-stylesheet.css file found in the css folder in the template directory..

Positioning

Once open in your favorite text editor add the following:

To position left:

img.class-name {

float:   left;

}

To position right:

img.class-name {

float:  right;

}

To position center:

img.class-name {

display: block;
margin: 0 auto;

}

Sizing

Once you have positioned your image you will most likely want to set the images size.

To do so you can use the width and height css properties.

You can set these properties in pixels (px) and percentage (%)

For example:

img.class-name {

float:   left;
width:  100px
height: 150px

}

or

For example:

img.class-name {

float:   left;
width:  75%;
height: 75%;

}

A good way to keep the proportion correct is t0 use the value auto with the the height property.

For example:

img.class-name {

float:   left;
width:  75%;
height: auto;

}

This will work whether you use the pixels or the percentage format

Please note: Ensure you change class-name to match the class-name you used in the template and that you save the custom-stylesheet.css file after every change.

 

Need further Assistance? Email me!