How modern/professional can I make Coppermine gallery appear?

matheso · December 21, 2014, 04:03:12 AM

I've browsed the forums but can't find any professional-grade sites. I really want my gallery to have a modern appearance and be fully customizable. Link #1 below shows the demo which looks very unattractive/primitive in my opinion. Link #2 shows a gallery I'm trying to replicate. Can I make Coppermine look like this?

Link #1 : http://coppermine-gallery.net/demo/cpg15x/

Link #2: http://bondi.pixieset.com/wassermanfamily/ (scroll down)

Thanks for your time.

matheso · December 21, 2014, 04:06:03 AM

Or this site:

http://lymeta.com/. I'm basically wondering *how* customizable this gallery can be? Fully personal CSS? Place the search bar in any place, any size, etc.

Thanks again!

allvip · December 21, 2014, 12:47:19 PM

Yes and I will help you how to do it but you need bigger thumbnails and with equal width (you set that from config).
Remember that bigger thumbnails you load the server on a shared host.
I have big thumbnails on my gallery, but I set coppermine to crop them in low quality that looks ugly.

Reason for editing: please do not duplicate exactly a wesite:
1. You have to be original.
2. Is not nice for the website you copy and I think even ilegal.

I will do a start theme do show you that is possible.

allvip · December 21, 2014, 04:54:51 PM

I made just a start.
If you need more, then ask.

1. Copy theme curve folder from themes folder.
2. Rename it matheso
3. Add a big jpg image (more or less 1000px width with 200px) in folder themes/matheso/images name it header_image
3. Open template.html, delete all and paste:

Code Select


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
{META}
<link rel="stylesheet" href="css/coppermine.css" type="text/css" />
<link rel="stylesheet" href="themes/matheso/style.css" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
<!-- Begin IE6 support -->
<!--[if lt IE 7]>
<style>
body {behavior: url(themes/matheso/csshover3.htc );}
.dropmenu li {width: 1px;} .dropmenu li a.firstlevel span.firstlevel {white-space: nowrap;} .main_menu {overflow: auto;}
</style>
<![endif]-->
<!-- End IE6 support -->
{JAVASCRIPT}
<script src="themes/matheso/js/masonry.pkgd.min.js"></script>
<script src="themes/matheso/js/imagesloaded.pkgd.min.js"></script>
<script>
$(document).ready( function() {
  // for each .masonry element
  $('#thumbWrapp').each( function( i, elem ) {
    // separate jQuery object for each element
    var $elem = $( elem );
    // do imagesLoaded on it
    $elem.imagesLoaded( function() {
      // trigger .masonry() when element has loaded images
      $elem.masonry();
    });
  });
});
</script>
<!--
  SVN version info:
  Coppermine version: 1.5.9
  $HeadURL: https://svn.code.sf.net/p/coppermine/code/trunk/cpg1.5.x/themes/matheso/template.html $
  $Revision: 7809 $
-->
</head>
<body>
    {CUSTOM_HEADER}
    <div id="cpg_logo_block_outer">
        <div class="cpg_logo_block_inner">
		    <img src="themes/matheso/images/header_image.jpg" border="0" width="100%" height="auto" alt="" />
            <div id="cpg_logo_block_logo">
                <a href="index.php">
                    <img src="themes/matheso/images/coppermine-logo.png" border="0" width="260" height="60" alt="" />
                </a>
            </div>
		<div id="cpg_logo_block_name_center">
             <h1>{GAL_NAME}</h1>
             <p>December 6th,2014</p>
        </div>		
            <div class="clearer"></div>
        </div>
        </div>
		<div id="cpg_logo_block_name">
             <h1>{GAL_NAME}</h1>
             <h3>{GAL_DESCRIPTION}</h3>
        </div>
    </div>
    <div id="cpg_header_block_outer">
        <div class="cpg_header_block_inner">
            <div id="main_menu">
                    {SYS_MENU}
                    {SUB_MENU}
                    {ADMIN_MENU}
            </div><!-- Begin IE7 support --><img src="images/spacer.gif" class="menuheight" alt="" /><!-- End IE7 support -->
            <div class="clearer"></div>
            {MESSAGE_BLOCK}
        </div>
    </div>
    <div id="cpg_main_block_outer">
        <div class="cpg_main_block_inner">
            {GALLERY}
            <br /> <!-- workaround for issue 64492 - do not remove the line break! -->
        </div>
    </div>
    <div id="cpg_footer_block_outer">
        <div class="cpg_footer_block_inner">
            {CUSTOM_FOOTER}
            {CREDITS}
        </div>
    </div>
</body>
</html>

4) Open theme.php and at the end before ?> paste:

Code Select


/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/

// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->
<!-- END header -->
<!-- BEGIN thumb_cell -->
        <div class="thumbnails" width ="{CELL_WIDTH}" align="center">
                                <div align="center">
                                        <a href="{LINK_TGT}">{THUMB}</a>
                                        {CAPTION}
                                        {ADMIN_MENU}
                                </div>
        </div>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <div valign="top" class="thumbnails" align="center">&nbsp;</div>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
<!-- END row_separator -->
<!-- BEGIN footer -->
<!-- END footer -->
<!-- BEGIN tabs -->
                <div id="tabWrapp">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </div>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - START
******************************************************************************/
function theme_display_thumbnails(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $page, $total_pages, $sort_options, $display_tabs, $mode = 'thumb', $date='')
{
    global $CONFIG, $CURRENT_ALBUM_DATA;
    global $template_thumb_view_title_row,$template_fav_thumb_view_title_row, $lang_thumb_view, $lang_common, $template_tab_display, $template_thumbnail_view, $lang_album_list, $lang_errors;

    $superCage = Inspekt::makeSuperCage();

    static $header = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $row_separator = '';
    static $footer = '';
    static $tabs = '';
    static $spacer = '';

    if ($header == '') {
        $thumb_cell = template_extract_block($template_thumbnail_view, 'thumb_cell');
        $tabs = template_extract_block($template_thumbnail_view, 'tabs');
        $header = template_extract_block($template_thumbnail_view, 'header');
        $empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell');
        $row_separator = template_extract_block($template_thumbnail_view, 'row_separator');
        $footer = template_extract_block($template_thumbnail_view, 'footer');
        $spacer = template_extract_block($template_thumbnail_view, 'spacer');
    }

    $cat_link = is_numeric($aid) ? '' : '&amp;cat=' . $cat;
    $date_link = $date=='' ? '' : '&amp;date=' . $date;
    if ($superCage->get->getInt('uid')) {
      $uid_link = '&amp;uid=' . $superCage->get->getInt('uid');
    } else {
      $uid_link = '';
    }

    $album_types = array(
        'albums' => array('lastalb')
    );
    $album_types = CPGPluginAPI::filter('theme_thumbnails_album_types', $album_types);

    $theme_thumb_tab_tmpl = $template_tab_display;

    if ($mode == 'thumb') {
        $theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => in_array($aid, $album_types['albums']) ? $lang_album_list['album_on_page'] : $lang_thumb_view['pic_on_page']));
        $theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'thumbnails.php?album=' . $aid . $cat_link . $date_link . $uid_link . '&amp;page=%d'));
    } else {
        $theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => $lang_thumb_view['user_on_page']));
        $theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'index.php?cat=' . $cat . '&amp;page=%d'));
    }

    $thumbcols = $CONFIG['thumbcols'];
    $cell_width = ceil(100 / $CONFIG['thumbcols']) . '%';

    $tabs_html = $display_tabs ? create_tabs($nbThumb, $page, $total_pages, $theme_thumb_tab_tmpl) : '';

    if (!GALLERY_ADMIN_MODE && stripos($template_thumb_view_title_row, 'admin_buttons') !== false) {
        template_extract_block($template_thumb_view_title_row, 'admin_buttons');
    }
    // The sort order options are not available for meta albums
    if ($sort_options) {
        if (GALLERY_ADMIN_MODE) {
            $param = array(
                '{ALBUM_ID}'   => $aid,
                '{CAT_ID}'     => ($cat > 0 ? $cat : $CURRENT_ALBUM_DATA['category']),
                '{MODIFY_LNK}'     => $lang_common['album_properties'],
                '{MODIFY_ICO}'     => cpg_fetch_icon('modifyalb', 1),
                '{PARENT_CAT_LNK}' => $lang_common['parent_category'],
                '{PARENT_CAT_ICO}' => cpg_fetch_icon('category', 1),
                '{EDIT_PICS_LNK}'  => $lang_common['edit_files'],
                '{EDIT_PICS_ICO}'  => cpg_fetch_icon('edit', 1),
                '{ALBUM_MGR_LNK}'  => $lang_common['album_manager'],
                '{ALBUM_MGR_ICO}'  => cpg_fetch_icon('alb_mgr', 1),
            );
        } else {
            $param = array();
        }
        $param['{ALBUM_NAME}'] = $album_name;
        // Plugin Filter: allow plugin to modify or add tags to process
        $param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
        $title = template_eval($template_thumb_view_title_row, $param);
    } elseif ($aid == 'favpics' && $CONFIG['enable_zipdownload'] > 0) { //Lots of stuff can be added here later
        $param = array(
            '{ALBUM_ID}'   => $aid,
            '{ALBUM_NAME}' => $album_name,
            '{DOWNLOAD_ZIP}' => cpg_fetch_icon ('zip', 2) . $lang_thumb_view['download_zip'],
        );
        // Plugin Filter: allow plugin to modify or add tags to process
        $param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
        $title = template_eval($template_fav_thumb_view_title_row, $param);
    } else {
        $title = $album_name;
    }

    CPGPluginAPI::action('theme_thumbnails_wrapper_start', null);

    echo '<div class="thumbTitle">';
    echo $title;
    echo '</div>';
    echo '<div id="thumbWrapp">';

    $header = CPGPluginAPI::filter('theme_thumbnails_header', $header);
    echo $header;

    $i = 0;
    global $thumb;  // make $thumb accessible to plugins
    foreach($thumb_list as $thumb) {
        $i++;
        if ($mode == 'thumb') {
            if (in_array($aid, $album_types['albums'])) {
                $params = array(
                    '{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}'   => "thumbnails.php?album={$thumb['aid']}",
                    '{THUMB}'      => $thumb['image'],
                    '{CAPTION}'    => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                );
            } else {
                // determine if thumbnail link targets should open in a pop-up
                if ($CONFIG['thumbnail_to_fullsize'] == 1) { // code for full-size pop-up
                    if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
                       $target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['login_needed'],'','','','').'\');';
                    } elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
                        $target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['access_intermediate_only'],'','','','').'\');';
                    } else {
                       $target = 'javascript:;" onclick="MM_openBrWindow(\'displayimage.php?pid=' . $thumb['pid'] . '&fullsize=1\',\'' . uniqid(rand()) . '\',\'scrollbars=yes,toolbar=no,status=no,resizable=yes,width=' . ((int)$thumb['pwidth']+(int)$CONFIG['fullsize_padding_x']) .  ',height=' .   ((int)$thumb['pheight']+(int)$CONFIG['fullsize_padding_y']). '\');';
                    }
                } elseif ($aid == 'random') {
                    $target = "displayimage.php?pid={$thumb['pid']}$uid_link#top_display_media";
                } elseif ($aid == 'lastcom' || $aid == 'lastcomby') {
                    $page = cpg_get_comment_page_number($thumb['msg_id']);
                    $page = (is_numeric($page)) ? "&amp;page=$page" : '';
                    $target = "displayimage.php?album=$aid$cat_link$date_link&amp;pid={$thumb['pid']}$uid_link&amp;msg_id={$thumb['msg_id']}$page#comment{$thumb['msg_id']}";
                } else {
                    $target = "displayimage.php?album=$aid$cat_link$date_link&amp;pid={$thumb['pid']}$uid_link#top_display_media";
                }
                $params = array(
                    '{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}'   => $target,
                    '{THUMB}'      => $thumb['image'],
                    '{CAPTION}'    => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                );
            }

        } else {  // mode != 'thumb'

            // Used for mode = 'user' from list_users() in index.php
            $params = array(
                '{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}'   => "index.php?cat={$thumb['cat']}",
                '{THUMB}'      => $thumb['image'],
                '{CAPTION}'    => $thumb['caption'],
                '{ADMIN_MENU}' => '',
            );

        }

        // Plugin Filter: allow plugin to modify or add tags to process
        $params = CPGPluginAPI::filter('theme_display_thumbnails_params', $params);
        echo template_eval($thumb_cell, $params);

            if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;        }
    } // foreach $thumb

    unset($thumb);  // unset $thumb to avoid conflicting with global
	
    $footer = CPGPluginAPI::filter('theme_thumbnails_footer', $footer);
    echo $footer;
    echo '</div>';
	echo '<div class="clearer"></div>';
    if ($display_tabs) {
        $params = array(
            '{THUMB_COLS}' => $thumbcols,
            '{TABS}'       => $tabs_html,
        );
        echo template_eval($tabs, $params);
    }

    CPGPluginAPI::action('theme_thumbnails_wrapper_end', null);
    echo $spacer;
}
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - END
******************************************************************************/

Reason for editing : download masonry and images loaded and put them in themes/matheso/js folder.
http://masonry.desandro.com/
http://imagesloaded.desandro.com/

allvip · December 21, 2014, 04:55:35 PM

Open style.css, delete all and paste:

Code Select


/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2014 Coppermine Dev Team
  v1.0 originally written by Gregory Demar

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License version 3
  as published by the Free Software Foundation.

  ********************************************
  Coppermine version: 1.5.34
  $HeadURL: https://svn.code.sf.net/p/coppermine/code/trunk/cpg1.5.x/themes/curve/style.css $
  $Revision: 8753 $
**********************************************/


body {
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color : Black;
    margin: 0px;
    padding: 0px;
}

body.nobgimage {
    background: none;
}
#cpg_logo_block_outer  {
    padding: 0px;
}

#cpg_logo_block_outer div.cpg_logo_block_inner {
    width: 100%;
    position: relative;
    display: block;
    padding: 0px;
}

#cpg_logo_block_logo {
    border: none;
	position: absolute; 
	top: 1rem; 
	left: 1rem;
}
#cpg_logo_block_name_center {
    width: 30%;
	position: absolute; 
	top: 8rem; 
	left: 20rem;
	color: #FFFFFF;
	text-align: center;
	padding: 4rem 2rem 4rem 2rem;
	border: 4px solid #FFFFFF;
}
#cpg_logo_block_name_center h1 {
	color: #FFFFFF;
}
#cpg_logo_block_name {
        padding: 1rem 0.5rem 1rem 0.5rem;
}

#cpg_header_block_outer  {
    padding: 0px;
}

#cpg_header_block_outer div.cpg_header_block_inner {
    display: block;
    padding: 0px;
    /* min-height: 95px; */
}

#cpg_main_block_outer  {
    padding: 0px;
}

#cpg_main_block_outer div.cpg_main_block_inner {
    display: block;
    padding: 0px;
}

#cpg_footer_block_outer  {
    text-align: center;
    padding-left: 20px;

}

#cpg_footer_block_outer div.cpg_footer_block_inner {
    display: block;
    padding-top: 60px;
    padding-right: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
}

.cpg_starttable_outer  {
    padding: 0px;
}

.cpg_starttable_outer div.cpg_starttable_inner {
    display: block;
    padding: 0px;
}

#sysmenu {
    margin-top: 5px;
}

.menuheight {      /* IE7 */
    width: 1px;    /* IE7 */
    height: 95px;  /* IE7 */
}                  /* IE7 */


table {
    font-size: 12px;
}

h1{
    font-weight: bold;
    font-size: 22px;
    font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    line-height : 120%;
    color : #000000;
    margin: 2px;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    margin: 0px;
}

h3 {
    font-weight: normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 2px;
}

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
    margin: 2px 0px;
}

pre.filepath {
    margin: 0px;
    padding: 0px;
}

.textinput {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 1px solid #D1D7DC;
    padding-right: 3px;
    padding-left: 3px;
}

.listbox {
    font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
    font-size: 100%;
    border: 1px solid #D1D7DC;
    vertical-align : middle;
}

.radio {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    vertical-align : middle;
}

.checkbox {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    vertical-align : middle;
}

a:link {
    color: #346;
    text-decoration: none;
}

a:visited {
    color: #0033CC;
    text-decoration: none;
}

a:focus {
    color: #0033CC;
    text-decoration: none;
}

a:hover {
    color: #346;
    text-decoration: underline;
}

a:active {
    color: #0033CC;
    text-decoration: none;
}

.bblink a {
    color: #0033CC;
    text-decoration: none;
}

.bblink a:hover {
    color: #0033CC;
    text-decoration: underline;
}

.button, .admin_menu {
    background-color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: white;
    border: 1px solid #5A6C85;
    cursor:pointer;
    padding-left:0px;
    padding-right:0px;
    margin-right:2px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.button {
    font-size: 0.8em;
    white-space: nowrap;
}

a.button, a.admin_menu {
    color:white;
    text-decoration:none;
}

a:hover.button, a:hover.admin_menu {
    background-color: #FD9604;
}

.maintable {
    margin-top: 1px;
    margin-bottom: 1px;
}

.tableh1 {
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
    color: #000000;
    font-family: arial,helvetica,sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}

.tableh2 {
    color : #000000;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}

.tableb {
    background: #F0F4F7 ;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}

/* This class will be used in conjunction with class tableb: attributes not particularly (re)-assigned will be taken into account from tableb. */
/* It is being used to accomplish alternating row colors for lists. */
/* It's recommended to only assign another background color that slightly differs from the one defined in tableb */
.tableb_alternate {
    background: #E7EAEF;
}

.tablef {
    background: #F0F4F7;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.catrow_noalb {
    background: #E7EAEF ;
    color : #000000;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}

.catrow {
    background: #F0F4F7 ;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 3px;
    padding-left: 10px;
}

.album_stat {
    font-size: 85%;
    margin: 5px 0px;
}

.thumb_filename {
    font-size: 80%;
    display: block;
}

.thumb_title {
    font-weight : bold;
    font-size: 80%;
    padding: 2px;
    display : block;
}

.thumb_caption {
    font-size: 80%;
    padding: 1px;
    display : block;
}

.thumb_caption a {
    text-decoration: underline;
    color: #000000;
}

.thumb_num_comments {
    font-weight: normal;
    font-size: 80%;
    padding: 2px;
    font-style : italic;
    display : block;
}

.user_thumb_infobox {
    margin-top: 1px;
    margin-bottom: 1px;
}

.user_thumb_infobox th {
    font-weight : bold;
    font-size: 100%;
    margin-top: 1px;
    margin-bottom: 1px;
    text-align : center;
}

.user_thumb_infobox td {
    font-size: 80%;
    margin-top: 1px;
    margin-bottom: 1px;
    text-align : center;
}

.user_thumb_infobox a {
    text-decoration: none;
    color: #000000;
}

.user_thumb_infobox a:hover {
    color: #000000;
    text-decoration: underline;
}

.sortorder_cell {
    padding: 0px;
    margin: 0px;
}

.sortorder_options {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color : #FFFFFF;
    padding: 0px;
    margin: 0px;
    font-weight: normal;
    font-size: 80%;
    white-space: nowrap;
}

.navmenu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    font-size: 100%;
    font-weight: bold;
    border-style: none;
}

.navmenu img {
    margin-top: 1px;
    margin-right: 5px;
    margin-bottom: 1px;
    margin-left: 5px;
}

.navmenu a {
    display: block;
    padding-top: 2px;
    padding-right: 5px;
    padding-bottom: 2px;
    padding-left: 5px;
    text-decoration: none;
    color: #FFFFFF;
}

.navmenu a:hover {
    background : #EFEFEF ;
    text-decoration: none;
    color: #000000;
}

.icon {
    vertical-align:middle;
    margin-right:1px;
}

.comment_date{
    color : #5F5F5F;
    font-size : 90%;
    vertical-align : middle;
}

.image {
    max-width: 100%;
    height: auto;
    margin:0px;
}

/* pseudo-classes for image links */
a:link .image{
    margin:0px;
}

a:visited .image{
    margin:0px;
}

a:focus .image{
    margin:0px;
}

a:hover .image{
    margin:0px;
}

a:active .image{
    margin:0px;
}

/* pseudo-classes for middlethumb links */
a:link .middlethumb,a:visited .middlethumb,a:focus .middlethumb,a:hover .middlethumb,a:active .middlethumb{
    border: 2px solid blue;
}

.imageborder {
    border: 1px solid #000000;
    background-color: #FFFFFF;
    margin-top: 3px;
    margin-bottom: 3px;
}

.display_media {
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
}
.thumbTitle {
    width: 100%;
    clear:both;
    margin: 0px;
    padding: 0px;
}
#thumbWrapp .thumbnails {
    width: 32%;
    float: left;
    margin: 0.5%;
}
#thumbWrapp .thumbnails a:link {
    height: 0px;
}
.footer {
    font-size : 9px;
}

.footer a {
    text-decoration: none;
    color: #000000;
}

.footer a:hover {
    color: #000000;
    text-decoration: underline;
}

.statlink {
    color: #000000;
    padding: 0 0 0 0.5rem;
}

.statlink a {
    text-decoration: none;
    color: #000000;
}

.statlink a:hover {
    color: #444444;
    text-decoration: underline;
}

.alblink {
    font-weight:bold;
}

.alblink a {
    text-decoration: underline;
    color: #000000;
}

.alblink a:hover {
    color: #000000;
    text-decoration: underline;
}

.catlink {
    display: block;
    margin-bottom: 2px;
    font-weight:bold;
}

.catlink a {
    text-decoration: underline;
    color: #000000;
}

.catlink a:hover {
    color: #000000;
    text-decoration: underline;
}

.topmenu {
    line-height : 130%;
    font-size: 100%;
}

.topmenu a {
    color : #0033CC;
    text-decoration : none;
}

.topmenu a:hover  {
    color : #0033CC;
    text-decoration : underline;
}

.img_caption_table {
    border: none;
    background-color: #FFFFFF;
    width : 100%;
    margin : 0px;
}

.img_caption_table th {
    background: #D1D7DC ;
    font-size: 100%;
    color : #000000;
    padding-top: 4px;
    padding-right: 10px;
    padding-bottom: 4px;
    padding-left: 10px;
    border-top : 1px solid #FFFFFF;
}

.img_caption_table td {
    background: #EFEFEF ;
    padding-top: 6px;
    padding-right: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    border-top : 1px solid #FFFFFF;
    white-space: normal;
}

.debug_text {
    border: #BDBEBD;
    background-color: #EFEFEF;
    width : 100%;
    margin: 0px;
}

.clickable_option {
    cursor : default;
}

.listbox_lang {
    color: #000000;
    background-color: #D1D7DC;
    border: 1px solid #0E72A4;
    font-size: 80%;
    font-family: Arial, Helvetica, sans-serif;
    vertical-align : middle;

}

.pic_title {
    color: #000000;
    font-size: 120%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-align : center;
    padding-top:0px;
    padding-bottom:0px;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.0em;
}

.pic_caption {
    color: #000000;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-align : center;
    padding-top:0px;
    padding-bottom:0px;
    margin-top:0px;
    margin-bottom:0px;
    line-height:1.0em;
}

.important {
    /* background-image : url(images/important.gif); */
    color: red;
    font-weight: bold;
    padding-left:1px;
    padding-right:1px;
    padding-top:3px;
    padding-bottom:3px;
}

#cpgChooseLanguageWrapper {
    float:left;
    margin-left:3px;
    margin-right:3px;
    margin-top:0px;
    margin-bottom:0px;
}

#cpgChooseThemeWrapper {
    float:left;
    margin-left:3px;
    margin-right:3px;
    margin-top:0px;
    margin-bottom:0px;
}

.filmstrip_background {
    background-color:#000000;
}

.prev_strip {
    text-align: left;
}

.next_strip{
    text-align: right;
}

/** Swfupload css **/
div.fieldset {
    border:  2px solid #0E72A4;
    margin: 10px 0;
    padding: 20px 10px;
}

div.fieldset span.legend {
    position: relative;
    padding: 3px;
    top: -30px;
    background-color: #0E72A4;
    color: #fff;
}

div.flash {
    width: 375px;
    margin: 10px 5px;
    border-color: #D9E4FF;
}

input[disabled]{ border: 1px solid #ccc } /* FF 2 Fix */


.progressWrapper {
    width: 357px;
    overflow: hidden;
}

.progressContainer {
    margin: 5px;
    padding: 4px;
    border: solid 1px #E8E8E8;
    background-color: #F7F7F7;
    overflow: hidden;
}
/* Message */
.message {
    margin: 1em 0;
    padding: 10px 20px;
    border: solid 1px #FFDD99;
    background-color: #FFFFCC;
    overflow: hidden;
}
/* Error */
.red {
    border: solid 1px #B50000;
    background-color: #FFEBEB;
}

/* Current */
.green {
    border: solid 1px #DDF0DD;
    background-color: #EBFFEB;
}

/* Complete */
.blue {
    border: solid 1px #CEE2F2;
    background-color: #F0F5FF;
}

.progressName {
    font-size: 8pt;
    font-weight: 700;
    color: #555;
    width: 323px;
    height: 14px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.progressBarInProgress,
.progressBarComplete,
.progressBarError {
    font-size: 0;
    width: 0%;
    height: 2px;
    background-color: blue;
    margin-top: 2px;
}

.progressBarComplete {
    width: 100%;
    background-color: green;
    visibility: hidden;
}

.progressBarError {
    width: 100%;
    background-color: red;
    visibility: hidden;
}

.progressBarStatus {
    margin-top: 2px;
    width: 337px;
    font-size: 7pt;
    font-family: Arial;
    text-align: left;
    white-space: nowrap;
}

a.progressCancel {
    font-size: 0;
    display: block;
    height: 14px;
    width: 14px;
    background-image: url(../../images/cancelbutton.gif);
    background-repeat: no-repeat;
    background-position: -14px 0px;
    float: right;
}

a.progressCancel:hover {
    background-position: 0px 0px;
}

.swfupload {
    vertical-align: top;
}

/**styles for photo manager*/
table#pic_sort tr td {
    padding: 4px;
    border-bottom: 1px solid #CCCCCC;
}

/** styles for album manager and photo album*/
table#album_sort tr td {
    padding: 3px;
    border-bottom: 1px solid #CCCCCC;
}

table#album_sort tr td span.editAlbum {
    margin-left: 100px;
    font-size: 10px;
    line-height: 100%;
    text-decoration: underline;
    cursor: pointer;
    display: none;
    color: #FF0000;
}

.cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation {
    border: 1px solid;
    margin: 10px 0px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.cpg_message_info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('../../images/message/info.png');
}

.cpg_message_success {
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image: url('../../images/message/ok.png');
}

.cpg_message_warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('../../images/message/warning.png');
}

.cpg_message_error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('../../images/message/stop.png');
}

.cpg_message_validation {
    color: #D63301;
    background-color: #FFCCBA;
    background-image: url('../../images/message/error.png');
}

.cpg_summary {
    font-size:0.9em;
	border: 1px solid;
    margin: 10px 0px;
	padding:5px 10px 5px 10px;
    color: #FF2B9C;
    background-color: #FFDEEF;
	text-align:right;
	float:right;
	width:400px;
}

#GB_window {
    background-color: #EFEFEF;
    border: 5px solid #0E72A4;
}

.external {
    background: transparent url('../../images/link.gif') 100% 50% no-repeat;
    padding-right: 10px;
}

.detail_head_collapsed, .detail_head_expanded {
    color: #0033CC;
}

/* Styles for the standard dropdown menus. */
.main_menu {
    padding: 0 0 0 0.5rem;
    float: left;
    margin: 0;
    width: 98%;
}

.dropmenu, .dropmenu ul {
    list-style: none;
    line-height: 1em;
    padding: 0;
    margin: 0;
}

.dropmenu {
    padding: 0 0.5em;
}

.dropmenu a {
    display: block;
    color: #000000;
    text-decoration: none;
}

.dropmenu a span {
    display: block;
    padding: 0 0 0 5px;
    font-size: 0.9em;
}

/* the backgrounds first level only*/
.dropmenu li a.firstlevel {
    margin-right: 8px;
}

.dropmenu li a.firstlevel span.firstlevel {
    display: block;
    position: relative;
    left: -5px;
    padding-left: 5px;
    height: 22px;
    line-height: 19px;
}

.dropmenu li {
    float: left;
    position: relative;
    padding: 0;
    margin: 0;
}

.dropmenu li ul {
    z-index: 90;
    display: none;
    position: absolute;
    width: 19.2em;
    font-weight: normal;
    border-bottom: solid 1px #999;
    background: url(images/menu_gfx.png) 0 -100px no-repeat;
    padding: 7px 0 0 0;
}

.dropmenu li li {
    width: 19em;
    margin: 0;
    border-left: solid 1px #999;
    border-right: solid 1px #999;
}

.dropmenu li li a span {
    display: block;
    padding: 8px;
}

.dropmenu li li a.firstlevel span.firstlevel {
    left: 0 !important;
}

.dropmenu li li a.firstlevel {
    margin-right: 0 !important;
}

.dropmenu li li a.firstlevel:hover span.firstlevel {
    background: #D4DBE4 !important;
    color: #000 !important;
    text-decoration: none !important;
}

.dropmenu li ul ul {
    margin: -1.8em 0 0 13em;
}

/* the active button */
.dropmenu li a.active {
    background: url(images/menu_gfx.png) no-repeat 100% 0;
    color: #ffffff;
    font-weight: bold;
}

.dropmenu li a.active span.firstlevel {
    background: url(images/menu_gfx.png) no-repeat 0 0;
}

/* the hover effects */
.dropmenu li a.firstlevel:hover {
    background: url(images/menu_gfx.png) no-repeat 100% -30px;
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
}

.dropmenu li a.firstlevel:hover span.firstlevel {
    background: url(images/menu_gfx.png) no-repeat 0 -30px;
}

/* the hover effects on level2 and 3*/
.dropmenu li li a:hover {
    background: #D4DBE4;
    color: #000;
    text-decoration: none;
}

.dropmenu li:hover ul ul, .dropmenu li:hover ul ul ul {
    top: -999em;
}

.dropmenu li li:hover ul {
    top: auto;
}

.dropmenu li:hover ul {
    display: block;
}

.dropmenu li li.additional_items {
    background-color: #fff;
}

/* Styles for the standard button lists.
------------------------------------------------------- */

.buttonlist ul li a {
    display: block;
    font-size: 0.8em;
    color: white;
    background: url(images/menu_gfx.png) no-repeat 0 -30px;
    padding: 0;
    margin-left: 12px;
    margin-right: 0px;
    cursor: pointer;
}

.buttonlist ul li a:hover {
    background: url(images/menu_gfx.png) no-repeat 0 0;
    color: #fff;
    text-decoration: none;
}

.buttonlist ul li a span {
    background: url(images/menu_gfx.png) no-repeat 100% -30px;
    display: block;
    height: 24px;
    line-height: 20px;
    padding: 0 8px 0 0;
    position: relative;
    right: -8px;
}

.buttonlist ul li a:hover span {
    background: url(images/menu_gfx.png) no-repeat 100% 0;
}

/* the active one */
.buttonlist ul li a.active {
    background: url(images/menu_gfx.png) no-repeat 0 -60px;
    color: black;
    font-weight: bold;
}

.buttonlist ul li a.active span {
    background: url(images/menu_gfx.png) no-repeat 100% -60px;
}

.buttonlist ul li a.active {
    font-weight: bold;
}

.buttonlist ul li a.active:hover {
    color: #ddf;
}

.align_top ul li a, .align_bottom ul li a {
    margin: 0 12px 0 0;
}

.rounded_menu {
    display: block;
    font-size: 0.8em;
    color: white;
    background: url(images/menu_gfx.png) no-repeat 0 -30px;
    padding: 0;
    cursor: pointer;
}

.rounded_menu span {
    background: url(images/menu_gfx.png) no-repeat 100% -30px;
    display: block;
    height: 24px;
    line-height: 20px;
    padding: 0 8px 0 0;
    position: relative;
    right: -8px;
}

a:hover.rounded_menu  {
    background: url(images/menu_gfx.png) no-repeat 0 0;
    color: #fff;
    text-decoration: none;
}

a:hover.rounded_menu span {
    background: url(images/menu_gfx.png) no-repeat 100% 0;
}

.admin_menu_anim {
    background-image : url(images/button_bg_anim.gif);
}

If you don't want rating stars, date, title etc under thubnails then disable then from Config -Thumnbail view. Title and date can not be disable so you need to add to style.css:

Code Select


.thumb_title_title,
.thumb_caption  {
    display: none!important;
}

allvip · December 21, 2014, 05:11:48 PM

This kind of layout is based on masonry jquery plugin or other similar jquery plugins, but the most popular is masonry.

YOU CAN EDIT COPPERMINE TO LOOK HOW MODERN YOU WANT.
Just ask on the forum if you want to do something and you don't know how.
Even to display the image in overlay when you click on a thumb is possible.

You need jQuery update plugin for cpg1.5.x http://forum.coppermine-gallery.net/index.php/topic,77595.0.html for masonry to work great.

You need to make your thumnails bigger and with equal width for that layout.
Go to Config - Thumbnails settings - Use dimension (width or height or max aspect for thumbnail)* - choose width and for Max dimension of a thumbnail (width, if you use "exact" in "Use dimension") * 340px.

With big thumbnils, the filmstrip will look awfull so you need this topic: Responsive filmstrip (filmstrip divs no tables) http://forum.coppermine-gallery.net/index.php/topic,77558.0.html

You also need Album List - Change Page Layout (Album list link) http://forum.coppermine-gallery.net/index.php/topic,64270.0.html

Other topics that can help edit displayimage.php : Removing menubar (to edit or remove) http://forum.coppermine-gallery.net/index.php/topic,77938.0.html

Images to fit screen resolution plugin ( responsive image plugin ) http://forum.coppermine-gallery.net/index.php/topic,77586.0.html

matheso · December 22, 2014, 02:44:53 AM

Thank you allvip for such detailed feedback. I'm a complete novice but will implement what you've written and will report back.
I'm sure there will be follow-up questions, so thank you so much in advance.

allvip · December 22, 2014, 03:22:29 AM

If you don't know anything about html and css then go to http://www.w3schools.com/, but I'm sure you know.
They have very easy tutorials, but you can also ask me too. I would be happy to help.

CSS (for your style.css) is to change colors, fonts, add borders, float divs (move to right or left) etc. More simple: is for the look of the pages.
HTML (for your template.html) is how to write (insert on the page) divs, tables, paragraph, lists etc. More simple: is for the content of the pages.

matheso · December 22, 2014, 04:40:25 AM

Yes, I'm familiar with HTML and CSS.

I'm mainly wondering if I can fully customize my Coppermine gallery as if it was my own website? I mean fully customized... because I don't want to spend a week learning the system just to realize it doesn't let me remove certain features I find ugly.

I've attached a screenshot showing the items I'd like removed, including all category sections and all text (shown in red) and replace them with my own custom title, search box and button (shown in blue)

Please tell me if this type of customization is possible. Any drawbacks I would like to know. Thanks a lot

allvip · December 22, 2014, 05:26:01 AM

YES

1) You can remove remove the search button and add a custom serach or remove it from the menu, place it above the menu and edit it to look like a box (like most websites use today).

2)

a) To remove My gallery desription open template.html and delete <h3>{GAL_DESCRIPTION}</h3> from:

Code Select


	<div id="cpg_logo_block_name">
             <h1>{GAL_NAME}</h1>
             <h3>{GAL_DESCRIPTION}</h3>
        </div>

b) To change My gallery name to My personal Collection go to Config - General settings.
3) To remove Category and Albums go to Config - Album list view - The content of the main page and change breadcrumb/catlist/alblist/random,2/lastup,2 to breadcrumb/lastup,2 or with Change Page Layout (Album list link) plugin (read reply#5) you can choose not to show it on the homepage and show it only on the other pages or show one way on the homepage an another way on the other pages.

4) Custom CSS buttons - YES.

matheso · December 27, 2014, 01:14:25 AM

I edited your post by mistake.
Sorry

You said something like this: I uploaded the jquery update plugin in my theme folder.

matheso · December 27, 2014, 01:32:00 AM

My site is here:

http://taskbasket.net/gallery/themes/matheso/template.html

allvip · December 27, 2014, 05:04:00 PM

All coppermine plugins go to plugins folder (http://taskbasket.net/gallery/plugins). They have nothing to do with the theme folder.
Upload jquery_update folder in plugins folder.
To upload a plugin you can also go to Config - Plugin Manager - click the Browse button and then upload. No need to unzip it with this method. Just upload the zip file. Sometimes it does not work so you can always manually unzip and upload the folder in the plugins folder.

After you upload it, you need to install it. Go to Config - Plugin Manager to install, uninstall or delete.
See attachment.

allvip · December 27, 2014, 06:49:24 PM

I also recommend you HTML5 multi-file upload plugin http://forum.coppermine-gallery.net/index.php/topic,75927.0.html.

Is much better then flash upload and you can insert Title, Caption, Keywords at once.
You shoud try it.

coppermine-gallery.com/forum

News:

How modern/professional can I make Coppermine gallery appear?

matheso

matheso

allvip

allvip

allvip

allvip

matheso

allvip

matheso

allvip

matheso

matheso

allvip

allvip