Tutorials and Customization
10 most recent tutorials
back 10 tutorials

Posted By:empyreal
Tutorial:Adding Navigation Links

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 )

14 Notes | Leave Feedback



Posted By:empyreal
Tutorial:Text filters

The following override will alter the links in your journal when the cursor is hovered over them.




GLOBAL_HEAD<=
<style type="text/css">
<!--
a:hover {
filter:glow(Color=#cc99ff,Strength=2);
height: 0;
}
-->
</style>
<=GLOBAL_HEAD



The above example will cause your link to glow light purple. The color can be changed to suit your needs by replacing the current hexidecimal color code value (cc99ff) with a different vlaue. If you are in need of a hexadecimal color chart, one can be found here.

To change to a different filter, you need only change the filter within the override.

Blur: filter:blur(Add=1,Strength=4,Direction=45);
Horizontal Flip: filter: fliph();
Veritcal Flip: filter: flipv();
Glow: filter:glow(Color=#CC99FF,Strength=2);
Blur: filter:blur(Add=1,Strength=4,Direction=45);
Wave: filter:wave(Add=1,Freq=2,LightStrength=20,Phase=45,Strength=2);
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=#CC99FF,Direction=90);
Drop shadow: filter:dropshadow(Color=#CC99FF,Direction=135);
Fade: filter:progid:dximagetransform.microsoft.gradient(gradienttype=1,startcolorstr=#CC99FF,endcolorstr=#FEFEFE)}


The variables within the filters can also be changed to suit your needs.
Add specifies whether the original object will be added to the filter or not.
Strength effects how much the object will glow or blur, and can be changed to any single digit number that suits your needs.
Direction changes which direction the object is blurred from. ie. 0 (top), 45 (top right), 90 (right), 135 (bottom right), 180 (bottom), 225 (bottom left), 270 (left), and 315 (top left)

In the fade filter, you will need to specify which color you want to start (CC99FF)and end (FEFEFE) with. Currently it is set to fade from light purple to white.

Note that you should always merge your GLOBAL_HEAD overrides so that they function correctly. Information on merging overrides can be found here.

20 Notes | Leave Feedback



Posted By:empyreal
Tutorial:Adding an image between comments links

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 )

14 Notes | Leave Feedback



Posted By:empyreal
Tutorial:Hexidecimal Color Code Chart

Color Chart )

25 Notes | Leave Feedback



Posted By:empyreal
Tutorial:Displaying a user picture with every entry.

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 )

8 Notes | Leave Feedback



Posted By:empyreal
Tutorial:Creating a border around your entries

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.

8 Notes | Leave Feedback



Posted By:empyreal
Tutorial:Content table resize/realign



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.

9 Notes | Leave Feedback



Posted By:hourglass
Tutorial:Entries Transparency

The following override will allow you to achieve journal transparency with the following system styles:

Default
Generator
Notepad
Punquin Elegant w/ Sidebar
Refried Paper
Tabular Indent


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



The Disjointed style uses a different override, which is listed below.


GLOBAL_HEAD<=
<style type="text/css">
<!--
.altposter, .metabox, .necorn, .entrybox, .currbox, .swcorn, #secorn, .nav {
background:transparent;
}
-->
</style>
<=GLOBAL_HEAD



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

Leave Feedback



Posted By:hourglass
Tutorial:Shifting journal entries downwards

Free account users do not have the ability to add a banner image directly to their journals, so they will have to use a background and shift their journal entries downwards to achieve the banner effect. The following code will show you how to use overrides to shift your journal entries downwards.


GLOBAL_HEAD<=
<style type="text/css">
<!--
body {
margin-top: 300px !important;
}
-->
</style>
<=GLOBAL_HEAD



To change how far your journal entries are shifted downwards, change the highlighted value. The example will shift your journal entries downwards by 300 pixels.

To complete the banner effect, you will need to add and position your background image. A tutorial on doing this is available here.

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

Leave Feedback



Posted By:hourglass
Tutorial:Further customizing the background image

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



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.

Leave Feedback


Important Stuff
Official Communities