Advanced search  

News:

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

Pages: [1]   Go Down

Author Topic: Building a CPG 1.6.x responsive theme  (Read 593 times)

0 Members and 1 Guest are viewing this topic.

ron4mac

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Posts: 1081
Building a CPG 1.6.x responsive theme
« 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
« Last Edit: January 08, 2019, 09:56:08 pm by ron4mac »
Logged

Phill Luckhurst

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Online Online
  • Gender: Male
  • Posts: 4623
    • Windsurf.me
Re: Building a CPG 1.6.x responsive theme
« Reply #1 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.
Logged
It is a mistake to think you can solve any major problems just with potatoes.

netb

  • Coppermine regular visitor
  • **
  • Offline Offline
  • Posts: 82
Re: Building a CPG 1.6.x responsive theme
« Reply #2 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.
Logged

eule

  • Coppermine newbie
  • Offline Offline
  • Posts: 9
Re: Building a CPG 1.6.x responsive theme
« Reply #3 on: February 13, 2019, 08:40:09 am »

Thanks for the theme looks great i will try it on one of my pages.
I hope its ok if i remove the bricksotnes:-)

Greetings
Logged
Pages: [1]   Go Up
 

Page created in 0.015 seconds with 20 queries.