Technical Support Forums

Technical Support Forums » Web Album Generator

Inserting banner on stylesheet (11 posts)


About this Topic

Tags

No tags yet.

  1. trevor
    Member
    Posted 9 years ago

    I would like to Customise each Album page. Can I insert an image file at the top of a stylesheet. I am not a html programmer but can use FrontPage or CuteHMTL editors in a very basic mode.

  2. Mark
    Administrator
    Posted 9 years ago

    Hi Trevor,

    Unfortunately, a banner cannot be inserted into each page automatically in the current version of Web Album Generator. Some users have gone through the generated pages and inserted banners and other HTML items manually, however.

    A future version of Web Album Generator will allow you to customize the output template to include these features.

  3. Anonymous

    Posted 7 years ago

    if you post your site on netfirms.com (free) each and EVERY page will _have_ a banner (but not the one you want there...)

  4. remscan
    Member
    Posted 7 years ago

    for editing multiple html pages at once, I use editpadlite. http://www.editpadlite.com/editpadlite.html

    you can insert your banner code with a bulk search-and-replace (or just paste) in a large number of pages at the same time.

  5. Anonymous

    Posted 7 years ago

    I would like to Customise each Album page. Can I insert an image file at the top of a stylesheet. with the new version? to add a banner ad.

  6. berserker
    Member
    Posted 7 years ago

    In main.css add to:

    • the 'div#header h1' and the 'div#navigation' selectors the following:
      margin-top: (insert picture height here plus 10)px;


    • the body selector:
      background-image:url(background.jpg);
background-repeat:no-repeat;
background-position: top center;

    Tested in Firefox and IE5.5.

    Banner ads, w00t w00t

  7. Anonymous

    Posted 7 years ago

    I need help inseting it. Can I email you my main.css.?

  8. berserker
    Member
    Posted 7 years ago

    Sure, you can also just post the code right here at this board.

  9. Anonymous

    Posted 7 years ago

    /* Main Selectors */
    body {
    background-color: #FFFBF0;
    color: #000000;
    }

    a, a:visited {
    background-color: transparent;
    color: #FF0000;
    }

    a:hover {
    background-color: transparent;
    color: #FF0000;
    }

    /* Header */
    div#header h1 {
    font-family: tahoma, arial, helvetica, sans-serif;
    text-align: center;
    background-color: transparent;
    color: #000000;
    }

    /* Thumbnail Index */
    div#index {
    text-align: center;
    }

    div#index table {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }

    div#index td.thumbcell {
    width: 96px;
    border-style: solid;
    border-color: #BFBBB0;
    border-width: 1px;
    text-align: center;
    vertical-align: middle;
    padding: 10px;
    }

    div#index td.thumbcell img {
    border-style: none;
    }

    div#index div.pages {
    font-family: tahoma, arial, helvetica, sans-serif;
    font-size: 0.8em;
    text-align: right;
    }

    /* Photo Navigation */
    div#navigation {
    text-align: center;
    font-family: tahoma, arial, helvetica, sans-serif;
    font-size: 0.8em;
    }

    div#navigation table {
    text-align: center;
    margin: 0 auto 1em auto;
    }

    div#navigation td.previous {
    text-align: left;
    width: 96px;
    }

    div#navigation td.index {
    text-align: center;
    }

    div#navigation td.next {
    text-align: right;
    width: 96px;
    }

    div#navigation td.thumbcell {
    width: 96px;
    }

    div#navigation td.thumbcell img {
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    }

    div#navigation td.thumbcell img.selected {
    border-style: double;
    border-width: 5px;
    }

    div#navigation span.home {
    display: block;
    padding-bottom: 1em;
    }

    /* Photograph */
    div#photograph {
    text-align: center;
    }

    div#photograph img {
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    }

    /* Photograph Title */
    h1.title {
    text-align: center;
    font-family: tahoma, arial, helvetica, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    margin: 0px;
    }

    /* Photograph Caption */
    p.caption {
    font-family: tahoma, arial, helvetica, sans-serif;
    text-align: center;
    font-size: 0.8em;
    }

    /* Footnote */
    p.footnote {
    font-family: tahoma, arial, helvetica, sans-serif;
    font-size: 0.6em;
    text-align: right;
    padding: 0 2em 0 0;
    }

  10. berserker
    Member
    Posted 7 years ago

    main.css
    /* Main Selectors */
body {
background-color: #FFFBF0;
color: #000000;
background-image:url(background.jpg);
background-repeat:no-repeat;
background-position: top center;
}

a, a:visited {
background-color: transparent;
color: #FF0000;
}

a:hover {
background-color: transparent;
color: #FF0000;
}

/* Header */
div#header h1 {
font-family: tahoma, arial, helvetica, sans-serif;
text-align: center;
background-color: transparent;
color: #000000;
margin-top: 55px;
}

/* Thumbnail Index */
div#index {
text-align: center;
}

div#index table {
margin-left: auto;
margin-right: auto;
text-align: center;
}

div#index td.thumbcell {
width: 96px;
border-style: solid;
border-color: #BFBBB0;
border-width: 1px;
text-align: center;
vertical-align: middle;
padding: 10px;
}

div#index td.thumbcell img {
border-style: none;
}

div#index div.pages {
font-family: tahoma, arial, helvetica, sans-serif;
font-size: 0.8em;
text-align: right;
}

/* Photo Navigation */
div#navigation {
text-align: center;
font-family: tahoma, arial, helvetica, sans-serif;
font-size: 0.8em;
margin-top: 55px;
}

div#navigation table {
text-align: center;
margin: 0 auto 1em auto;
}

div#navigation td.previous {
text-align: left;
width: 96px;
}

div#navigation td.index {
text-align: center;
}

div#navigation td.next {
text-align: right;
width: 96px;
}

div#navigation td.thumbcell {
width: 96px;
}

div#navigation td.thumbcell img {
border-style: solid;
border-color: #000000;
border-width: 1px;
}

div#navigation td.thumbcell img.selected {
border-style: double;
border-width: 5px;
}

div#navigation span.home {
display: block;
padding-bottom: 1em;
}

/* Photograph */
div#photograph {
text-align: center;
}

div#photograph img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-color: #000000;
border-width: 1px;
}

/* Photograph Title */
h1.title {
text-align: center;
font-family: tahoma, arial, helvetica, sans-serif;
font-size: 0.8em;
font-weight: bold;
margin: 0px;
}

/* Photograph Caption */
p.caption {
font-family: tahoma, arial, helvetica, sans-serif;
text-align: center;
font-size: 0.8em;
}

/* Footnote */
p.footnote {
font-family: tahoma, arial, helvetica, sans-serif;
font-size: 0.6em;
text-align: right;
padding: 0 2em 0 0;
}


    You still need to adjust the following code.

    /* Main Selectors */
body {
background-color: #FFFBF0;
color: #000000;
background-image:url(
    background.jpg <- replace with the actual name of the image file and if not placed on the server in the same directory as the main.css stylesheet file also the path name relative to main.css. For example: ../images/banner.jpg or adimages/ad5918.jpg.
    );
background-repeat:no-repeat;
background-position: top center;
}


    /* Header */
div#header h1 {
font-family: tahoma, arial, helvetica, sans-serif;
text-align: center;
background-color: transparent;
color: #000000;
margin-top:
    55 <- replace with the height of the banner image plus 10
    px;
}



    /* Photo Navigation */
div#navigation {
text-align: center;
font-family: tahoma, arial, helvetica, sans-serif;
font-size: 0.8em;
margin-top:
    55 <- replace with the height of the banner image plus 10
    px;
}


    That should do it

  11. Anonymous

    Posted 7 years ago

    thank you very much.

Reply

(required)