CSS: Styling Input Fields

CSS

I’m working on a project where I’m using CSS to add a border radius and background image to an input field. Background images are supported by all browsers, but border radius is only supported by Firefox, Safari, and Google Chrome.

Continue reading

Share

Vertical Text with CSS

CSS

I’m working on a new JQuery Plugin that requires the text to be vertical. This can easily be accomplished using CSS, but I found that the vertical text may appear differently in each browser depending upon the element that is used. I was able to display the text vertically in Firefox, IE8 (and IE7), Google Chrome and Safari. I looked at Opera’s CSS support and it doesn’t appear to support vertical text.

Continue reading

Share

CSS: Create List Style Color Different Than List Text

CSS

I wanted to use CSS to create a Unordered List where the color of the list-style (the bullet) was different than the list-item (the text). First I set the color for the Unordered List:

.certsBlock ul {
        color:#1AB7EA;
}
.certsBlock ul  li {
        list-style:square;
        margin-bottom:5px;
}

Then I add an additional element inside the list-item (the text) and change it’s color:

.certsBlock ul  li p {
        color:#fff; /*white*/
        margin:0;
}

Now I create my Unordered List:

<div class="certsBlock">
        <ul>
                <li><p>Item 1</p></li>
                <li><p>Item 2</p></li>
                <li><p>Item 3</p></li>
        </ul>
</div>

So the color of the list-style (the square bullet) will be a blue and the list-item text will be white. Easy enough.

Share

Relative Image Paths in Drupal

Drupal

I’m working on a project that uses Drupal and I wanted to add a few images to the home page.

First I created the folders files/images under the root directory. I then created the home page (Create Content->Page). When adding images to the home page, the file location is relative to the root directory:

<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

But when I created another Drupal page (a page other than the home page), the relative path for the image is different:

<img src="../files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

And when I created a page using Drupal’s Panels Module, the relative path for the image is once again relative to the root directory:

<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

Adding content to Drupal seems to be fairly straightforward, but I did struggle a bit as I tried to figure out the relative paths of images/files so I hope this helps anyone else who may be struggling.

Share

FlashScope – A Marketplace for Flash Components

Flash

I recently stumbled upon the site FlashScope.com. It is a website where flash developers can sell their flash files, components, etc. The site contains a lot of great components such as Image galleries, page templates, and games.

A few weeks ago, I started converting some of my Flash AS2 class packages to AS3. I am creating a few new Flash components/products and updating others that I created a few years ago. One of the Flash products that I am creating, I want to distribute a free version and a version that I can get paid for.

I don’t want to take the time to setup an e-commerce site (and promote it) just to sell a few inexpensive products, so I searched for an existing site that marketed Flash products. Flashscope.com seems to be the perfect site.

One other aspect of Flashscope.com that I like is that most of the products on the site are not expensive. While perusing the site, I don’t think that I saw a product that was over $30 (the average cost is probably $10). So, in the event that I don’t want to take the time to create a particular Flash product, Flashscope seems to have enough of a variety of products that I don’t have to reinvent the wheel – and I won’t have to cut deeply into my profits for a project.

Flashscope.com also has a free flash gallery that you can download. You can demo the gallery here. I think that I will be visiting the site quite often in the future.

Share

Blueprint CSS Framework

CSS

As a freelance developer, I am always looking for more work. The other day I was reading the skills required for a particular job and it mentioned that the candidate should have knowledge of the Blueprint CSS Framework. I had never heard of the framework before and was curious as to why one would need a framework for CSS. I consider myself to be an expert CSS designer, but I decided to check out this Blueprint thingy.

The website says that by using the Blueprint CSS Framework, I can cut down my development time and it eliminates the discrepancies across browsers. Sounds intriguing. After a bit more research, I found that Eric Meyer’s Reset CSS is incorporated into the framework. I have learned a great deal about CSS from Eric Meyer over the years:

Since I was beginning a redesign for a client, I decided to use the Blueprint framework as the basis for the effort.

Continue reading

Share