Support > cpg1.6 themes (visuals)

Building a CPG 1.6.x responsive theme

(1/6) > >>

ron4mac:
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. The purpose for developing this is geared more toward determining how the CPG core will need to be changed to provide native support for responsive themes rather than just trying to create a super stylish theme. So the more people willing to test this theme and provide feedback, the sooner CPG will provide native support for responsive themes.

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
Update: v0.8 Removed need for bootstrap; renamed folder to just respond

phill104:
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.

netb:
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: ---<!-- 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 -->
--- End code ---
But hey, it worked for me and just used some css
--- Code: ---@media only screen and (max-width:...
--- End code ---
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.

eule:
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

tomskafo:
Ron4mac, I put your theme. I like it - this is the best thing I've ever seen.
How it looks, see the link in my signature.
And also I will have comments and requests to correct what seems to me not to be as it should be.
Do you mind? I will use your theme and actively test.

1. At the top right, we see two words - Albums and Files - the words crawled over each other, blocked each other. That would be a fix.

Navigation

[0] Message Index

[#] Next page