Over the last few weeks, I've been working on beefing up the wiki over at gllabs.org with some info regarding Geeklog theme creation. A large portion of that, a tutorial on how to port a theme, 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.

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

See it in action at lab.familycorner.us.

---

Synergy - Stability - Style --- Visit us at glfusion.org

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!

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:

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!

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

...or you can modify the link's class, which should already be defined in your style sheet, i.e., .nonul, or something like that.

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

---

Synergy - Stability - Style --- Visit us at glfusion.org

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:

---

Geeklog components by PortalParts -- www.portalparts.com

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 is working on. So far, he has re-tooled the original theme switcher block, 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

---

Synergy - Stability - Style --- Visit us at glfusion.org

To follow up, Mark (Media Gallery plugin author over at gllabs.org) is putting the finishing touches on the vThemes plugin 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 and on lab.familycorner.us. 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

---

Synergy - Stability - Style --- Visit us at glfusion.org

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?

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:





Thx!

-Eric

---

Synergy - Stability - Style --- Visit us at glfusion.org

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.

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:



Much of this is personal taste, but its handy to know a couple options!

-Eric

---

Synergy - Stability - Style --- Visit us at glfusion.org