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

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

Opacity [Feb. 11th, 2005|01:06 pm]
ex_surreal718
An InsaneJournal user who uses a background image often wants his or her content tables transparent so only the background image will display, or a semi-transparent color for the same areas. Only of or the other of the following overrides can be used at a time.

The following override can be used to achieve transparency under Punquin Elegant, Generator, Default, Tabular Indent, and Refried Paper.

GLOBAL_HEAD<=
<style type="text/css">
<!--
table, tr, td, .shadowed {
background: transparent;
}
-->
</style>
<=GLOBAL_HEAD

The following override can be used to achieve a semi-transparent background:

GLOBAL_HEAD<=
<style type="text/css">
<!--
table, tr, td, .shadowed {
filter: alpha(opacity=80);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity:80;
}
-->
</style>
<=GLOBAL_HEAD


In the above example, the opacity is set to 80, but can be changed to any number you prefer. Setting the opacity to 100, or 1.0 will make the background completely opaque. If you want your background to be solid, do not use any override at all.

Using these overrides will change the opacity of the entire table, including the text within it so you will need to choose an opacity level that still allows the text to be visible.
LinkLeave a comment

SELF-COMMITED [PAID] ONLY: Frames [Jan. 31st, 2005|04:10 pm]
ex_surreal718
This tutorial will show you how to make a framed journal using the <frameset> tag.

In order to make use of this tutorial, you will have to have some prior knowledge of how the <frameset> tag works. If you don't know how to use it, then you should search for a frames tutorial using your favorite search engine.

It is not easy to make a framed journal using S1. It requires the creation of at least two custom styles. One style holds the actual <frameset> tag, and each additional style contains a separate frame. For example, if you want a sidebar in a frame on the side of your journal, you'd make one style with just the sidebar and another one with just your journal (in addition to the style with the <frameset> tag).

To make the style with the <frameset> tag, create a style for the view of your choice. For our purposes, it should not based on any previous style. In the *_PAGE variable, the basic format for the URL(s) that you would link to in the <frame> tags would be:



Where styleid is, replace it with the style ID of (one of) your inside frame's style.

In order to make the skiplinks work, you will have to set *_RANGE_MOSTRECENT to be:

0

The style that you would choose from the drop-down menu at the top of the Modify Journal page would be the one with the <frameset> tag.
LinkLeave a comment

Adding navigation links. [Jul. 19th, 2004|06:18 pm]
ex_empyreal791
In order to add navigation links, you must first specify a website on your user information page

( Default )
( Generator )
( Disjointed )
( Punquin Elegant )
( Magazine )
( Tabular Indent )
( Refried Paper )
Link2 comments|Leave a comment

Adding an image between the comments links [Jul. 19th, 2004|06:12 pm]
ex_empyreal791
First you will need to customize your comments links.
Images used will need to be hosted by a website which allows remote loading.

( Generator )

( Default, Punquin Elegant, Notepad, Refried Paper, Clean and Simple, Disjointed and Magazine )

( Tabular Indent )
LinkLeave a comment

Another Hexidecimal Color Code Chart [Jun. 3rd, 2004|09:05 pm]
ex_empyreal791
( Color Chart )
LinkLeave a comment

Displaying a user picture with every entry. [Jun. 3rd, 2004|09:05 pm]
ex_empyreal791
There is no true override which allows the user to display a user picture with each entry. However, there is a way to work around it.
( More here )
Link1 comment|Leave a comment

Creating a border around your entries. [Jun. 3rd, 2004|09:04 pm]
ex_empyreal791
( Clean and Simple )

( Default )

( Disjointed )

( Generator and Tabular Indent )

( Punquin Elegant with Sidebar )

The width of the border is controlled by the px value (2px) and can be changed to suit your needs. The options for the border, currently set to dotted, are dotted, dashed, solid, and double. The color of the border is controlled by the hexidecimal color value (#000000). If you are in need of a hexadecimal color chart, one can be found here.

Note that you should always merge your GLOBAL_HEAD overrides so that they function correctly. Information is available here
LinkLeave a comment

Content Table Resize/Realign [Jun. 3rd, 2004|08:58 pm]
ex_empyreal791


( Generator )

( Punquin Elegant With Sidebar )

( Default )

( Disjointed )

( Tabular Indent )

( Refried Paper )

( Magazine )

Note that you should always merge your GLOBAL_HEAD overrides so that they function correctly. Information is available here.
Link3 comments|Leave a comment

Color Hexadecimal Codes Chart [Jan. 22nd, 2004|04:04 pm]

ela
When adding color to your journal, it is possible to simply type in the name of the color; however, you should use a hexadecimal code. The reason for wanting to use them instead of the names is fairly simple: not all browsers and computer setups, even popular ones, will always recognize the color name in the same way that yours does. For example, it may display "lavender" as orange. However, hexadecimal codes are universal, always telling any computer the same thing. Hexadecimal codes -- otherwise known as "hex codes" -- are series of numbers and letters which indicate to the internet browser what colors should be displaying. The chart below the a small sampling of hex codes (there are 16.7 million valid options).


Hex Code
 Color
#FFFFFF
  
#FFFFCC
  
#FFFF99
  
#FFFF66
  
#FFFF33
  
#FFFF00
  
#FFCCFF
  
#FFCCCC
  
#FFCC99
  
#FFCC66
  
#FFCC33
  
#FFCC00
  
#FF99FF
  
#FF99CC
  
#FF9999
  
#FF9966
  
#FF9933
  
#FF9900
  
#FF66FF
  
#FF66CC
  
#FF6699
  
#FF6666
  
#FF6633
  
#FF6600
  
#FF33FF
  
#FF33CC
  
#FF3399
  
#FF3366
  
#FF3333
  
#FF3300
  
#FF00FF
  
#FF00CC
  
#FF0099
  
#FF0066
  
#FF0033
  
#FF0000
  


Hex Code
 Color
#66FFFF
  
#66FFCC
  
#66FF99
  
#66FF66
  
#66FF33
  
#66FF00
  
#66CCFF
  
#66CCCC
  
#66CC99
  
#66CC66
  
#66CC33
  
#66CC00
  
#6699FF
  
#6699CC
  
#669999
  
#669966
  
#669933
  
#669900
  
#6666FF
  
#6666CC
  
#666699
  
#666666
  
#666633
  
#666600
  
#6633FF
  
#6633CC
  
#663399
  
#663366
  
#663333
  
#663300
  
#6600FF
  
#6600CC
  
#660099
  
#660066
  
#660033
  
#660000
  


Hex Code
 Color
#CCFFFF
  
#CCFFCC
  
#CCFF99
  
#CCFF66
  
#CCFF33
  
#CCFF00
  
#CCCCFF
  
#CCCCCC
  
#CCCC99
  
#CCCC66
  
#CCCC33
  
#CCCC00
  
#CC99FF
  
#CC99CC
  
#CC9999
  
#CC9966
  
#CC9933
  
#CC9900
  
#CC66FF
  
#CC66CC
  
#CC6699
  
#CC6666
  
#CC6633
  
#CC6600
  
#CC33FF
  
#CC33CC
  
#CC3399
  
#CC3366
  
#CC3333
  
#CC3300
  
#CC00FF
  
#CC00CC
  
#CC0099
  
#CC0066
  
#CC0033
  
#CC0000
  


Hex Code
 Color
#33FFFF
  
#33FFCC
  
#33FF99
  
#33FF66
  
#33FF33
  
#33FF00
  
#33CCFF
  
#33CCCC
  
#33CC99
  
#33CC66
  
#33CC33
  
#33CC00
  
#3399FF
  
#3399CC
  
#339999
  
#339966
  
#339933
  
#339900
  
#3366FF
  
#3366CC
  
#336699
  
#336666
  
#336633
  
#336600
  
#3333FF
  
#3333CC
  
#333399
  
#333366
  
#333333
  
#333300
  
#3300FF
  
#3300CC
  
#330099
  
#330066
  
#330033
  
#330000
  


Hex Code
 Color
#99FFFF
  
#99FFCC
  
#99FF99
  
#99FF66
  
#99FF33
  
#99FF00
  
#99CCFF
  
#99CCCC
  
#99CC99
  
#99CC66
  
#99CC33
  
#99CC00
  
#9999FF
  
#9999CC
  
#999999
  
#999966
  
#999933
  
#999900
  
#9966FF
  
#9966CC
  
#996699
  
#996666
  
#996633
  
#996600
  
#9933FF
  
#9933CC
  
#993399
  
#993366
  
#993333
  
#993300
  
#9900FF
  
#9900CC
  
#990099
  
#990066
  
#990033
  
#990000
  


Hex Code
 Color
#00FFFF
  
#00FFCC
  
#00FF99
  
#00FF66
  
#00FF33
  
#00FF00
  
#00CCFF
  
#00CCCC
  
#00CC99
  
#00CC66
  
#00CC33
  
#00CC00
  
#0099FF
  
#0099CC
  
#009999
  
#009966
  
#009933
  
#009900
  
#0066FF
  
#0066CC
  
#006699
  
#006666
  
#006633
  
#006600
  
#0033FF
  
#0033CC
  
#003399
  
#003366
  
#003333
  
#003300
  
#0000FF
  
#0000CC
  
#000099
  
#000066
  
#000033
  
#000000
  


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

Further customizing the background image [Dec. 27th, 2003|08:04 am]

ela
Apart from the background properties which you can define from the override provided in FAQ 48: How do I add a background image?, there are several other properties you can assign to your background imarge.



GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
background-color: #000000 !important;
background-image: url(http://www.your-website.com/image.jpg) !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-position: center top !important;
}
-->
</style>
<=GLOBAL_HEAD



What the properties mean:
Background color
Default property: No color - will display color defined in Modify Journal section.
The best way to define the color would be to use hex codes. A hexadecimal codes chart is available here if you need the hex codes for colors.

Background image
Default property: None.
The URL highlighted in the example should be replaced with the URL you have hosted at an external webhost which allows remote loading.

Background repeat
Default property: Repeat (Known as tiling)
The example has defined a no-repeat property, where the background will only be displayed once. The properties available are:
repeat image is tiled horizontally and vertically
no-repeat image is not repeated
repeat-x image is repeated horizontally
repeat-y image is repeated vertically


Background scrolling
Default property: Scroll.
The example has defined this as fixed. The properties available are:
scroll background image scrolls with content
fixed background image does not scroll with content


Background position
Default property: 0% 0%

The first value is for the horizontal, the second is for the veritical. If only one value is given and it is a percentage or pixel value (as in the example above) than it will be for the horizontal, left side. In the sample code given above the background position is simply 2%. This puts the background 2% from the left and 50% from the top. Even though the default is 0% 0%, if one element is given and the other isn't, the one that's not given becomes 50%.

The example has defined the background image to display at the top center of the page. The properties available are:
percentage one or two percentage values
length one or two length values
left horizontal alignment is at the left
center horizontal alignment is centered
right horizontal alignment is at the right
top vertical alignment is at the top
center vertical alignment is at the center
bottom vertical alignment is at the bottom


Note that you should always merge your GLOBAL_HEAD overrides so that they function correctly. Information is available here.

[originally contributed by userinfomacheide</span> and userinfojaninedog</span> in </a></b></a>
LinkLeave a comment

navigation
[ viewing | most recent entries ]
[ go | earlier ]