New template: YAML port (beta)

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

New template: YAML port (beta)

Post by yellowled »

Hi folks,

I have just now "finished" a beta version of a YAML port for our little blog engine here.

A little information in advance for those of you who are not familiar with YAML: It is a great (X)HTML/CSS based framework optimized for maximum browser compatibility. It is not exactly a template but rather a set of various templates which can be customize to fit one's own needs. It's developer, Dirk Jesse, has put great effort into creating a very flexible, highly compatible framework which features basically every browser hack known to man :) Therefore, it also features a wide range of cascading stylesheets, all of which are at the moment still included in my port. I plan to reduce them and the images included to those actually needed for the template, however. I should probably check with Dirk if that's okay or if he wants all YAML files included, which would make the final zipfile a little bit of a heavyweight.

Unfortunately for those of you who don't speak German, the complete documentation for YAML is in German - at least as far as I can see. So if you're interested in how it exactly works its magic, you'll probably have to figure it out by studying the code, I'm afraid.

So there is a post in the German part of this forum asking for a YAML port for s9y. Markus Hagge, a German blogger, has kindly presented the YAML-based template he uses for his own blog, which of course is already customized to his own needs. So I decided to do a port which is rather 'generic'.

I chose three of the many layout choices YAML offers in order to cover the standard 3-column and 2-column (left sidebar or right sidebar) layouts. Right now, the template looks exactly like the YAML website, but I do not intend to change that - YAML is a framework, which in my humble opinion means that it gives you the very basics of the layout, but every user should customize the looks to fit their own wishes. I did, however, already adapt it to s9y, meaning I includes a seperate stylesheet 's9y.css' which covers s9y-specific styles. I also included some .tpl files (taken from the forthcoming 3.1 default template I did with Carl) to give the template CSS-only comment and contact forms. I also tweaked the layouts a little bit in terms of column widths since I think the standard widths in YAML don't fit too well for blog style.

The template is not yet ready for s9y 1.1, but I plan to add that later. Since I don't plan to include colorsets, this will probably mean that the 1.1 features will be a navbar which can be customized from the admin frontend and maybe optional coComment support. (Other ideas welcome, of course :))

Oh, and of course you want to have a look at it in action, right? :) I have switched my blog to this template. If someone wants to test it in their own blog or development blog, there is a zipfile, but remember: it's still beta :wink:

However, it would be great if someone could check this out in different environments - I have checked all layouts with Firefox/Linux and Opera, no problems there. I have yet to check the differents IEs under Win, and it would be great if someone could check all this on a Mac. All this should work, but I'm not exactly sure whether my adaption to s9y messed something up ...

Here's one issue I've already found but not yet managed to fix: If there is an entry which only holds an (media manager) image, the footer is floated around this image. This could be fixed by adding 'clear: both;' to .serendipity_entryFooter, but this sometimes 'stretches' the entries. I'll try and set up a demo article for this.

So, enough rambling. Let's hear what you guys out there think :)

YL
mattsches
Regular
Posts: 440
Joined: Sat Nov 05, 2005 9:35 pm
Location: Wiesbaden, Germany
Contact:

Post by mattsches »

Whoa, this looks great!! Superb work, I will install it as soon as I can and give you feedback. :D
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Found another issue, but did not find the time to work it out: So far, links to external pages (http:) which include an image (see HTML Nugget 'Links' with the 80x15 buttons in my blog) have the external link arrow, which is definitely unwanted.

I'll get to that in the next couple of days. If someone already has a solution for this, though ... :)
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

YellowLed wrote:So far, links to external pages (http:) which include an image (see HTML Nugget 'Links' with the 80x15 buttons in my blog) have the external link arrow, which is definitely unwanted.
Fixed that - until/unless I or someone else come(s) up with a better solution - by an extra class "noextarrow" which can be applied to links including images. Updated the zipfile with this and another minor thing: a grey border-top for the entry footer.

YL
d_cee
Regular
Posts: 603
Joined: Wed Jan 18, 2006 6:32 pm
Location: UK
Contact:

Post by d_cee »

Hi Yellowled

I've taken a good look at this is Safari and FF (mac) and it all seems to be fine - I noticed you've removed the ext links graphic on the buttons that I saw yesterday.

However, my German isn't good enough to follow the commenting, so although I can see from the YAML website how flexible a template this is, I haven't figured out how to change it - Dirk Jesse for example has a 2 sidebar layout on his opening page that changes to a 2 entry column layout after clicking on a navbar link.

It looks really impresive though!

cheers

Dave
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

d_cee wrote:I've taken a good look at this is Safari and FF (mac) and it all seems to be fine - I noticed you've removed the ext links graphic on the buttons that I saw yesterday.
Thanks for checking that out, Dave.

Yeah, I changed them with a rather dirty 'hack', as I mentioned in my previous post. It is a bit dull, because users now have to use an extra class for those links, but I cannot for the life of me think of a better solution :? However, I suppose this will never be an 'easy-to-use'-template for beginners anyway - the (CSS) code is simply too complicated for people without any CSS knowledge.
d_cee wrote:However, my German isn't good enough to follow the commenting
I'm actually quite stunned how many of you guys out there know a little German or have a spouse who does :)
d_cee wrote:so although I can see from the YAML website how flexible a template this is, I haven't figured out how to change it - Dirk Jesse for example has a 2 sidebar layout on his opening page that changes to a 2 entry column layout after clicking on a navbar link.
Well, it is a framework after all. This means - as far as I understand it, I have to admit I don't know the YAML source by heart :wink: - that the basic (X)HTML structure is the same in any layout possible. All layout changes are done via CSS, which is amazing. I think it comes with 12 different layout examples.

As you can see in the index.tpl, I have 3 different CSS files - left.css, right.css, and both.css - for the 3 different layout the template offers. Each of these @imports other (YAML) css files from the css subdirs, plus a stylesheet s9y.css which I added for s9y-specific changes (formatting special ids and classes s9y has but YAML doesn't know). Finally, I added some styles to the individual stylesheets to 'tweak' the layouts a little bit. Basically, it's a maze :wink:

So basically, changing the layout is achieved by @importing different stylesheets from the css subdir. Unfortunately, the comments in those files are in German too ...

If I ever encounter spare time and boredom at the same time, maybe I'll translate those comments, but that's not likely to happen in the near future :wink:
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

YellowLed wrote:Updated the zipfile with this and another minor thing: a grey border-top for the entry footer.
I just now uploaded a new zipfile which includes some fixes (thanks to Andre Heinrichs, who has helped very much by bravely using the beta template in his blog :)), some minor changes and some documentation.

I have included a new css file called custom.css which can and should be used for customizing this template. Over the weekend I'll possibly manage to get this baby ready for v1.1.

YL
azel
Regular
Posts: 265
Joined: Thu Apr 21, 2005 4:28 am
Contact:

Post by azel »

I like this theme, thanks for porting it YellowLed. :)
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

YellowLed wrote:Over the weekend I'll possibly manage to get this baby ready for v1.1.
Already done & zipfile updated. Still a beta, though, since I have some minor things I want to try before 'release'.
Rexxer
Regular
Posts: 62
Joined: Sat Oct 22, 2005 11:10 am

Post by Rexxer »

YellowLed wrote:
YellowLed wrote:Over the weekend I'll possibly manage to get this baby ready for v1.1.
Already done & zipfile updated. Still a beta, though, since I have some minor things I want to try before 'release'.
Nice stuff. But I'm having a bit of trouble finding enough Links to put into the nav-tabs. :D
I'll just add my own entries.tpl so I can get the comment feed for each entry displayed. Maybe you could make that configurable, too?

Just thinking,
Andre
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled »

Rexxer wrote:I'll just add my own entries.tpl so I can get the comment feed for each entry displayed. Maybe you could make that configurable, too?
I don't think so, sorry.

A. This is in my opinion a rather 'personal' customization. At least I haven't seen too many blog do something like this :-)

B. Actually, I don't want to include any more .tpl files. As you probably know, .tpl files not supplied by a template are 'fetched' from the default template. The YAML port is intended to be pretty much 'default with YAML layout', therefore I don't want to modify stuff which isn't 'necessary'.
moenk
Regular
Posts: 52
Joined: Sat Apr 29, 2006 11:21 pm
Contact:

Re: New template: YAML port (beta)

Post by moenk »

If somebody is interested: As the old templates does not work with IE10 any more, I prepared a template based on YAML for myself. Not all features of YAML are used by now, but it already fits to my other YAML-based pages. You can have a look on http://www.moenk.de and if desired I can put it on GitHub.
CMS mit S9Y: MCSE - LPIC - SQL - GIS
Post Reply