Advanced search  

News:

cpg1.5.46 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter recently discovered vulnerabilities. It is important that all users who run version cpg1.5.44 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: Simple theme (white with a little black) responsive coppermine theme  (Read 6750 times)

0 Members and 1 Guest are viewing this topic.

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290

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]
/****** 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.
« Last Edit: February 21, 2016, 12:42:29 pm by allvip »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Simple theme (white with a little black) responsive coppermine theme
« Reply #1 on: February 21, 2016, 12:17:13 pm »

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]
img {
    max-width: 100%!important;
    height: auto;
}

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

Code: [Select]
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]
.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]
/*************************
.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
« Last Edit: February 21, 2016, 12:29:13 pm by allvip »
Logged

gideonklein

  • Coppermine newbie
  • Offline Offline
  • Posts: 2
Re: Simple theme (white with a little black) responsive coppermine theme
« Reply #2 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

Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Simple theme (white with a little black) responsive coppermine theme
« Reply #3 on: August 08, 2016, 11:23:17 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%.
Logged

berni

  • Coppermine regular visitor
  • **
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 99
    • Max und seine Untertanen

Hi @allvip,
I use your theme also, it works well for me and is perfect for including in a home page.
Thanks Bernd
Logged
Pages: [1]   Go Up
 

Page created in 0.022 seconds with 23 queries.