Border for your picture - CSS with Google Sites

Google Sites doesn't allow us to use external Stylesheet. Anyway, we can use in-line CSS. Here is 4 examples using in-line CSS to define border for picture.

Golden Frame

We use a div block containing a picture. For gold color we use #ffd700.We encapsulate the picture within an anchor. The code (type it without blank and carriage return) :


style="border: solid 1px #000;  width: 309px;">                                                         /* width of pic + 2 * border */

<a href="URL of link" target="_blank" title="title of link" >

<img src="URL of picture"
style="width: 297px; border: 6px solid #ffd700;"                                                        /* 297 + (2 * 6) = 309  */
title="title of picture"
alt="alt text" />




The Result :
Château de Chardonne

Semi-transparent Border

We play with opacity and transparency. We use an outer box, displaying the picture as a background. An inner box has a border, on which we apply opacity. Type the code without blank and carriage return :

style= "width: 320px; height: 210px;                         /* size of picture */
margin: auto; padding: 0;
background-image: url(URL of picture);                 /* not valid within Google Sites page */
border: 1px solid #000;">

<div style="width: 300px; height: 190px;                  /* size of pic - 2 * border */
border: 10px solid #fff;                                                 /* border width */
filter: alpha (opacity=50); -moz-opacity: 0.50; opacity: 0.50; -khtml-opacity: 0.5;">



For Internet Explorer we use opacity between 0 and 100, for Firefox we use a rate between 0 and 1.

We cannot define a background image in Google Sites. We need to encapsulate the previous code within a Google Gadget. I use this gadget : 


Enter this parameters : 

URLPic : URL of the picture
Title : Title of the picture (Tooltip)
PicWidth : Width (px) of the picture
PicHeight : Height (px) of the picture
BorderCol : Color of the border (#rrggbb)

The Result :


Double Border with Title and 3 Links

We have the following elements : A title, a subtitle with link (1), the picture encapsulated within an anchor (2) and a footer (3). We use this code

<div style="style of div block">Title of picture<br>

<a href="URL of link1"
title="title of link1"
target="_blank">link 1</a>

<a href="URL of link 2"
title="title of link 2"

<img src="URL of picture"
style="style of picture"
title="title of picture"
alt="alt text for picture"></a><br>

<a href="URL of link 3"
title="title of link 3"
target="_blank" >link 3</a>


We use the following in-line style for the external div block :

border: medium double #f00;
padding: 6px;
background: #c3d9ff;
width: 300px;                                         /* width of picture + 20 pixels */
margin: auto;
text-align: center;
font-weight: bold;
color: #a90707;

We use this CSS for the picture :

border: 1px solid #000;
width: 280px;                                         /* width of picture */
margin: 3px 0;

The Result :

Château Maison Blanche
The MapsChâteau Maison Blanche - A New Way of Life
The World of Swiss Wineries

Picture like a Polaroïd

We display the picture, encapsulated within an anchor (1), a subtitle with a link (2), and a legend.

I use the following code :



<div style="width: 220px;                                                             /* width of pic + 2 * padding */
margin: auto; padding: 15px;                                                     /* padding */
background-color: #c3d9ff; border: 1px solid black;
text-align: center; font-size: 11px;">

<a href="URL of link 1" title="title of link 1"
<img style="width: 190px; border: 1px solid black;"                /* width of pic */
src="URL of picture">

<div style="margin: 15px auto 0; font-weight: bold;                /* same value as padding */
color: #a90707;">

<a href="URL of link 2"
target="_blank" title="title of link 2">Link 2</a>





The Result :

Maurice Gay - The Maps

La Haute Couture des Vins du Valais

More informations

CSS Tutorial (W3schools)

Swap 2 pictures using onmousover and onmouseout

Create borders for your pictures, using Blogger
Use box-shadow to create shadow for your box, using Blogger
Opacity and Transparency

Insert a Google Gadget (transparent Border) with an iframe or a script, like a Web Element.

URL de spécification du gadget introuvable

URL de spécification du gadget introuvable

One Day - One Label - One Wine

URL de spécification du gadget introuvable

Find a Wine with Google CSE
URL de spécification du gadget introuvable