If you have problems starting up your photoshop version 6.0 and later (cs3 is version 10.0 btw) and photoshop start hanging on at the splash screen at “Reading preferences” then your custom preferences for photoshop is corrupt or deleted in a mysterious way. To fix that you can easily delete your custom preferences and let photoshop use the default preference.

Example:

1. Press and hold Alt + Ctrl + Shift while starting up photoshop. A popup window will come. (Mac: Command, Option, Shift)
2. You can also simply search your hard drive for a *.psp file and delete it. Somethinglike “Adobe Photoshop X Prefs.psp”.
3. Under Win 2k/XP the preference file will be found at:
   %windir%\Documents and Settings\~username\Application Data\Adobe\Photoshop\[version #]\Adobe Photoshop [version #] Settings

[NOTE: You need to set Window's Explorer Options to "View Hidden Files and Folders" to display the Preference file]

Source: adobeforums

Earlier I posted about this cool wordpress plugin. The light box plugin especially for wordpress. I just found another similar plugin for hmtl pages – (also for other web extensions I think). The Slimbox.

Example page: A cool portfolio for your website

Slimbox versus Lightbox:

Features:

From a functional point of view, Slimbox has the following added features compared to the original Lightbox:

* Slimbox is ready to launch as soon as the document is ready. This means that you don’t have to wait for all images of the page to be loaded before clicking on a link launching the Lightbox effect.
* The left and right arrow keys can be used to navigate through images, and the ESC key can be used to close Slimbox (Warning: in Mozilla browsers, the ESC key is also used to stop GIF images from animating).
* The dark background overlay can be clicked anywhere to close Slimbox, even on the parts located on the left and right of the image.
* The script is more robust; for example you can try to start-stop Slimbox very quickly to interrupt the animation then resume it and you won’t notice any bug like in the original Lightbox where sometimes the animation stops or the captions are wrongly sized.
* Slimbox temporary hides flash animations and other embedded videos while it is open to avoid display bugs in some browsers.
* Slimbox can be launched from the traditional image links inside the page like the original Lightbox, but also directly from a Javascript call using a special method.

Like they say it, my opinion the slimbox works exactly like the lightbox.

The differences from the lightbox:

* The code has been entirely rewritten with efficiency in mind for the mootools framework instead of the huge Prototype/Scriptaculous. The script itself is as tiny as 7kb (uncompressed).
* The Slimbox CSS are simpler and 100% valid (no more CSS hacks). Also, all images used by Slimbox are specified in the CSS instead of the Javascript so it is easier to style.
* Slimbox does not use the 1 pixel transparent gif image needed by Lightbox.

As you can read, its alot lighter then the lightbox – Can this be true? Slimbox is more lighter then THE LIGHT BOX? Why do they call it light box? Got it?

The tool required:

Slimbox 1.4 requires the mootools framework, version 1.1 or more recent. Because mootools is modular, you can make your download smaller by only downloading the modules your scripts are actually using. Here are the modules required by Slimbox:

* Class: all
* Native: all
* Element: Element.Event
* Window: Window.DomReady, Window.Size
* Effects: Fx.Style, Fx.Styles (optionally Fx.Transitions)

1 – place this in the header tag:

2 – inlude the script in the header tag aswell:

3 – Customize your stylesheet with the slimbox.css:

4 – activate the plugin:

Example:

<a title=”my caption” rel=”lightbox” href=”image-1.jpg”>image #1</a>

Mutiple:

<a rel=”lightbox[atomium]” href=”image-1.jpg”>image #1</a>
<a rel=”lightbox[atomium]” href=”mage-2.jpg”>image #2</a>
<a rel=”lightbox[atomium]” href=”image-3.jpg”>image #3</a>

Display 1 image:

Alternatively, you can also launch the Lightbox effect using Javascript to display a single image. Just call the following method, passing the URL of the image as first parameter and optionally a title as second parameter:

Lightbox.show(’images/image-1.jpg’, ‘Spheres in construction’);

Thankz to this post I can use a transparent background over a wallpaper. Without cutting anything in photoshop.
Click here to see it:

http://www.rofaldez.com/media/transparent-html

1. The only thing you need is a wallpaper
2. A transparent white background with a png extension. I cut it up using photoshop. Give the white background a tranparency of 32%. Export it as a PNG extension and enable the transparent option.
3. Source code in your stylesheet:

html {
overflow: -moz-scrollbars-vertical;
height:100%;
}
body{
height:100%;
margin-left: 0px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
}
.maintable {
width: 600px;
height: 300px;
background-image:url(images/cubic-background.jpg);
background-repeat:repeat-x;
vertical-align:middle;

}

.trans_box2 {
font-family:verdana;
font-weight:bold;
padding:40px;
margin:30px;
border:solid 1px #555;
/* Mozilla ignores crazy MS image filters, so it will skip the following */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/35-transparent.png’);
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box2[class] {
background-image:url(images/35-transparent.png);
vertical-align:top;
color:#ffffff;
}

4. Enjoy your lovely background as it is with a transparent background in front of it with your text.

Did you ever had the problem viewing webpages without scrollbars in firefox?
example of webpage on local machine viewed in firefox: website johec

Here is the style sheet structure how to fix firefox with sidebars for your html page.
The body tag gives the browser a 100% view in height and margin of 0px.

html{
overflow: -moz-scrollbars-vertical;
height:100%;
}

body{
height:100%;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

I just learned my first div <div> tag to post a iframe lookalike webpage.

You just need to place the <div> tag in a <td> tag. For example:
1. Make a table in you html page, it will look like this, with a width of 520 pixel.

<table width=”520″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

2. Place the <div> tag under a <td> tag with attributes (width=”414″). Like this. The width of the <div> tag (width:414px) should be less then the <td> tag. Otherwise the content will be much wider, you will make the table expand. The height of the <div> tag depends how big you want your window be. Should it be a 500pixel X 500 pixel. Make sure the <div> tag height and width be the same but less wider then the <td> tag.

<td width=”414″ valign=”top”><div style=”width:414px; height:355px; overflow:auto;”> your content</div></td>

3. Final:

<table width=”520″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”414″ valign=”top”><div style=”width:414px; height:355px; overflow:auto;”>
your content
</div>
</td>
<td> </td>
<td> </td>
</tr>
</table>

4. Example: