![](/i/fill.gif) |
![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>> ...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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
>> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
> 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
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |
|
![](/i/fill.gif) |
| ![](/i/fill.gif) |
|
![](/i/fill.gif) |