in

Shozam Community

A place to learn, share and interact with other Shozam users

Info Thumbnails

Last post 05-12-2008 5:28 PM by Razvan Neagu. 2 replies.
Page 1 of 1 (3 items)
Sort Posts: Previous Next
  • 05-12-2008 12:33 AM

    • birdpics
    • Not Ranked
    • Joined on 04-23-2008
    • Posts 3
    • Points 75

    Info Thumbnails

    Hi!

     

    Is it possible to create an Info Page which has a series of thumbnails on one side and just one block of text for the whole page?

     I would like to eliminate the horizontal lines to the left of the thumbnails,

     

    Thanks!

    • Post Points: 35
  • 05-12-2008 10:20 AM In reply to

    • Cowboy
    • Top 10 Contributor
    • Joined on 05-15-2007
    • Granger Township, OH
    • Posts 368
    • Points 5,795

    Re: Info Thumbnails

     Do a Vertical Stack using a graphics program. I use Paint Shop Pro.

    1. Gather the images you want to use.

    2. Create a base image the same color as your background on the Info page and as wide plus 2px of your widest image and as high of your total height plus allow for spacing of images.

    3. Layer your images onto the base image and merge them.

    4. Save the image.

    5. Create a 1 image album to use as your Info page using the image you just created.

    6. Insert as much text continuously as you want.

    Here is an example using 2 images stacked on a base image:

    Vertical Stack Example

    I really wouldn't get carried away by stacking too many images because they should be in your gallery somewhere.  Your stacked images shouldn't really exceed the length of your text.

    Note - The Info label in this gallery was changed to read "About Ellie Nape".

    Cowboy

    If it ain't broke... fix it until it is!

    If you have never seen Our USMC Silent Drill Team, you need to watch it here in a one of my Shozam galleries: http://www.ohiowebs.net/usmc
    • Post Points: 5
  • 05-12-2008 5:28 PM In reply to

    Re: Info Thumbnails

    Birdpics,

    Also, if you only want the horizontal bars to dissapear, you could turn them into the same color as the page background:

    • Step 4 --> Customize Tab --> Middle Section --> MainDividerLines --> Color: ...

    Assuming you are HTML/CSS savy (comfortable editing the theme CSS file outside of Shozam) you can:

    • Create a custom theme
    • View the HTML code for the Info Page and jot down the CSS styles applied to the paragraph headers
    • Edit the custom theme's CSS file

    The CSS file is typically in:
    C:\Documents and Settings\[USER NAME]\My Documents\My Shozam Themes\[THEME NAME]\theme.css

    You will need to edit the style to do what you want, like hide things you do not want to display or have them colored the same as the background. From looking at the HTML of the Info Page, you will see the following code that is controlling the display of the paragraph headings on that page (these headings display the image short caption text):

    <div class="infoCaption">
    <h2>Image short caption is displayed here</h2>
    </div>

    ...meaning that your interest should be focused mainly on the "infoCaption" style.

    If you go to the CSS file, you will see that style defined something like this:

    .infoCaption
    {
    border-top-color: #cc0000;
    border-top-style: solid;
    border-top-width: 2px;color: #cccc00;
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
    width: 524px;
    }

    You can change this style as you please. As highlighted in red above, note that you have control over the border that apepars at the top of the style (this is the line that divides the paragraphs) as well as over the color of the caption (the paragraph title on the info Page). You can remove all the border properties to have the border go away entirely.

    Or you can have it all be invisible by applying a style like this:

    .infoCaption
    {
    float: left;
    font-family: Arial, Helvetica, sans-serif;
    padding-left: 5px;
    padding-right: 5px;
    text-align: left;
    width: 524px;
    display: none;
    }

    So even though you cannot tell Shozam not to generate the paragraph heading text (the short caption for the images on the Info Page) you can certainly control the display of those through the CSS theme file.

    Razvan Neagu
    Shozam Web Gallery Generator
    Executive Team
    • Post Points: 5
Page 1 of 1 (3 items)
Copyright 2008, KOMOTION, Inc. All rights reserved.