I've been using Artisteer for a while now. It's a (commercial) theme 
generator for a variety of popular CMS. It's really a useful program it you 
need a nice-looking website and don't have the time to learn how theming is 
done in the CMS you're using. I've been using it for Joomla and Drupal but 
it does Wordpress too. It does not replace a true web designer, but it's 
faster than endlessly tweaking the CSS of existing themes.

G.


discussion : 4bc74839$1@news.povray.org...
> Oh, sweet! Now when you do "view source" in Firefox, anything that's a 
> link is actually hyperlinked. That's nice.
>
> OK, so looking at the CSS for this page, apparently it's a WordPress theme 
> called "black piano":
>
> http://wordpress.org/extend/themes/piano-black
>
> Now, if I can just figure out how it works...
>
> -- 
> http://blog.orphi.me.uk/
> http://www.zazzle.com/MathematicalOrchid*

Post a reply to this message

On 04/15/10 10:13, Orchid XP v8 wrote:
> ...and using Photoshop, I wouldn't even know how to create the stripy

	Fairly easy.

> background. Goodness only knows how you do the curved corners, the

	Javascript.

> delicious drop shadows, the glow effect at the top of the page, and so

	Shadows is either CSS or Javascript. No idea what you mean by glow.


-- 
Psychoceramics: The study of crackpots.

Post a reply to this message

Neeum Zawan wrote:
> On 04/15/10 10:13, Orchid XP v8 wrote:
>> background. Goodness only knows how you do the curved corners, the
> 
> Javascript.
> 
>> delicious drop shadows, the glow effect at the top of the page, and so
> 
> Shadows is either CSS or Javascript. No idea what you mean by glow.

Why would you need scripting for that?

Post a reply to this message

Gilles Tran wrote:
> I've been using Artisteer for a while now. It's a (commercial) theme 
> generator for a variety of popular CMS. It's really a useful program it 
> you need a nice-looking website and don't have the time to learn how 
> theming is done in the CMS you're using. I've been using it for Joomla 
> and Drupal but it does Wordpress too. It does not replace a true web 
> designer, but it's faster than endlessly tweaking the CSS of existing 
> themes.

Mmm, interesting. Of course, since I won't be using a CMS, I'm not sure 
it helps, but it's interesting to know that such things exist.

I think my basic problem is that I'm not a graphic designer. When I look 
at a blank screen, I can't imagine what I might put onto it that would 
look cool...

Post a reply to this message

>> ...and using Photoshop, I wouldn't even know how to create the stripy
> 
> 	Fairly easy.

Sure. If you somehow know how to use Photoshop.

>> Goodness only knows how you do the curved corners, the
> 
> 	Javascript.

...?

>> delicious drop shadows, the glow effect at the top of the page, and so
> 
> 	Shadows is either CSS or Javascript.

Actually it's part of the various bitmaps.

> No idea what you mean by glow.

If you look at the theme demo (not my cut up image), you'll see that the 
top of the page has a subtle blue glow to it.

Post a reply to this message

4bc8199b$1@news.povray.org...
> Mmm, interesting. Of course, since I won't be using a CMS, I'm not sure it 
> helps, but it's interesting to know that such things exist.

Your blog is running on Wordpress, which is a CMS.

G.

Post a reply to this message

Orchid XP v8 wrote:

> http://wordpress.org/extend/themes/piano-black
> 
> Now, if I can just figure out how it works...

The way it works is rather surprising.

There's a 5x5 pixel image that consists of grey with a black stripe 
across it. This is tiled to form the stripey background.

There is an image named "top". This is the black slab with the rounded 
corners and the drop shadow. The bit that the page title appears on top of.

Yes, that's right. Somehow they put text ON TOP OF an image. Not only 
that, but somehow they put one image ON TOP OF another image, WITH 
TRANSPARENCY. I have no idea how that's possible.

There's also an image that's blue in the center, and fades to 
transparent towards the edges. This is somehow displayed ON TOP OF the 
background image to generate the blue glow at the top of the page.

Then there's an image that's 2 pixels tall, just consisting of various 
shades of grey. This is what generates the two-tone grey for the body 
text and the sidebar. But it's TRANSPARENT, showing the stripe texture 
through from below. (And also the blue glow.) And it has a drop shadow 
at each end, which also blends through.

Finally, there's a "bottom" image, which implements the semicircular 
bottom of the page. (You can just about make out where the edge of the 
sidebar doesn't line up perfectly.)

In a similar way, there are a pair of "top" and "bottom" images 
containing a black bar with a curved end; this is what implements the 
black markers at the bottom of each post, where it tells you the number 
of comments, etc. (This also explains why the curve isn't quite right. 
You can also see a glitch in the dotted line where the two halves of the 
image meet.)



Last time I checked, there are two ways to put an image into a web page. 
You can use the IMG tag, which inserts an image in amoungst the text. 
(But you cannot put anything over the top of this image.) Alternatively, 
you can set the page background image, which is obviously behind 
*everything*. That means you can put things over the top of it.

That gives you two ways to build a page like this:

1. Draw the entire page, with all the borders and lines you want, and 
then use CSS to position the text into the spaces in the graphic. (This 
means the page must be a fixed size, since the background graphics have 
been drawn at a fixed size.)

2. Draw the entire page, and chop it into pieces. Use IMG tags to insert 
each piece of the frame around the outside of the text, keeping the text 
inside the frames. If you want the text itself to have a background, 
things get tricky. But by using a repeating pattern, you might be able 
to make the page semi-resizable.

This theme uses neither approach. Somehow it manages to combine multiple 
layers of semitransparent images *at the client end* to produce the 
final page. I have still to discover how that's possible. (Not to 
mention how the hell you line all the text up nicely...) The fact that 
the CSS code is litered with properties I've never even heard of is 
probably the first clue. Unfortunately, it's not very readable in there...

(I have to find out what tags and classes exist in the HTML and what 
they contain, then see where they end up on the rendered page, and then 
see what CSS is applied to them, and lookup what images are being 
referenced, and then see the JavaScript that's manipulating them, and...)

Post a reply to this message

>> Mmm, interesting. Of course, since I won't be using a CMS, I'm not sure it 
>> helps, but it's interesting to know that such things exist.
> 
> Your blog is running on Wordpress, which is a CMS.

My blog does not allow you to use any themes except the ones provided by 
the hosting company.

Post a reply to this message

Warp wrote:

>   There's this thing called learning and...

Out of curiosity, how does one "learn" Photoshop anyway?

Presumably it doesn't come with a manual - or if it does, it only covers 
what each button and menu item does (which isn't the same as knowing how 
to *use* these tools to achieve a particular goal).


don't have.

Post a reply to this message

> Last time I checked, there are two ways to put an image into a web page. 
> You can use the IMG tag, which inserts an image in amoungst the text.

You have to use CSS. There is a css-property called z-index, allowing you to 
stack elements that have this property. There are "left", "right", "top", 
"bottom" properties, allowing you to position elements with pixel-precision: 
add style="position: absolute; left: 10px ; top: 10px; z-index: 2;" and 
style="position: absolute; left: 20px; top: 20px; z-index: 3;" to a 
div-element containg pictures and see what happens.

Note the "position" properties. They are important - read up on them.

Then you have a several css-properties for background: you can layer 
div-elements one upon the other, and overlap them using "left", "top", 
etc. - and each div-element can have a seperate background. The background 
for each and every element can be aligned ("background-align" property) and 
you can decide whether you want to repeat it or not. So you can position an 
image within a div-element and have a backgound for this element. If the 
background is a transparent image, the images and text below will show 
through. Or, with IE, there are things called filters - neat things can be 
done with them - but they are something only supported by IE, so best keep 
away from them).

There are pitfalls, though. Not every browser supports css properly and you 
have to make sure the browser is in the right mode. Mode is set by 
HTML-DOCTYPE, I'd advise

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It can be very hard to debug a style. Firefox with the Firebug-Extension is 
your friend.

If you really want to dig into this, you have to learn how css works. And 
how to circumnavigate the various browser-bugs.

For a background that goes from one colour to another you can use your 
paint-program, create a line with fill-properties starting at blue and 
ending at white. Then put this 1-pixel line in the background property of 
your [whatever div or document part you want it to be]. Set style= 
"background-repeat: none; background-position: top; background-align: left;" 
and you have got what you want. Of course there are pitfalls here, too.

To explain all this properly is like asking somebody how to do a macro with 
sphere-sweep in povray - and why it sometimes gives rather unexpected 
results and in which cases it does and what to use as remedy. Or lecture on 
the finer points of photons in povray. Not easy, for obvious reasons.

Post a reply to this message