InsaneJournal HowTo [entries|archive|friends|userinfo]
InsaneJournal Tutorials

[ website | Tutorials ]
[ userinfo | insanejournal userinfo ]
[ archive | journal archive ]

[*/S2] Embedding Background Music (MIDI, WAV, or MP3) [Sep. 27th, 2003|10:10 pm]
ex_v722
Reserved for Self-committed, Permanently Insane, and Early Inmate accounts
You will need to create your own journal style and simply include the HTML code.


You will need to apply this code anywhere between the <body> </body> tags of the HTML structure. In this example, it's done directly following the <BODY> tag of the standard Generator style while editing inside the LASTN_PAGE section

<body bgcolor="%%color:strong_back%%" text="%%color:page_text%%" link="%%color:page_link%%" vlink="%%color:page_vlink%%" alink="%%color:page_alink%%">
<bgsound src="http://www.webhostingsite.com/useraccount/soundfile.mid" loop=1></bgsound>
.
.
.
.


www.webhostingsite.com = web address of your webhosting site
useraccount = name of your account (not applicable to everyone)
soundfile.mid = name of the soundfile (can also be wav or mp3s files)
loop = n-times/infinite, n-times = play n times before stopping, infinite = continuous



Storage of Media File
In order to be able to have the music play in the background, you will need to upload the song/music to a website that allows remote loading. If you're wondering what remote loading is, please check out this FAQ: http://www.insanejournal.com/support/faqbrowse.bml?faqid=47
</div>

[contributed by </a></b></a>[info]highway in </a></b></a>
LinkLeave a comment

[*] Changing "current mood" and "current music" [Sep. 11th, 2003|04:50 pm]
ex_v722
This requires the creation of a custom style, which only Self-committed [paid], Permanently Insane, and Early Inmate account holders may access. If you are a Free Patient, please see FAQ #10: What are the benefits of a Self-committed account? and FAQ #8: How do I buy a Self-committed account?</div>

The labels for an entry's "current mood" and "current music" are controlled within the LASTN_CURRENT variable (or FRIENDS_CURRENT, or DAY_CURRENT; this tutorial assumes you are customizing your LASTN view, but the same instructions will work for your FRIENDS or DAY view). Since the LASTN_CURRENT variable cannot be overridden, changing these labels requires a custom style. If you do not already have a custom style, you will need to create one; you can find instructions for this in FAQ #43: How do I create a custom style?



Once you have created a custom style, you will need to edit the LASTN_CURRENT variable. Look for the section of code in this variable that labels the current mood/or music; if your style is based on a system style, then the label will probably look something like "Current %%what%%:"; though it might not include the word "current" or the colon ':', and it might use "%%lc:what%%" instead of "%%what%%" (where "lc:" is the lower-case transform, which here converts "Mood" to "mood" and "Music" to "music").



Once you have found the label, replace it with "<span class="%%lc:what%%mood">I'm feeling</span><span class="%%lc:what%%music">I'm listening to</span>"; where you can change "I'm feeling" and "I'm listening to" (the labels for current mood and current music, respectively) to whatever you would like.



Next, you will have to add a bit of CSS to your LASTN_PAGE variable. What you should do is find the code "</head>" in your LASTN_PAGE variable and replace it with the following code:



<style type="text/css">
span.moodmusic, span.musicmood {
display: none;
}
</style>
</head>


If you never use the current mood and current music fields, you could even go so far as to label your current mood "current weather" and your current music "current book" and use them as such. However, note that the system will still treat them as your current mood and current music, and present them as such on comments pages and your friends' friends pages.



Variable References:LASTN_CURRENT
LASTN_PAGE
Additional Reference:FAQ #43: How do I create a custom style?


[contributed by </a></b></a>[info]ruakh in </a></b></a>
Link4 comments|Leave a comment

Changing Mouse Cursor [Jul. 23rd, 2003|12:43 pm]
ex_v722
One of the neatest things you can do with CSS is to change the style of the mouse cursor when it hovers over certain sections of a page. For instance, in Microsoft Internet Explorer, instead of the usual pointing hand you're accustomed to when navigating pages, you can change this to something like a crosshair or many styles of arrows.

The directions are fairly simple; in a CSS property you simply add the attribute : cursor, which you can then set to different cursors, mainly:


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


Say for example, you wanted to change the mouse cursor to a crosshair whenever someone hovers over the links to your page, all you would need to do is add this simple CSS property to a GLOBAL_HEAD override :


<style type="text/css">
<!--
a:hover {
cursor: crosshair;
}
-->
</style>



If you're adding this code to existing GLOBAL_HEAD overrides, you'll need to make sure to merge them correctly. Instructions on how to merge overrides can be found in this tutorial.


[posted by </a></b></a>[info]opiummmm in </a></b></a>

LinkLeave a comment

Changing Journal's Browser Title [Jul. 23rd, 2003|11:13 am]
ex_v722
To change the title that is displayed in the browser window's title bar, use the following override:

GLOBAL_HEAD<=
<title>My Customized InsaneJournal!</title>
<=GLOBAL_HEAD

You can customize the actual wording of the title to say whatever you like.

NOTE: This override will not work for the system styles Default, Punquin Elegant with Sidebar, and Webley Boxes on White because of how these styles are put together. If you would like to customize the browser window's title bar for these styles, you will need to create a custom style, a benefit of a "Self-committed" [paid] account.


Variable Reference:
 GLOBAL_HEAD
Additional References:

  • Merging GLOBAL_HEAD Overrides

  • What are overrides and how do they work?

    		•


    Only one override is permitted for each specific override block.
    If you are currently using a GLOBAL_HEAD override to accomplish other customizations,
    this would need to be combined with your existing override.
    </div>

    [posted by </a></b></a>[info]opiummmm in </a></b></a>
    LinkLeave a comment

    Text Filters (Blur, Glow, Shadow, etc.) [Jul. 23rd, 2003|10:29 am]
    ex_v722
    Prerequisites:
    Specifics on overrides
    Basic knowledge of CSS

    You may have seen some journals that have glowing text, or that have links that blur when the mouse hovers over them. These are done in Internet Explorer with a function of CSS called text filters. There are several neat text filters you can apply, using the filter: attribute. Here we'll cover the most common ones, but keep in mind before you try these that they can severely drain your computer's power and slow everything down, especially if you use a filter on a lot of text (say, all your entries).

    Horizontal flip (Horizontal flip)
    filter: fliph();

    Vertical flip (Vertical flip)
    filter: flipv();

    The following filters have Add, Color, Strength, or Direction properties. These should be changed to numbers that suit your liking.
    Add specifies whether the original object will be added to the filter or not. Any nonzero value adds the original object and zero does not.
    Strenth affects how much the object will glow or blur and can be changed to any one-digit number.
    The Color property can be changed to any hexadecimal color code. [A list of such codes can be found here.]
    The Direction property changes which direction the object is blurred from or which direction the shadow comes from. In the wave filter, Phase is equivalent to Direction.
    Numbers you can use as directions:
    0 (top)
    45 (top right)
    90 (right)
    135 (bottom right)
    180 (bottom)
    225 (bottom left)
    270 (left)
    315 (top left)

    Glow
    filter:glow(Color=#003399,Strength=2);

    Blur
    filter:blur(Add=1,Strength=4,Direction=45);

    Wave
    filter:wave(Add=1,Freq=2,LightStrength=20,Phase=45,Strength=3);
    In this filter, Freq specifies the number of waves the filter makes, and LightStrength is a percentage value that specifies the strength of light on the wave effect.

    Shadow
    filter:shadow(Color=#003399,Direction=45);

    Drop shadow
    filter:dropshadow(Color=#003399,Direction=180);

    So, for example, if you wanted to make your links blur slightly when they are hovered over, you would add this CSS code to a GLOBAL_HEAD override:

    GLOBAL_HEAD<=
    <style type="text/css">
    <!--
    a:hover {
    filter: blur(Strength=2,Direction=45);
    height: 0;
    }
    -->
    </style>
    <=GLOBAL_HEAD


    In that example code, you'll notice the height: 0; property. It's important to add this with any filter you use, because they may not work properly without it.

    If you're adding this code to existing GLOBAL_HEAD overrides, you'll need to make sure to merge them correctly. Instructions on how to merge overrides can be found in this tutorial.

    For other ways you can change the way text looks using CSS, try this tutorial.


    [contributed by </a></b></a>[info]the_wild_rose and </a></b></a>[info]girl_from_mars in </a></b></a>
    LinkLeave a comment

    Merging GLOBAL_HEAD Overrides [Jul. 23rd, 2003|10:26 am]
    ex_v722
    A vast majority of the customization now possible via free accounts is accomplished through the use of a GLOBAL_HEAD override. However, only one GLOBAL_HEAD block is allowed at a time in your Style Overrides box (http://www.insanejournal.com/modify.bml). (If you would like to learn more about overrides and how they work, you may wish to read FAQ #100.)

    You must merge them if you want to combine effects that both use a GLOBAL_HEAD. This can be easy if you are using HTML tags such as <title>, <base>, <style>, <link>, or <meta>: you would need to move everything between a single set of GLOBAL_HEAD markers as shown below.

    Example: If you would like to use both a <title> change and a favicon override in your journal you would need to merge both overrides into a single GLOBAL_HEAD override:


    GLOBAL_HEAD<=
    <title>My Customized InsaneJournal!</title>
    <LINK REL="SHORTCUT ICON" HREF="http://www.some_host_site.com/my_cool_icon.ico" />
    <=GLOBAL_HEAD


    Merging overrides that make use of CSS is slightly more complicated and requires more detailed merging techniques. When dealing with overrides containing CSS (such as the background and font overrides), you have to merge the content inside the GLOBAL_HEAD block as well as the content inside the style tags. An example is shown below:


    Background Override:

    GLOBAL_HEAD<=
    <style type="text/css">
    <!--
    body {
    background-image: url(http://www.your-website.com/image.jpg) !important;
    }
    -->
    </style>
    <=GLOBAL_HEAD

    Font Override:

    GLOBAL_HEAD<=
    <style type="text/css">
    <!--
    body, td, font, div, p {
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
    }
    -->
    </style>
    <=GLOBAL_HEAD

    Combined Background and Font Override:

    GLOBAL_HEAD<=
    <style type="text/css">
    <!--
    body {
    background-image: url(http://www.your-website.com/image.jpg) !important;
    }
    body, td, font, div, p {
    font-family: Century Gothic, Arial, Helvetica, sans-serif;
    }
    -->
    </style>
    <=GLOBAL_HEAD


    A basic CSS statement contains an element (such as body, table, a:hover, etc.), an opening bracket ("{"), the declarations that define the effects being added to the element (which includes a semi-colon on the end of each declaration), and a closing bracket ("}"). Note the composition of this basic link effect:

    a:hover {
    cursor: crosshair;
    }

    It begins with the a:hover element, followed by a bracket on the same line. Then on a new line, the first (and in this case, only) declaration is followed by a semi-colon; on the last line, the closing bracket is added. This is an example of a CSS effect with the correct syntax.

    When merging CSS, the entire statement needs to be copied over, from the element's name to the closing bracket. Without those two items, the effect will not work and may distort or disable the effect of other CSS in the same override.

    Note that the new, combined GLOBAL_HEAD in the previous example only uses one <style></style> tag set. It also has only one set of comment markers ("<!-- / -->"). The above is an example of a correctly merged GLOBAL_HEAD override. Having duplicate style tags and comment markers can lead to incorrect editing of future overrides and may cause unexpected results if the tags are missing or misplaced. It is best to have only one set of opening and closing style tags for your merged override.

    Important: If you open a comment marker ("<!--") and do not close it with the ending "-->", then your entire journal may not display properly in your browser. Making sure that you open and close these markers properly so that your journal displays correctly. This not only applies to background and font overrides but to any GLOBAL_HEAD override that uses CSS: cursors, borders, link color and decoration, opacity, scrollbars (IE specific), and transparency, to name a few.

    This tutorial has already covered how to merge GLOBAL_HEADs that contain only HTML and CSS. Below is an example of how to merge a GLOBAL_HEAD that adds a title change with a GLOBAL_HEAD that adds a background image.


    Title Change:

    GLOBAL_HEAD<=
    <title>My Customized InsaneJournal!</title>
    <=GLOBAL_HEAD

    Background Override:

    GLOBAL_HEAD<=
    <style type="text/css">
    <!--
    body {
    background-image: url(http://www.your-website.com/image.jpg) !important;
    }
    -->
    </style>
    <=GLOBAL_HEAD

    Combined Title Change and Background Override:

    GLOBAL_HEAD<=
    <title>My Customized InsaneJournal!</title>
    <style type="text/css">
    <!--
    body {
    background-image: url(http://www.your-website.com/image.jpg) !important;
    }
    -->
    </style>
    <=GLOBAL_HEAD


    Note that the title tag goes outside of the style tag. It could go either above or below it; in this case, it has been placed above. (Please note that title changes may not work for some system styles, as mentioned in the original tutorial. In those cases, it wouldn't be merging that disabled the title change, simply a restriction in the system.)

    The title tag was used as an example, it could be any one of the tags listed in FAQ #100. Regardless, they would need to be placed outside of the style tag, not inside. Placing HTML tags inside a stylesheet disables them and can also interfere with the intended CSS effects.


    [contributed by </a></b></a>[info]braindrain in </a></b></a>
    LinkLeave a comment

    Specifics on overrides [Jul. 23rd, 2003|10:21 am]
    ex_v722
    Overrides are sections of code that can be used to modify certain parts of your journal. They are inserted into the Styles Override box near the bottom of the Modify Journal page (http://www.insanejournal.com/modify.bml).

    They are used to set exceptions to the system styles and as such involve limitations and complications. If you are interested in dramatically changing the appearance of your journal style you can much more easily and thoroughly accomplish such changes through direct use of the style system (http://www.insanejournal.com/developer/styles.bml) via a paid account (http://www.insanejournal.com/paidaccounts).

    The variables that free users can use overrides for are the *_HEAD, *_TALK_READLINK, *_TALK_LINKS, *_OPT_ITEMS, *_DATE_FORMAT, and *_WEBSITE. Paid users can override any variable.

    When you create an override you also define what view the override applies to by using LASTN (for the most recent entries), FRIENDS, DAY, or CALENDAR in the variable. For example, an override that would change the setup of your comment links and only apply to your recent entries page would be in the form of: LASTN_TALK_LINKS. The only exception to this is a variable called GLOBAL_HEAD, which affects the *_HEAD variable on all 4 of your journal pages.

    Each of the variables available for overrides correspond to a particular part of your journal.

    The *_HEAD variable is used to add to the <head> section of your journal and can be used with the LASTN, FRIENDS, DAY, and CALENDAR or as a GLOBAL function that includes all 4 pages. Examples of elements of your journal that are part of the <head> section are backgrounds, font face and size, changing the browser title, and the default text alignment.

    Not all system styles support the full functionality of the *_HEAD override. The *_HEAD override can only be used fully with the Clean and Simple, Disjointed, Generator, Magazine, Refried Paper, and Tabular Indent system styles.

    The system styles that have limited use of the *_HEAD variable will not allow you to override certain elements as noted below.

    Default: You cannot override the browser title or default text alignment.
    Punquin Elegant with Sidebar: You cannot override the browser title.
    Webley Boxes on White: You cannot override the browser title.

    The *_TALK_READLINK variable is used to change the wording of the link to leave a comment and can be used with the LASTN, FRIENDS, and DAY views.

    The *_TALK_LINKS variable is used to change the wording of the link to read your comments. It also controls the format and appearance of comments links. It can only be used with the LASTN, FRIENDS, and DAY views.

    The *_TALK_READLINK and *_TALK_LINKS variables will only function if you have chosen to have message boards enabled on your journal. (http://www.insanejournal.com/support/faqbrowse.bml?faqid=108)

    The *_OPT_ITEMS variable is used to indicate how many entries you would like to appear in a view. It can be used with the LASTN and FRIENDS views and the number of entries cannot exceed 50.

    The *_DATE_FORMAT variable is used to define the way the date and time is formatted in entries. It can only be used with the LASTN, FRIENDS, and DAY views.

    The *_WEBSITE variable is used to define the link to your personal website. It can be used with the LASTN, FRIENDS, DAY and CALENDAR views. A *_WEBSITE override will only function properly if a website is defined on the Personal Information page (http://www.insanejournal.com/editinfo.bml).

    An override contains three sections; an opening tag, a section of code that defines the override, and a closing tag. For example a *_HEAD override that affects all four page views would use the GLOBAL function and look like this:

    GLOBAL_HEAD<=
    { The code that defines the override would be inserted here. }
    <=GLOBAL_HEAD

    It is important to include the <= in both the opening and closing tags.

    If your override will fit on one line then you do not need to use a closing tag. For example an * _OPT_ITEMS override that limits your most recent entries view to 10 entries instead of the standard 20, would look like this:

    LASTN_OPT_ITEMS=>10

    You may only use an exact variable in the override box once. However, you may combine several elements into a single override by inserting and merging all sections of code you would like to use between the proper variable tags. A tutorial on that can be found here: http://www.insanejournal.com/community/howto/1020.html


    [contributed by </a></b></a>[info]arieanne in </a></b></a>
    LinkLeave a comment

    CSS text and link alteration [Jul. 23rd, 2003|10:19 am]
    ex_v722
    Prerequisites:
    Specifics on overrides
    Basic knowledge of CSS


    There are a lot of neat things you can do with CSS to customize the text in your journal. In this tutorial we'll cover many of the most common attributes that can be added to any CSS property, such as body or a:hover


    Attribute
    Choices
    What it does
    color:Any hexadecimal color code*Changes the color of the text.
    background-color:Any hexadecimal color code*Changes the background color that text appears on.
    letter-spacing:Any whole number or decimal value relative to the font size(i.e. .3em;); default is 0emChages the amount of space between letters.
    line-height:Any whole number or decimal value relative to the font size(i.e. .8em;); default is 1.2emChages the amount of space
    between multiple lines of text.

    font-style:
    italic;
    Makes text appear italic.

    font-weight:
    bold;
    Makes text appear bold-faced.
    text-decoration:underline;Underlines text.
    overline;Puts a line over text.
    underline overline;Combines underline; and overline;
    line-through;Puts a line through text.
    none;Leaves text as normal. This is useful for getting rid of an underline when a link is hovered over, etc.

    text-transform:
    capitalize;
    capitalizes the first letter of all words.

    uppercase;
    		 changes all letters to capitals.

    lowercase;
    CHanGes All leTters to loweRcase.

    none;
    LeavEs aLL letteRs As theY wEre tYpeD.
    border:width style color;
    width is a pixel value (ie 2px;), style can be solid; dashed; dotted; or double; and color is any hexadecimal color code*    		Puts a border around the element for which it is defined


    *A list of available hexadecimal color codes can be found here.

    So, for example, if you wanted to make your links red, capitalized, and underlined when they're hovered over, you could add this CSS property to a GLOBAL_HEAD override:

    GLOBAL_HEAD<=
    <style type="text/css">
    <!--
    a:hover {
    color: #FF0000;
    text-transform: capitalize;
    text-decoration: underline;
    }
    -->
    </style>
    <=GLOBAL_HEAD



    If you're adding this code to existing GLOBAL_HEAD overrides, you'll need to make sure to merge them correctly. Instructions on how to merge overrides can be found in this tutorial.

    You can also use text filters to make text blur, glow, and several other effects. There is a seperate tutorial on text filters, found here.

    The cursor that Internet Explorer displays on your journal can be changed, as well. This tutorial explains how.


    [contributed by </a></b></a>[info]the_wild_rose and </a></b></a>[info]girl_from_mars in </a></b></a>
    LinkLeave a comment

    navigation
    [ viewing | 10 entries back ]
    [ go | later ]