forum.coppermine-gallery.net

Support => cpg1.6.x Support => cpg1.6 themes (visuals) => Topic started by: ron4mac on January 05, 2019, 04:28:27 pm

Title: Building a CPG 1.6.x responsive theme
Post by: ron4mac on January 05, 2019, 04:28:27 pm
Here is the start of my attempt at creating a responsive theme for CPG (1.6.x only). It still needs a lot of work but I thought I would put it here in hopes of getting feedback to help it along its way.

It currently uses the jQuery 1.11.2 and bootstrap 3.3.7 frameworks. I'm not happy using bootstrap and hope to soon write it out of use.

The theme will have built-in swipe and keyboard navigation.

It uses 2 .css files: theme.css (which should not be changed) and style.css. If a file named custom.css is placed in the theme folder, it will use that file instead of style.css. I totally suck at styling web pages so I'll hopefully be able to provide the means for you to make it look good. Don't put much effort into that yet, though, as it's currently being built on sand.

It is not dependent on its folder name, so you can name it as you please.

Update: v0.6 Added swipe and keyboard navigation; adjustments for some admin screens
Title: Re: Building a CPG 1.6.x responsive theme
Post by: Phill Luckhurst on January 05, 2019, 10:53:31 pm
Well done on things so far. It is rare for coders to be talented designers and vice versa, I think that is why many open source projects struggle in this area.

As for bootstrap, I agree. Teams are moving away from it for so many reasons.

I look forward to seeing people’s thoughs on your theme. It certainly seems the way forward to me.
Title: Re: Building a CPG 1.6.x responsive theme
Post by: netb on January 11, 2019, 01:32:35 pm
Looking forward to how this develops.

Quite a while ago I did replace some tables with div's in my theme.php and have been thinking of cleaning it up to post here as a sample but haven't got the time. Seems you did it in a better way, since what I did was kind of dirty, e.g.:

Code: [Select]
<!-- BEGIN album_cell -->
        <td width="{COL_WIDTH}%">
        <div>
<div class="tableh2">
<span class="alblink"><a href="{ALB_LINK_TGT}">{ALBUM_TITLE}</a></span>
</div>
<div class="thumbnails">
<img src="images/spacer.gif" width="{THUMB_CELL_WIDTH}" height="1" style="margin-top: 0px; margin-bottom: 0px; border: none;" alt="" /><br /><a href="{ALB_LINK_TGT}" class="albums">{ALB_LINK_PIC}<br /></a>
</div>
<div class="tableb tableb_alternate">
{ADMIN_MENU}
<!-- Hide Album Description below Gallery Thumbnail <p>{ALB_DESC}</p> -->
<p class="album_stat">{ALB_INFOS}<br />{ALB_HITS}</p>
</div>
</div>
        </td>
<!-- END album_cell -->
But hey, it worked for me and just used some css
Code: [Select]
@media only screen and (max-width:... to make some elemets responsive.


I don't like that there are jQuery and Bootstrap involved but it is my personal opinion of course because I like things to be more lightweight of sorts.

Great Job, nevertheless! Keep going.