Is the Simple theme (white with a little black) theme http://forum.coppermine-gallery.net/index.php/topic,78162.0.html (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/ (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
/****** 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.
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:
img {
max-width: 100%!important;
height: auto;
}
It works only with divs and not with tables.For tables I used viewports:
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:
.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:
/*************************
.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 (http://forum.coppermine-gallery.net/index.php/topic,77662.msg375364.html#msg375364)
Hi,
main table (<table class="maintable " align="center" cellpadding="0" cellspacing="1" width="400">) is not responsive, can you help?
Best
Max
Quote from: gideonklein on August 04, 2016, 12:26:30 PM
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%.
Hi @allvip,
I use your theme also, it works well for me and is perfect for including in a home page.
Thanks Bernd