unique.wonders. (ex_uniquewo) wrote in component_help,

S&C Tutorial explained to children

Once upon a time there was this post. And then, much more recently, that one.

Because I'm impatient I thought it'd be nice to have something to work on and therefore revamped the Shrinking and Centering/Header/Customized Nav Bar Links tutorial.

Last edited: December 19, 00:38 GMT.

Shrinking and Centering/Header/Custom Navigation Bar Links

Please make sure you've read the Getting Started Guide before using this tutorial.

  • Reducing the width of your journal and centering it.

  • And/or adding a centered image header at the top of your journal.

  • And/or adding custom links to your navigation bar (when it is a bar and not a side component).

It will apply to all your pages/views.

Screencaps/Journals using this tutorial: Any volunteers?

Layer: Theme. (How do I create a theme layer?)

Overridden function: function page_layout (page p)

Issues: Your layout will stretch when you have large images in your entries or your friends' entries. Same thing when a comment thread becomes too wide. To prevent the stretching of your entries, you have to implement scrollbars using this tutorial. There isn't any tutorial dealing with the stretching of the comment area yet.

Other similar tutorials (replacing this one)
Component and Siding.
Component on Both Sides.

Related tutorial working with Shrinking and Centering:
Custom Title Component (to be able to have your side component at the same level as your header).


Copy/paste the code in its entirety into your Theme Layer. Save and Compile. If you get any error, you did not paste it properly or you pasted it inside another portion of code.

Setting the width and the header:
At the beginning of the code, read the instructions in green: change the width from 70% to your desired number of pixels or percentage (code in red), insert your image header URL between the two quotes (code in ?), insert your image header alt text between the two quotes (code in ?)

If you don't want to reduce the width of your journal, set the percentage to 100%.

Adding custom links to the navigation bar:
Scroll down to "# to add your own links you can use these as a templates". Edit the URLs and link names in the code below (code in pink). Delete the # sign at the beginning of each pink line to activate it. Copy/paste one line if you want to add another link then edit it and delete the # sign.

Save and compile. If you get an error, make sure you didn't accidentally delete a quote or a semi-colon.



I don't think the code has to be changed except, maybe, colored text for the header comments?

How do I have randomized pictures in my header?

How do I add space between my header and the rest of the entries?

How do I change the colors of my links in my navigation bar?

Be productive: comment and make it better. Thank you.

P.S. "Explained to children" is not meant as an offense. I have a weird sense of humor. Ask our glorious leader if you don't believe me.

  • Post a new comment


    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened