Softened Cells and Sunset Theme taking shape

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

Softened Cells and Sunset Theme taking shape

Post by carl_galloway » Thu Dec 22, 2005 7:22 pm

Hi all,

I had a request from lendaludo to convert a mockup from OSWD over to s9y. The first draft of this can be seen at my themes site

I haven't started on sunset yet, but as you can see softened cells is taking shape, although still broken in a few places. Once everything is finished off in softened cells I think it will only take a couple of minutes to create sunset, so for anyone who wants either of these themes, please comment on this thread.

A couple of the things still needing fixing are the blockquotes, lists, comments and comment form, freetag etc.

Hope you like it,
Carl[/url]

User avatar
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert » Fri Dec 23, 2005 7:28 pm

<whistle> :!:

Carl, you are a CSS converting demon. Don't you have a normal job?

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

nah, just a regular guy

Post by carl_galloway » Fri Dec 23, 2005 7:54 pm

Judebert,

Thank you for the ego boost. I just enjoy working on these themes, but in the real world I'm a passion coach (counsellor/life coach, career guidance and anything else my clients want).

The tricky part is working with smarty/php which I don't understand, and on this particular theme the original designer has thrown in a few quirks which I'm trying to fix. One of them is the blockquote, which in the mockup is hard coded html with 3 divs (top, middle, and bottom), and in the s9y world this obviously isn't acceptable because our blockquote is a regular html element. I think I've found a small piece of DHTML which rounds corners in all major browsers, and I might be able to apply this to the blockquote, after all lendaluda probably likes this theme because of all the little niceties that make it so different. I figure a little javascript is an acceptable compromise.

Carl

[/i]

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

updated

Post by carl_galloway » Sat Dec 24, 2005 6:23 pm

I've added a javascript 'nifty corners' which rounds off the corners of the blockquote, and looks really cool. Might look at converting the rest of the corners to the same script because they use images at present. Having both images and javascript seems to be overkill. I also restructured the way comments are displayed which I thinks makes the theme look so much nicer.

Anyway, I've updated the page on my test server so please check it out, remember to use the theme switcher to see softenedcells, and if you're using firefox, remember to shift-refresh once the page loads.

User avatar
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert » Mon Dec 26, 2005 10:57 pm

Looking good, Carl.

I've been working on a theme including rounded corners, but the IE box model is driving me nuts. Everything looked good in FF, but it's a huge mess in IE.

Could you pass along a link to the "nifty corners" script?

Thanks,
Judebert

carl_galloway
Regular
Posts: 1331
Joined: Sun Dec 04, 2005 5:43 pm
Location: Andalucia, Spain
Contact:

nifty corners

Post by carl_galloway » Tue Dec 27, 2005 5:42 pm

Judebert,

There are a couple of nifty corners downloads around the net. The original one produces a very small corner, but a couple of updates by other programmers have produced an anti-aliased script.
Download the anti-aliased zipfile, then check out a mod to this, which is the one I'm using., because it allows the size of corner to be adjusted.

Using the script in my index.tpl took forever to figure out, with a lot of hunting these forums for solutions. Rather than have you frustrated, here is the code in my index.tpl to make it work.

Code: Select all

<script type="text/javascript" src="{serendipity_getFile file="nifty2.js"}"></script>
<script type="text/javascript">
window.onload=function(){ldelim}
if(!NiftyCheck())
    return;
   Rounded("#content blockquote" , "#f0f0f0" , "#fefade", 20 ,20, 0, 1, 0, 1);
{rdelim}
</script>


You'll notice I had to use serendipity_getFile to use the javascript file, is there a better way?

Also, s9y didn't like the curly brackets, so I had to use {ldelim} instead of just '{' and {rdelim} instead of just '}'.

Cheers
Carl

User avatar
judebert
Regular
Posts: 2478
Joined: Sat Oct 15, 2005 6:57 am
Location: Orlando, FL
Contact:

Post by judebert » Wed Dec 28, 2005 3:23 pm

Thanks!

The {ldelim} and {rdelim} stuff is a Smarty feature.

I'll have to see if I can get it to do image-on-image rounded corners, but I think solid-on-image should do my job. Very neat.

Post Reply