Image Link on a Block in Drupal 7
The Image Link module doesn't appear ready for Drupal 7, so if you need a workaround for making a block image an active link, you can use CSS. Basically, you place an invisible link field overtop your block image using CSS.
- You'll need the 'Link" module - install that
- Also, install the "node block" module to turn your node into a block
- Create a new link field in your content type and indicate the URL you wish to link to
- Make that link field the top level field, above your image field
- Use the following CSS:
.field-your-custom-name a {
position:absolute;
top:0;
background-image:url("/sites/all/themes/palmsdown/images/blank-im.png");
background-repeat:no-repeat;
width:300px;
height:160px;
text-indent:-99999em;
display: block;
}
CSS explanation: The text indent hides the link text; the width and height is the size of the image; unfortunately for IE, a transparent PNG is required for an active link.
simply the easiest JQuery tooltip ever
okay this is really the easiest and fastest way to implement a tooltip...
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
Some Photoshop post-edit photo tips
Some tips I jotted down from watching Chris Orwig's Creative effects videos at Lynda.com...
HDR toning color effects
1. dupe image
2. image/adjustments/HDR toning
3. drop saturation, add edge glow strength
4. copy image on-top of original and add soft-light blend
5. add curves layer specific to HDR layer to adjust contrast
Hue/Sat layer
1. add hue/sat layer and adjust soft-light blend mode on hue/sat layer
2. add color balance layer on top...
2. add color balance layer on top and adjust colors for extra effect
Apply Image
1. copy image layer
2. Image/apply image, blending mode is soft light and experiment with RGB channels
Drupal Webform components missing?
When using Drupal's Webform module, you may find that the form component tabs are missing when you need to edit form fields. This probably has to do with the tabs visibility in your theme. Since I don't use tabs in my theme and rely on the 'Block Edit' module, I found myself struggling to get to the webform component fields.
A solution to this is simply change the administration theme to Garland and specifically the "Use administration theme for content editing" checkbox. This then uses Garland for your webform page edits (activating all the tabs). You can them switch back to your main theme once you've modified your form fields.
background image extending browser window
CSS for large background image that extends (grows) with window:
body img.background {
z-index:10;
}
body img.background {
left:0;
min-width:1000px;
overflow:hidden;
position:absolute;
top:0;
width:100%;
z-index:-1;
}
in the HTML:
<img alt="" class="background" src="image.jpg">
Not sure what the advantages/disadvantages are with having image referenced via HTML code rather than CSS bgnd, but effect looks interesting:
http://cayena.es/
Watch out when using background colors in Flash
Modifying the background color in HTML of a Flash embedded SWF will change the Flash colored background. When working with Flash files, if you want the background color to be retained, it is best to create a background layer and make that a color, rather than using Flash' background color picker.
JW player IE video problem solved
If you are using the JW player, you may notice in IE 8 that the video stalls while the audio continues to play. There is a fix for this.
By adding the following in the default code "?' + Math.round(1000 * Math.random()),"
it forces a random number and so forces a reload.
Don't know all the technical aspects of how this works, but it seems to solve the IE problem.
<script src="http://autopilotcashbegins.com/swfobject.js"></script>
<div id="mediaspace"><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player Here to Watch This Video</a></div>
<script type='text/javascript'>
var so = new SWFObject('http://autopilotcashbegins.com/player.swf?' + Math.round(1000 * Math.random()), 'mpl', '470', '320', '9.0.124');
so.addParam('allowscriptaccess', 'always');
so.addParam('allowfullscreen', 'true');
so.addVariable('file', 'http://autopilotcashbegins.com/youtube.flv');
so.addVariable('autostart', 'true');
so.write('mediaspace');
</script>
Vertically aligning text using CSS
To vertically align text-based elements, use the line-height property, which specifies the amount of vertical space between lines of text. Simply match the line-height with the height of the element.
h1 {
font-size: 12px
height: 100px;
line-height: 100px;
}
Bluehost sub-directory to main domain
How to make a sub directory (or sub folder) act as the public_html for your main domain on a Bluehost server?
Below is the code for the .htaccess file on the root level above the subfolder:
Also… Drupal settings file needs to indicate the URL name as well.
# Bluehost.com
# .htaccess main domain to subdirectory redirect
# Copy and paste the following code into the .htaccess file
# in the public_html folder of your hosting account
# make the changes to the file according to the instructions.
# Do not change this line.
RewriteEngine on
# Change yourdomain.com to be your main domain.
RewriteCond %{HTTP_HOST} ^(www.)?yourmaindomain.com$
# Change 'subdirectory' to be the directory you will use for your main domain.
RewriteCond %{REQUEST_URI} !^/subdirectory/
# Don't change this line.
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Change 'subdirectory' to be the directory you will use for your main domain.
RewriteRule ^(.*)$ /subdirectory/$1
# Change yourdomain.com to be your main domain again.
# Change 'subdirectory' to be the directory you will use for your main domain
# followed by / then the main file for your site, index.php, index.html, etc.
RewriteCond %{HTTP_HOST} ^(www.)?yourmaindomain.com$
RewriteRule ^(/)?$ subdirectory/index.php [L]
- 1 of 2
- ››
Flickr recent photos
