Curve responsive theme is the curve theme 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=curve_responsive.I only added this styles to styles.css (code from v1.3) :
/******START Styles responsive theme*******************/
#cpg_logo_block_logo img {
max-width: 100%;
width: 100%!important;
height: auto!important;
}
.cpg_starttable_outer,
.cpg_starttable_outer div.cpg_starttable_inner {
background-color: #C7D0DB!important;
background-image: none!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;
}
}
@media all and (min-width : 0px) and (max-width : 500px) {
.catrow_noalb table,.catrow table {
font-size: 80%!important;
}
.alblink a {
font-size: 80%!important;
}
.statlink h2 {
font-size: 3.5vw!important;
}
body {
padding: 0px!important;
}
#cpg_main_block_outer,
.cpg_main_block_inner {
padding: 0px!important;
}
#cpg_logo_block_outer,
#cpg_logo_block_outer div.cpg_logo_block_inner,
#cpg_header_block_outer,
#cpg_header_block_outer div.cpg_header_block_inner {
background-color: #E3E9EF!important;
background-image: none!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**************************************/
I also added:
_function <<<$template_add_your_comment>>> to theme.php to add id="captchaImg".The image for captcha (confirmation for comments) and the smilies must have diffrent widths.
_function <<<$template_thumbnail_view>>> to theme.php to add id="tabsMenu".The tabs navmenu and displayimage.php must have diffrent styles.
CHANGES FOR v1.1For v1.0 I forgot to declare the viewport in curve_responsive/template.html right before <title>{TITLE}</title>:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
I also forgot some text to make it responsive.
You can look it style.css and read from START Styles responsive theme to END Styles responsive theme to see the diffrence between v1.0 and v1.1.
I made no changes to theme.php
CHANGES FOR v1.21)You can look in style.css and read from START Styles responsive theme to END Styles responsive theme to see the diffrence between v1.1 and v1.2.
2) I added function $template_thumb_view_title_row and function $template_album_list at the end of theme.php
I removed v1.3. Had some mistakes. I reuploded it on 25/05/2015.
CHANGES FOR v1.31) You can look in style.css and read from START Styles responsive theme to END Styles responsive theme to see the diffrence between v1.2 and v1.3.
2) I added function $template_album_list_cat in theme.php (When Config - Album list view - Show first level album thumbnails in categories ON now is responsive too. I forgot about it in the other version)
3) I edited function $template_album_list in theme.php a little:
changed <img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
to <img src="images/spacer.gif" width="1" height="1" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br />
4) Now when Config - Image view - Insert a transparent overlay to minimize image theft is ON the image is responsive (details Reply #2)
CHANGES FOR v1.4I made it to work with The settings for Album list view - Number of columns for the album list MUST BE MAX 3 instead of MAX 2 like in version 1.3.
I replaced:
@media all and (min-width : 0px) and (max-width : 320px) {
.albumsThumbnails p {
font-size: 3.2vw!important;
}
}
WITH:
@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;
}
}
WEB BROWSERS I TEST IT ON Firefox, Opera, Internet Explorer, Safari, Chrome. Works fine but not on Safari lower then version 6 or 7. Viewports is something new so proabibly does not work on many old version browsers, but users proabibly update their browser every time.
IMPORTANTCan please someone test the new 1.3 on Apple PC and iphones or phones with Apple OS. I belive only Safari on all PCs is a problem not the Apple OS. I also belive it works on Safari 6 and higher, but is not available for Windows (There is no Safari 6 for Windows. Apple discontinued the Windows version of Safari after 5.1.7.) I don't have an Apple (MAC) PC or Apple iphone, phone or table to test it.