Simple theme (white with a little black) responsive coppermine theme

[allvip]

Is the Simple theme (white with a little black) theme http://forum.coppermine-gallery.net/index.php/topic,78162.0.html made responsive just with css.
You can test the theme for all monitor resolution, tables and phones at http://quirktools.com/screenfly/ after you install it. No need to change the theme from Config. Just type in the box your_domain_name/index.php?theme=simple_responsive.

Has the same styles like Simple theme (white with a little black) but I organized them by chapters.

I also added this styles at the end of styles.css

Code Select Expand


/****** START Styles RESPONSIVE theme *******************/

#cpg_logo_block_logo img {
    max-width: 100%;
    width: 100%!important;
    height: auto!important;
}
.albumName,
.thumbsAdmin {
    float: left;
padding: 0.5%;
margin: 0px;
}
.sortorder_cell {
    float: right;
}
#formcell {
    float: left;
}
.thumbnail,
.catrow_noalb img,
.catrow img {
    max-width: 12vw!important;
    height: auto!important;
}
.thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments {
    max-width: 12vw!important;
    overflow: hidden;
word-break: break-all;
}
@media all and (min-width : 0px) and (max-width : 320px) {
    .albumsThumbnails p {
    font-size: 3.2vw!important;
    }
    .buttonlist ul li a {
    margin-left: 0px!important;
    }
    .album_stat,.tableh2 {
    overflow: hidden;
word-break: break-all;
   } 
}
@media all and (min-width : 0px) and (max-width : 500px) {
    .menuheight {
    height: 10px;
    }
    .catrow_noalb table,.catrow table  {
    font-size: 80%!important;
    }
.alblink a {
    font-size: 80%!important;
    }
.statlink h2 {
    font-size: 3.5vw!important;
    }
#cpg_main_block_outer,
    .cpg_main_block_inner {
padding: 0px!important;
}
.tableb {
padding: 0px!important;
    }
.buttonlist ul li a span {
    height: 3vw!important;
    line-height: 2vw!important;
    }
   .buttonlist ul li a{
    font-size: 3vw!important;
    }
   .navmenu img,.buttonlist img {
    max-width: 3vw!important;
    height: auto;
   }
   .navmenu {
    font-size: 3vw!important;
   }
.tableh2 {
    padding: 0px!important;
    }
.tableh1 {
    font-size: 80%!important;
padding:  0px 2px 0px 0px!important;
    }
.thumbnails {
padding: 0px!important;
}
.thumbsAdmin .admin_menu {
margin: 2%!important;
    }
.thumbsAdmin a {
font-size: 2.5vw!important;
    }
}

.strip_image {
    max-width: 10vw!important;
    height: auto;
}
#film {
    width: 100%!important;   
}
#film .thumb a:link  {
    width: 100%!important;
}
.tape  {
    width: 100%!important;
    height: 100%!important;
    margin-left: 0px!important;
}
.remove {
    display: none!important;
}
.display_media {
width: auto;
}
.display_media .image {
    max-width: 70vw!important;
    height: auto!important;
}
.display_media td.image {
    background-color: #1E1E1E;
background-repeat:no-repeat;
background-position: center center;
    background-size: contain;
}
.display_media .image img {
width: auto!important;
    height: 70vw!important;
}
#picinfo {
    width: 100%!important;
    overflow: scroll;
}
.sortorder_cell img,.thumb_caption_rating img,#comments img {
    max-width: 2vw!important;
    height: auto!important;
}
#comments #captchaImg img{
    max-width: 25vw!important;
    height: auto!important;
}
.comment_date {
    font-size: 1.8vw!important;
}
/********END Styles responsive theme**************************************/


In theme.php I added:

1) function $template_thumb_view_title_row to change the look of the thumbnails sort.
2) function $template_thumbnail_view to give id="tabs" to the thumbnails page tabs.
3) function $template_album_list
4) function $template_album_list_cat (When Config - Album list view - Show first level album thumbnails in categories ON is responsive too.)
5) function $template_add_your_comment to add  id="captchaImg".The image for captcha (confirmation for comments) and the smilies must have diffrent widths.

[allvip]

Some details:

IS 100% RESPONSIVE (everything is responsive) but not the admin pages like catmgr.php,pluginmgr.php  etc.

The setting for Config -Thumbnail view- Number of columns on thumbnail page must be a reasonable number like 5 not 10. The settings for Album list view - Number of columns for the album list MUST BE MAX 3 .
If you want a big number for Config -Thumbnail view- Number of columns on thumbnail page change max-width: 12vw!important; for .thumbnail and .thumb_title,.thumb_caption,.thumb_filename,.thumb_num_comments with a smaller value like 5vw.

To make images responsive the css rule is:

Code Select Expand


img {
    max-width: 100%!important;
    height: auto;
}


It works only with divs and not with tables.For tables I used viewports:

Code Select Expand


img {
    max-width: 12vw!important;
    height: auto;
}


The image on displayimage.php is also responsive but if you want to use  Images to fit screen resolution plugin ( responsive image plugin ) http://forum.coppermine-gallery.net/index.php/topic,77586.0.html then

delete from style.css:

Code Select Expand


.display_media {
width: auto;
}
.display_media .image {
    max-width: 70vw!important;
    height: auto!important;
}
.display_media .image img {
width: auto!important;
    height: 70vw!important;
}


or uncomment the code like this:

Code Select Expand


/*************************
.display_media {
width: auto;
}
.display_media .image {
    max-width: 70vw!important;
    height: auto!important;
}
.display_media .image img {
width: auto!important;
    height: 70vw!important;
}
**********************************************/


The plugin is better because downscale the image if needed to fit the users screen resolution. A click on the picture scales it to full original size.

When Config - Image view - Insert a transparent overlay to minimize image theft is ON the theme is responsive just like the Curve responsive theme. Read more here http://forum.coppermine-gallery.net/index.php/topic,77662.msg375364.html#msg375364

[gideonklein]

Hi,

main table (<table class="maintable " align="center" cellpadding="0" cellspacing="1" width="400">) is not responsive, can you help?
Best
Max

[allvip]

Hi,

main table (<table class="maintable " align="center" cellpadding="0" cellspacing="1" width="400">) is not responsive, can you help?
Best
Max

It is 100% for me.
Maybe you have in Config - Album list view - Width of the main table 400 instead of 100%.

[berni]

Hi @allvip,
I use your theme also, it works well for me and is perfect for including in a home page.
Thanks Bernd