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 [2]   Go Down

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

0 Members and 1 Guest are viewing this topic.

Timos-Welt

  • Dev Team member
  • Coppermine addict
  • ****
  • Offline Offline
  • Gender: Male
  • Posts: 808
    • Timos-Welt
Re: Building a CPG 1.6.x responsive theme
« Reply #20 on: November 24, 2019, 04:06:43 pm »

Hi allvip,

please share :)

It's hard to make a real responsive HTML5 only theme with the current core code. There's always something that is not covered by theme.php...

Currently making my theme responsive (WIP):
http://pics.timos-welt.de/?theme=twtest

regards
Timo
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Building a CPG 1.6.x responsive theme
« Reply #21 on: December 10, 2019, 06:17:07 pm »

Hi allvip,

please share :)

It's hard to make a real responsive HTML5 only theme with the current core code. There's always something that is not covered by theme.php...

Currently making my theme responsive (WIP):
http://pics.timos-welt.de/?theme=twtest

regards
Timo

Hi :)
I attached 2 zip files.
DEMO
https://themes-scripts.com/cpg1607
https://themes-scripts.com/cpg1607/displayimage.php?album=1&pid=11
« Last Edit: December 11, 2019, 01:32:44 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Building a CPG 1.6.x responsive theme
« Reply #22 on: December 10, 2019, 06:38:35 pm »

Some details:

I used very little css.
1) The curve theme style.css cleaned of unnecessary styles and grouped: general styles, admin pages styles, categories etc
I wanted to be very basic to be able to start designing the custom layout.
2) html5 in template.html or the classic way, it will still work.
3) theme.php

Not necessary
Function pageheader is not necessary but I don't like that every page gets the same classes and gets impossible to change things like the admin pages to stay simple and style only the users layout etc
Same for function starttable (class tableh1 changed to table-heading because tableh1 is used for too many things).
Filmstrip function. I belive I forgot to delete it. Not necessary.

The albums, categories and thumbnails function, I replaced the tables with the divs because eliminates the need for a mobile theme (thumbnails per row will be dictated by style.css depending on users resolution) and is very easy to create very custom layouts (where to be the thumbnail or the title or the desc etc)
Forcing table cell with css to display like a table row is not so flexible.
« Last Edit: December 10, 2019, 07:22:58 pm by allvip »
Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Building a CPG 1.6.x responsive theme
« Reply #23 on: December 10, 2019, 06:51:21 pm »

Currently making my theme responsive (WIP):
http://pics.timos-welt.de/?theme=twtest
I just looked.
Great work  :)
Very responsive and no bootstrap, very little css.
I hope you don't mind but for the displayimage page you can use in style.css:

Code: [Select]
.display_media img {
    max-width: 100%;
    width: auto;
    height: auto;
}

instead of the inline styles

Code: [Select]
padding: 0px;
max-width: 800px;
height: auto;
width: 100vw;
Logged

Sweetener

  • Contributor
  • Coppermine regular visitor
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 64
Re: Building a CPG 1.6.x responsive theme
« Reply #24 on: January 27, 2020, 03:47:00 pm »

Hi :)
I attached 2 zip files.
DEMO
https://themes-scripts.com/cpg1607
https://themes-scripts.com/cpg1607/displayimage.php?album=1&pid=11

Hi! I looked through your code and I don't understand what makes them html5 other than the change in the doctype... can u explain, please?

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Building a CPG 1.6.x responsive theme
« Reply #25 on: January 29, 2020, 06:18:06 am »

Logged

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Building a CPG 1.6.x responsive theme
« Reply #26 on: January 29, 2020, 06:52:04 am »

HTML5 will allow you to use in your theme tags like <article> and other listed on the link in my prev post but will no be compatible with old PCs.
Logged

Sweetener

  • Contributor
  • Coppermine regular visitor
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 64
Re: Building a CPG 1.6.x responsive theme
« Reply #27 on: February 04, 2020, 11:22:36 pm »

Hi :)
I attached 2 zip files.
DEMO
https://themes-scripts.com/cpg1607
https://themes-scripts.com/cpg1607/displayimage.php?album=1&pid=11

I think you should add this css to the html5 version since many cpg tags use this attributes
Code: [Select]
table[align=center] {
margin-left: auto;
margin-right: auto;
text-align: initial;
}
[align=center] {
text-align: center;
}
[align=left] {
text-align: left;
}
[align=right] {
text-align: right;
}

Sweetener

  • Contributor
  • Coppermine regular visitor
  • ***
  • Country: 00
  • Offline Offline
  • Posts: 64
Re: Building a CPG 1.6.x responsive theme
« Reply #28 on: February 04, 2020, 11:26:17 pm »

I think you should add this css to the html5 version since many cpg tags use this attributes
Code: [Select]
table[align=center] {
margin-left: auto;
margin-right: auto;
text-align: initial;
}
[align=center] {
text-align: center;
}
[align=left] {
text-align: left;
}
[align=right] {
text-align: right;
}
I forgot to explain that this is because of your * {}

allvip

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
Re: Building a CPG 1.6.x responsive theme
« Reply #29 on: February 05, 2020, 08:44:21 am »

No because many things many not be wanted to be align center by the user.
Logged
Pages: 1 [2]   Go Up
 

Page created in 0.025 seconds with 20 queries.