Home› General support

Adjusting Width - Effervescence+ Theme

VWPowered Member
in General support
hi, after overdoing it with the search button for the last few hours, i'm still none the wiser as to how i can make the gallery width wider so three columns stay three columns rather than go to 2 because a title is to long. most of the titles i cant really shorten as they are place names etc..

if you have a gander you'll see what i mean..

http://www.franco-oldtimers.com/zenphoto/Places/

can anyone shed light on how to make the columns wider or reducing test size, i'm a virgin when it comes to Zenphoto and look forward to using the software...

thank you in advance :)

Comments

  • JHT Member
    I am also a newby when it comes to changing things in ZenPhoto and not that familiar with style sheets, but I learned a few things in the past week tweaking Efferescence+ for my own use.
    http://www.trageser.us/gallery/

    I think I may have accidentally found what you are looking for.
    It is the width setting for the /div main. I did not understand why all the different /divs were used until I removed one that preceded the /main.

    Look in the efferescence.css style sheet at the width setting on line 368.
    #main {
    background: #e3e2dd; /*div around thumbs in index*/
    text-align: left;
    width: 630px;
    margin: 0 auto 0 auto;
    padding-bottom: 10px;
    Try changing the width setting and upload the changed css file to your site.

    Let me know if this works for you.
  • JHT Member
    I experimented with changing the width property for #main in the efferescence.css sheet and it did not have the effect I expected. I guess we will just have to wait for the experts to respond.
  • sbillard Member
    You would really have to describe what is not expected. But I suspect you did not change enough of the CSS. There are multiple divisions that would need to have their sizes changed compatibly for everything to look correct.

    Best way to approach this is to ask your browser to show you the HTML source. Then you can look at the HTML around the parts that are not right and at the CSS to see how these parts are styled.
  • JHT Member
    Thanks again sbillard. In my case, it is the Octoberfest.css file that needs to be changed. I changed the '#main' and '#submain' width values to 840 in the Octoberfest.css style sheet and my gallery and album widths inceased.
    VWPowered, you will need to change these values in the css file for you color scheme.

    I know how to change the font size for the 'description' but not the 'Title' of the albums. You might search the CSS files for album title font settings.
  • JHT Member
    You piqued my interest in understanding how the Title text was controlled as well as the width and number of columns.
    I have a few fixes here that should complete the solution to your question.
    First, in addition to changing the div width values to 840 as mentioned above, you will need to change the gallery and album column values from 3 & 5 to 4 & 7 respectively at the top of the Album.php

    define('ALBUMCOLUMNS', 4);
    define('IMAGECOLUMNS', 7);

    and gallery.php files
    <?php require ('customfunctions.php'); $themeResult = getTheme($zenCSS, $themeColor, 'effervescence');normalizeColumns(4, 7);?>

    Now for the Title text font size,
    The album Titles font size is specified using the <h4> in the Gallery.php file.

    <h4>" title="<?php echo $annotate; ?>"><?php printAlbumTitle(); ?></h4>

    Likewise, sub Albums are titled using the <h4> in the Album.php file.

    <h4>" title="<?php echo html_encode($annotate) ?>"><?php printAlbumTitle(); ?></h4>

    The font definition h4 is included in the stylesheet for the color scheme, in my case Oktoberfest.css. You can not just change the values used in the h4 definition since it is used many places. The best solution is to add a new definition to your color scheme css file and label it h5.

    Add this in the group labled /* Gallery Titles --- */
    h5 {
    text-align: center;
    font: 12px/18px Arial, Helvetica, Tahoma, Verdana, sans-serif;
    color: #fff; /*unknown*/
    }

    Now in your Gallery.php and Album.php files replace the <h4> & </h4> shown above with <h5> & </h5>.

    You can see the results in my gallery.
    http://www.trageser.us/gallery/

    You could modify the values 12px/18px in the h5 definition above to make the font even smaller but then it be too small to read by some visitors.

    Does this solve your problem?
Sign In or Register to comment.