Journal Customization Tutorials - Blurty Official Community

Note that this effect only displays if you are using the Internet Explorer browser.

GLOBAL_HEAD<=
<meta content="revealTrans(transition=1, duration=1.0)" http-equiv="Page-Enter">
<meta content="revealTrans(transition=1, duration=1.0)" http-equiv="Page-Exit">
<=GLOBAL_HEAD

As the Refried Paper system style has hard-coded colors, you will need to use overrides in order to customize your journal colors.

Refried Paper


GLOBAL_HEAD<=
<style type="text/css">
<!--
/* all background areas not covered by other code shown below */
td {
background-color: #FFFFFF;
}
/* main journal title */
td.title {
background-color: #FFFF00;
}
/* date, subject, and currents */
.body table, .body table td {
background-color: #FFFFFF;
}
.body table {
width: 100%;
}
/* navigation section */
.links {
background-color: #FFFF99;
}
/* main body of journal */
td.body {
background-color: #CCFFFF;
}
/* navigation section subheadings */
.subhead {
background: #FF0000; 
width: 100%;
}
-->
</style>
<=GLOBAL_HEAD

The first thing to do is go out onto the web and pick up a counter. Make sure the counter is HTML based since Blurty will not permit the use of JavaScript. If you'd like a little more information about Blurty and JavaScript, you can find the FAQ here.

It's important that you have a website specified in your journal in order for this override to work. It doesn't matter what URL you have listed, just as long as you have one specified. Use your own journal if you can't think of anything else. Edit your Account options to do this.

After you have signed up for service, you will be provided with the code you need to place the counter in your journal. Once you've got the code, go to the Modify Look page to customize the look of your journal.

The code is not a part of the GLOBAL_HEAD, instead, you will be creating a LASTN_WEBSITE override. Notepad does not have an override for a counter because it does not have a LASTN_WEBSITE field.

( Clean and Simple )

( Default Blurty )

( Disjointed )

( Generator )

( Magazine )

( Punquin Elegant )

( Refried Paper )

( Tabular Indent )

( Webley Boxes )

( Using a Custom Style to Add a Counter )

What does the HTML code look like? Here's a few samples from popular free counter service sites. These examples do not indicate an endorsement of these counter services on the part of Blurty or the Customization Community. These examples have been provided solely as a reference for you. You do not have to use these services and Blurty makes no guarantees in regard to these services.

( SiteMeter )

( The Counter )

( Bravenet )

All that's left is to click "Save Changes" when you've finished adding the override.

Tutorial submitted by

killermuffin

This tutorial will discuss the process of changing the navigation links (friends, info, calendar) etc. on your Blurty journal.

In order to do this, you must create a custom style (see this FAQ for more information on style creation). Base your new style on the one you are using. If you've forgotten the name of the style, you can go to the modify journal page to find what you have selected for the appropriate view.

Once the style is created, you will have the immediate option to edit it. The rest of the tutorial is style-specific. Choose the style from the menu below to learn how to customize the navigation links.

( Clean and Simple )

( Default Blurty )

( Disjointed )

( Generator )

( Magazine )

( Notepad )

( Punquin Elegant w/ sidebar )

( Refried Paper )

( Tabular Indent )

( Webley Boxes on White )

The last step is to save the style, and set it to your journal. You can set it to your journal at the modify journal page by selecting your new style from the dropdown menu.

Submitted by

keithylishus

While overrides are quick and easy ways to override certain aspects of your journal's style, it's important to note that you can only have one override for each variable (such as GLOBAL_HEAD), so if you have more than one thing you want to do, it's necessary to merge the two, or more, together into one override. As an example, say you have a background override in place and want to also change the font of your journal. The example code for both separately is below.

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

</style>
<=GLOBAL_HEAD

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

</style>
<=GLOBAL_HEAD

Since you're only allowed one GLOBAL_HEAD override, you will need to combine them for both effects to work properly. Correctly combined, the resulting code would be as follows:

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

</style>
<=GLOBAL_HEAD

Note that it basically consisted of removing the end of one override and the beginning of the next, i.e. this portion of code:

-->
</style>
<=GLOBAL_HEAD

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

</style>
<title>NEW TITLE HERE</title>
<=GLOBAL_HEAD

It's also important to be sure you handle the comment markers () correctly. Starting one and not closing it will render the page unreadable in most browsers.

One of the options possible with Microsoft Internet Explorer v5.5 and above is the ability to manipulate
the colors in the scrollbar by means of CSS. Instead of the sometimes boring default colors, you can
customize your scroll bar by adding a new color, or changing the entire scheme to match your Blurty.
In CSS, scrollbars are part of the body portion of a webpage, so all of the color codes would fit between a
body { } mark, as below:
<style type="text/css">  </style>
where color would be the hexadecimal value of a color; ex. "black" would be "#000000".
To show you where each color area change occurs, see the below diagram :

One of the most requested tutorials we've gotten ask us how to change the style of the mouse cursor when it hovers over certain sections of a page (Usually links). For instance, in Microsoft Internet Explorer, instead of the usual pointing hand you're accustomed to when hovering over links on the web, you can change this to a crosshair or different types of arrows.

Below is a list of the attributes you can give to the cursor. Hover over each one to see the change:

nw-resize	n-resize	ne-resize	default
w-resize	move	e-resize	auto
sw-resize	s-resize	se-resize	pointer
text	wait	help	crosshair

For example, if you wanted to change the mouse cursor to a horizontal arrow whenever someone hovers over the links to your page, all you would need to do is add this to your GLOBAL_HEAD override :

<style type="text/css">

</style>

Let's start out with some fun stuff. This will only work for CSS-enabled browsers (if yours doesn't work right - upgrade and join the 21st century).

Changing the comment links is pretty well explained in this FAQ, but what if you want to use a word whose plural is outside the standard "s", "es" or "ies" ending like tooth/teeth or leaf/leaves (this will be our example).

You'll need at least two overrides, possibly four, depending on which views you want it to affect. *_TALK_READLINK should be replaced by LASTN_TALK_READLINK, FRIENDS_TALK_READLINK and DAY_TALK_READLINK for each view you want it to change. The GLOBAL_HEAD should be merged with any other GLOBAL_HEAD override you have in place (See here for more information on merging).

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

</style>
<=GLOBAL_HEAD

*_TALK_READLINK<=
<a href="%%urlread%%"><b>%%messagecount%% lea<span class="singular%%mc-plural-s%%">f</span><span class="plural%%mc-plural-s%%">ves</span></b></a> |
<=*_TALK_READLINK

Note: the bold tag that I emphasized in the TALK_READLINK portion is only necessary for the Generator style to make the font match the Comment link.

A brief explanation:
The %%mc-plural-s%% variable is the standard way of adding an "s" to the end of a word to make it plural. The span tags in *_TALK_READLINK put each of the alternative endings of the word (in this case "f" and "ves" - for the tooth/teeth example, it would be "ooth" and "eeth") in separate CSS classes. If there is only one comment, the classes will be "singular" and "plural". If there is more than one comment, the classes will be "singulars" and "plurals", due to the %%mc-plural-s%% variable. The GLOBAL_HEAD portion only defines two of these classes ("singulars" and "plural"), and tells the browser to hide them with the "display: none" attribute. The classes "singular" and "plurals" have no definition and are therefore displayed as normal text.

This little trick can be extended to giving entirely different text for all three conditions (no comments, 1 comment and more than one comment) or even to have entirely different text for each number of comments, but the code is much more complicated and fairly style-dependent because it requires modifying the *_TALK_LINKS override.

Okay, so this isn't exactly Journal Customization, but I've been browsing Journals and noticed a couple of people asking the general question on how to do some of these things... so here it is.

These tags can be used in your journal entries, as well as anywhere on the site you can use html coding to modify your journal/profile.

1)

angel. This links to my journal. You can do this with any journal on the site.

To do this, simply use this code : <lj user="username"> , where "username" can be replaced with the username of any journal account on blurty you would like to link to.

2)

support. This links the Support community. As with the User tag, this can be used for any defined community on the site.

The code for this is <lj comm="community"> . Again, "community" would be replaced with the username of the community you'd like to link to.

3) The lj-cut tags:

<lj-cut> ... </lj-cut> , replacing of course the "..." with the html, text (or whatever that you want to have the link cut to from your main entry.) can be used in a journal entry to hide part of, or all of the entry. This is useful when posting a string of pictures or a particularly large block of text.

Anything placed in between the opening and closing tags of this code will be hidden. Anything posted before or after it will remain normal, as you can probably tell from the example above.

Normally, the cut link will say "Read more", but if you want to change it to say something else like "I am Super L337", you can write the tag as:

<lj-cut text="I am Super L337">

Here is an example of an lj-cut in use:

( Read more... )

4) <lj-poll> ... </lj-poll> can be used to post a poll in your journal.

5)<lj-raw> ... </lj-raw>. This tag is used to disable the way Blurty auto-inserts line breaks into your entries. This esentially does the same thing as using the "Don't auto-format" checkbox when making a journal entry, except it only effects the section of your post between the tags and not your entire post.

There are also three specific html tags that can be used to easily link to places within the Blurty website. These tags are:

Blurty News. This link to the news section can be coded like so:

<a href="lj://user/news">Blurty News</a>

Support Request #28 This links directly to Support Request #28. This is VERY useful when referencing support requests on the community for Support Volunteers. Code:

<a href="lj://support/28">Support Request #3777</a>

FAQ #92 This tag directly links you to whichever FAQ you specify by number. This is the code:

<a href="lj://faq/64">FAQ #64</a>

The title that appears in the browser window's title bar usually defaults as "User's Blurty -- Entries". To change this you can use the following override.

GLOBAL_HEAD<=
<title>Insert Preferred Title Here</title>
<=GLOBAL_HEAD

You can use anything you want. For example visit my journal.

angel. I have changed the title bar to say | Cerebral Nirvana In Greyscale |. The code I used was:

GLOBAL_HEAD<=
<title>| Cerebral Nirvana In Greyscale |</title>
<=GLOBAL_HEAD

It is important to note that because of how they are coded, this override does not work with the following styles:

-The Current Default Style
-Notepad
-Webley Boxes on White
-Punquin Elegant w/Sidebar