Posted on: 08/08/07 11:11pm
By: geiss
Over the last few weeks, I've been working on beefing up the wiki over at
gllabs.org[*1] with some info regarding
Geeklog theme creation[*2] . A large portion of that, a tutorial on
how to port a theme[*3] , involved taking an open-source XHTML/CSS template and converting it step-by-step into a GL theme. The tutorial is at a point now where I feel the first draft is written, and would like some feedback. Please check it out and post your comments in this
forum thread[*4] .
The result of that tutorial is a fixed width, 2 column layout theme with left blocks and a main story column called Refresh. All credit for the theme design goes to the original author at
www.styleshout.com[*5] . It is meant for 1024x768 and higher screen resolutions. I have tested it in Firefox2, and Safari public beta 3. In other browsers, your mileage may vary.
Grab it at
gllabs.org[*6] .
See it in action at
lab.familycorner.us[*7] .
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/09/07 12:49am
By: Anonymous (Theophile)
Probably the #1 weakness of GL had been the paucity of modern themes. Thank you very much for the work you've been doing to address it! Please keep it up!
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/09/07 04:37am
By: 1000ideen
Thanks I`ll also have a look at that!
@Theophile: The #1 strenght of Geeklog is a very easy to change standard layout. I compared many systems and hardly any of them separates code from layout, content and system language. Furthermore they need complicated CSS, PHP and even "theme engines".
But you are right that Geeklog needs a good design show case to make people understand that one can really change everything :wink:
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/09/07 10:39am
By: Anonymous (Theophile)
Yes, I hope I wasn't misunderstood. I agree completely. The ease in making significant modifications to the layout without really having to know what you're doing was a major factor that attracted my to GL in the first place. That said, as others have lamented over the past few years, software like Wordpress has generally had much nicer looking themes... until now!
The abstraction of the layout from the rest of the code is what will (hopefully) allow even me to start porting themes via this guide. Thanks again!
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/09/07 02:36pm
By: machinari
That's a significant effort you've made. Good on ya!
I haven't read all of it and only skimmed the rest, but I did notice one thing: In the "cleaning up" section under #1 you state: "we have no way of styling it differently in the theme unless we dive into Geeklog's core code." You're referring to links in the story title. Descendant or child selectors should do this job quite easily. You can start by finding the nearest parent class or id and add your child or descendant selectors to that. It shouldn't bother your header's site name then. E.g.:
Text Formatted Code
.story-featured h1 a:link {color: Green;}
...or you can modify the link's class, which should already be defined in your style sheet, i.e., .nonul, or something like that.
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/09/07 08:17pm
By: geiss
machinari - thanks for the tip! I hadn't figured out child selectors yet.
I will update the wiki with the new code. :shakehands:
theophile/1000ideen - I've ported a few WordPress themes and believe me, the files are terrible to sort through trying to separate PHP from the layout code. I don't know how WP became so popular, but I bet the easy install and availability of so many themes helped. But one would think, obviously the themes came after WP, so what spiked its popularity in the beginning? THAT, is the question! Documentation? A few good themes that were showcased to show the potential of the CMS?
I don't want to speak prematurely, but Mark (Media Gallery plugin author) has been working on some tools to address this very issue (visual theme switcher, showcaser). My feeling has always been that GL was developed by programmers, not artists. It sort of felt like an old muscle car with a trashed body, but a super charged decked out engine under the hood. Overall that's not a bad thing, as I think the system is extremely robust, flexible, and most importantly secure as a CMS can be. I think at times the developers have made the decision to sacrifice ease of use (ie. installation) to bolster security (ie. the whole inside the web root/outside the web root install), which I am totally in agreement with. I have used GL for about 5 years, and when I have kept my system current, I've had little to no problems.
That said, I think now it is time for those with artistic talent (however little it may be, as in my case :wink: ) to take the ball and run with it for a while. I've released a few themes to date, and plan on many more, as I find it a hobby I enjoy. Hopefully the theme wiki we're putting together will be helpful to others as well.
To all, thanks for the kind words, support, and encouragement! Now try your hand at a theme port or two, or maybe even design one of your own. Let's start making GL look as good on the outside as it does under the hood!
-Eric
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/09/07 10:40pm
By: Blaine
Eric you are to be congratulated on your effort - and your muscle car analogy is fairly accurate. Several years ago there were a couple of very active graphics oriented team members and they moved on mostly because of life getting busy for them. Over the past few years there have been a few theme contributors but what is needed is steady progress, fresh ideas and someone to support the themes.
There are also some excellent resources available now like the OSWD site which you have tapped into. Creating something unique is harder but not necessary as there are some excellent themes and we need more business oriented themes.
The themes you have created so far are great and whats needed now is more users testing them and providing you any needed feedback. Documenting the Wiki now as you are learning is a great idea as you are more likely to capture the information needed by someone starting out.
Nice job - and thanks for your efforts :chestslam:
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/10/07 10:23am
By: geiss
Thanks for the encouraging words Blaine!
My goal is to continue theme development and experiment with different layouts. I have a few layouts that would work for a business-like template. One in particular I want to play with, has a featured story as normal, and then all the other story links on the front page are just headline/date links to the archive story page. I think this will go a long way in changing the look and feel of Geeklog.
I am also excited about other developments Mark over at
gllabs.org[*8] is working on. So far, he has
re-tooled the original theme switcher block[*9] , and cleaned up some bugs. We've tossed around some ideas on a visual-based theme switcher, that I hope are realized.
Separately, I think the main Geeklog.net site could do with a photo gallery "showcase" of all the different themes available to date. It would not have to be a theme switcher in itself, just a gallery of screenshots. The Media Gallery plugin would do nicely for this purpose. The hope is that it will show prospective users the wide variety of Geeklog themes available, and it might also further stimulate theme development. I would be willing to do the initial work of creating screenshots and setting them up in the gallery, if one could be installed on Geeklog.net.
Your thoughts Blaine?
Thx!
-Eric
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/14/07 05:34pm
By: geiss
To follow up, Mark (Media Gallery plugin author over at gllabs.org) is putting the finishing touches on the
vThemes plugin[*10] which acts as a visual theme switcher, theme gallery, and downloader. Or any single option of the three, or combo, depending upon your config settings.
It is a wonderful bit of code that you can see in action at
lab.gllabs.org[*11] and on
lab.familycorner.us[*7] . Hopefully, we can get the blessing of the GL core team to host it on the GL demo site, or even on geeklog.net itself to bolster GL theme awareness and development.
Thx!
-Eric
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/15/07 12:34am
By: Anonymous (Theophile)
A quick note on these fixed-width themes and "Refresh" specifically. I am noticing some admin tools are hanging over the edge of the main block. For example, using the refresh theme, go to the user manager. The user table is too wide.
Is there an easy fix for this?
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/15/07 01:02am
By: geiss
You bet! I hadn't actually noticed that yet. Thanks for pointing it out!
In the theme's
style.css file remove
font-size:larger; from the
th and
.admin-list-headerfield selectors so they look like the following:
Text Formatted Code
th {
color:#000000;
background-color:#DAE0ED;
font-weight:bold;
font-size:larger;
padding-left:3px;
text-align:left;
}
Text Formatted Code
.admin-list-headerfield {
text-align:left;
padding-left:5px;
padding-right:5px;
}
Thx!
-Eric
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/15/07 01:03am
By: machinari
Quote by: Theophile I am noticing some admin tools are hanging over the edge of the main block. ... Is there an easy fix for this?
Text Formatted Code
.classname {overflow: auto;}
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/15/07 01:08am
By: machinari
geiss, you could also take out the nowrap and/or nowrap="nowrap" that is common to many column headings and table cells. that'll save you a bit of room.
Re: How to port a theme tutorial and Refresh theme
Posted on: 08/15/07 11:55pm
By: geiss
machinari,
Those are both good tricks! It took some digging, but I finally found the admin list template .thtml files in
(theme)/admin/lists/header.thtml.
The
overflow:auto; trick I would only use as a last resort, as it creates horizontal scroll bars right in the middle of the page.
Something else I would try before resorting to the above, would be to add
font-size:smaller; to
.admin-list-field in
style.css:
Text Formatted Code
.admin-list-field {
text-align:center;
padding-left:5px;
padding-right:5px;
font-size:smaller;
}
Much of this is personal taste, but its handy to know a couple options!
-Eric