Rotating Headers in Transmogrified?

[elfgirl]

I know that Transmorgrified allows headers, but does anyone know if it's possible to set custom CSS up for rotating headers (display a randomly selected header from a set group of available headers)? I've seen folks on LJ with their styles set up to do this and I do it myself in my WP journal, but I've no idea how to do it with custom CSS here.

Thanks!

Sorted! From the instructions found here:

NOTE: This solution is only workable with custom theme layers, which means you have to have some sort of paid account. It may or may not work with the other S2 DW themes. (ETA: it also works with Negatives.)



1. Create a custom theme layer by going to Organize > Select style > Developer Area > Your Layers and selecting Create layout-specific layer, type: theme, layout: transmogrified

2. Add the following code to your theme layer:

function Page::print_custom_head()
{
var string[] header_image;
var int header_index=0;

$header_image[$header_index++] = "http://www.imageaddy.com/header_1.jpg";

$header_image[$header_index++] = "http://www.imageaddy.com/header_2.jpg";

$header_image[$header_index++] = "http://www.imageaddy.com/header_3.jpg";

var string header_url = $header_image[rand($header_index) - 1];

    """
    <style type="text/css">   

#header {
    background-image: url("$header_url"); /* Header image URL */
    height: 140px;
    background-scroll: no-scroll;
    background-repeat: no-repeat;
    background-position: center;

}

#header h1 {
    display: none;
}

#header h2 {
    display: none;
}


     </style>
     """;
}

Replace the "http://www.imageaddy.com/header_1.jpg" with the URL of whatever images you'd like to use for your rotating headers. Change the height under the #header CSS code to whatever the height of your header is.

3. Click the Compile and Save button in the top left corner.

4. Go to Organize > Select journal style > Your custom layers and choose the custom Transmogrified layer.

Comments

[htbthomas]

Transmogrified allows headers? Do you know a link for the CSS for that?

And I second wanting to know how to do a rotating header. :)

[elfgirl]

Here's the post about adding a header:

http://getting-started.dreamwidth.org/20079.html

[htbthomas]

Thanks so much!

[elfgirl]

No problem!

[matgb]

CSS 101: Everything can have a background image
CSS 102: Most things look better without one

;-)

[elfgirl]

Heh. I tend to agree, but I'm looking for a way to do headers, not backgrounds. :)

[matgb]

So you put a background image to the Header section and define a height with CSS. Negatives (which you're using) has a #header defined, and I know Transmogrified does, so simple trick of aligning it into the right bit.

This should work:

#header {
background-position: center bottom;
background-repeat: no-repeat;
background-image: url(http://taktix.org/images/header-tlrt.jpg);
min-height:100px;
}

Replace your image with mine and change the height to suit, obviously.

No idea how to rotate it though, sorry.

[elfgirl]

Ah--my question is specifically about the ability to rotate between different headers. I'd already found the instructions to put a static header in the layout. Sorry if that wasn't clear.

[adalger]

Well, here's the thing. CSS doesn't really have any logic operators, or random number generators. If you want to have a randomly selected header, that has to happen in something like javascript or a custom layout layer.

[elfgirl]

Right. I found the code over at one of the comms on LJ and edited my post to share.

[matgb]

That's actually rather cool. Not sure I'll use it, but the fact that you can is useful.

[htbthomas]

I'm partial to my header image-based journals. *stubborn* ;)

[matgb]

miss_s_b is rather partial to her vinyl record collection, but at least she has a point on quality there. *web evolution* ;-)

[htbthomas]

Well, I know what I have at my DW now is clunky and unstylish... Sort of why I wanted the CSS for doing something nicer with a header in Core 2...

*cowers in corner* ;)