Building a CPG 1.6.x responsive theme

[Timos-Welt]

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

[allvip]

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

[allvip]

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.

[allvip]

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 Expand


.display_media img {
    max-width: 100%;
    width: auto;
    height: auto;
}


instead of the inline styles

Code Select Expand


padding: 0px;
max-width: 800px;
height: auto;
width: 100vw;


[Sweetener]

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]

other than the change in the doctype...

That's all that is to it.
https://www.w3schools.com/html/html5_intro.asp

[allvip]

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.

[Sweetener]

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 Expand

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]

I think you should add this css to the html5 version since many cpg tags use this attributes

Code Select Expand

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]

No because many things many not be wanted to be align center by the user.