Customizing the Look & Feel of My Journal

[xwacky]

Heh, I finally found a way to use my own customized header picture for the journal!   This proved a lot harder than I originally thought since I'm using the Chopsticks theme of the Expressive layout.  I love the color and overall look-and-feel of this theme.  But this particular style turned out to have less straight-forward customizable options.  It took me some time to figure out how to achieve what I want by specifying a Custom stylesheet through Custom CSS under the Custom Options tab on the Journal Display page (accessed by selecting the Customize Journal option from the menu bar.)  Phew--that's quite a mouthful.  I know this is dorky but I want to record what I did so I can remember later on...

While changing the header picture, I also modified some other aspects of the theme.  Here's a list of what I'm able to do:

• Use my own banner instead of the original chopsticks and teacup picture in the header.
• Change the bottom border of the header section to black (it was originally white).  I like how the thin line giving a clear definition to the bottom edge of the header, thus separating it from the journal's body.
  
• Remove the thin white border around the header section.  This was originally a style set at the layout layer.  All themes under Expressive layout have a 1 pixel white border separating adjacent sections.  Since the Chopsticks theme is black-and-white-ish, I find the border rather pesky.  The theme previously don't have this problem because the original header picture has white background so the border doesn't show.
• Change the color, size, and fonts of the text in the header.
• Change the color of the navigation bar in the header to match with the text color.
• Change the size and font for the journal entry titles.
• Get rid of the pesky black border around my user picture since the avatar I use already has a border.

Even with the things I'm able to modifty, I'm still left frustrated with one particular customization I haven't figured out the "how-to" yet: place the navigation bar under the journal title/subtitle instead of above!  I've tried different things for weeks now and still coming up blank!   ::sigh::  At this point, I'm throwing up my hands and admitting defeat unless someone can enlighten me on what to do.

Comments

[silwyna.livejournal.com]

Wow, X, this looks fantastic. I tried to understand how you did it ... I had to give up. I have no idea how you did this, but it looks great!!! :o)

And the pics of JB *thud* There is a reason we are all worshiping that man LOL

Great job :o)

[xwacky.livejournal.com]

Thanks! I'm glad you like it!

Yeah, JB is most thud-worthy! Plus, I find the color of those pictures works well with the journal's look & feel.

The Expressive layout I use (I see you use the same layout as well, but you use the default theme while I use the Chopsticks) doesn't prompt user to supply header and/or background images like some other layouts (i.e. 3 Column Layout) do. But you can still specify your own images if you want to. You just have to do it "under the hood" via a set of customized CSS specifications. If you are interested in having a look at my "source code", you can select to view the "Page Source" from your browser (Ctrl+U for firefox browser) while you are visiting my journal. Look for the text in between the <style type="text/css">...</style> tags.