Tag Archives: Dreamweaver

How to target a specific row in a table via CSS

This week I needed to make use of another CSS Pseudo element which is – like many of its colleagues – a rather sharp tool in the CSS toolbox.

I was using the eMember plugin for a membership site and wanted tweak the signup form. By default it looks like this (I’ve already removed a rather ugly looking border from the table):

Screen Shot 2014-03-28 at 17.12.01

The site I’m working on will provide a free membership, but that’s a technicality that users can’t change – and let’s face it the entire line reading “Membership: Free” could do with vanishing.

Rather than hack core files, I was able to override it with a CSS tweak and make it disappear. The problem is that this particular row in the table doesn’t have a class or ID to reference it.

CSS Pseudo Element nth-child to the rescue: with it, we can target a specific occurrence of the table row element (in our case, the fourth one down). Here’s how:

This looks cryptic, I know – let me explain what’s happening here.

First we have an ID to target the specific area which is #wp_emember_regoForm. That’s the entire registration form though. In it, we drill deeper into table (which is the table shown above), and in it we have tr and td elements. td is a single cell, whereas tr is a whole row so we choose tr. Those are standard HTML elements.

But we don’t want to target every tr element in the table, we only want to target the 4th one down, hence we specify tr:nth-child(4). Had it been the second one, we would have said tr:nth-child(2).

Now all we do is set its display property to none, making it vanish without a trace. Here’s the final result – as if it never happened:

Screen Shot 2014-03-28 at 17.24.08

The nth-child selector can do other funky things, and you probably have seen it in action. Ever wondered how designers can make every other row in a table look slightly darker? Instead of a number, they use “odd” or “even”, targeting every other cell (starting with the first or second one):

nth-child even works with formulas, and of course you don’t have to target a table. Imagine making every other p tag disappear, or style every 3rd link in a different colour.

Have fun experimenting ๐Ÿ˜‰

How to replace and add HTML text elements with CSS

CSS-LogoIn some circumstances you may can replace HTML text elements via CSS. This is useful if you don’t have access to the source files, or if you want to override text in a Child Theme’s stylesheet.

There are several approaches to this conundrum, I’ll show you two of them. Both require that you have a class, ID or element that you can target. You then either amend more text to it, or replace the existing text completely via the CSS pseudo-elements before and after.

This isn’t always successful though as the original styling may not survive the surgery. Let’s take a look.

Option 1: The Visibility Hack

Here’s the easiest way to replace something. In this example I’ll target a class called myelement:

What’s happening here? First we grab hold of our element and set its visibility to hidden, making it vanish. Next we’ll add our own content before the original, thereby replacing it, and make it visible again.

Instead of “visibility” you can also try “display: none” and “display: block”.

If I had wanted to leave the original words and add something else at the end, I can do this:

Or if you’d like to insert something before the original I can use this:

The original styling will stay intact, however elements that follow the text (for example hyperlinks) may be destroyed when you replace text. Be as specific as possible when targeting text elements.

Option 2: The Out-Of-Vision Hack

A very creative approach is to avoid changing the visibility of existing text by moving it our of vision and then bringing it back. Sometimes changing attributes such as “visibility” or “display” can cause trouble when we try to restore them.

Here we’re doing just that:

This will completely remove my original text and replace it with “Welcome back!”, hopefully in the same styling as before (but then, it may not survive either).

CSS isn’t really made for this, but it’s powerful enough and works in many cases. Try it out!

How to auto indent and collapse source code in Dreamweaver

I keep forgetting where and how to find this feature. Turns out the Command menu gives us such features:

Screen Shot 2013-11-15 at 09.58.24

  • Commands – Apply Source Formatting (to Selection)

Applies the correct indentations to the entire file, or your selection only. It’s the equivalent of Xcode’s “Editor – Structure – Re-Indent”.

To manually move blocks of code, select the lines that need to be shifted, then hold down OPTION + CMD and press the square brackets to indent and outdent respectively. Not sure what these keys are on Windows.

Collapsing Code

On this note, it is also possible to collapse code that you don’t want to look at. It’s not as easy as using Xcode’s method collapse option. In Dreamweaver, you select the code you want to collapse, then hit one of the little triangles that appears on the left hand side.

Selected but uncollapsed code
Selected but uncollapsed code
Click on the triangle to collapse/uncollapse
Click on the triangle to collapse/expand

How to fade an element with CSS and jQuery

You can hide and show DOM elements in CSS as well as jQuery. But you can also combine the effects and create very elegant presentations with ease.

Let’s consider my own ID named #myown. Once styled to look ravishing, I’ll set it to disappear via this bit of CSS:

My element won’t show up when the page loads – but I can make it fade in like in the movies with this bit of jQuery:

Here I’ll grab a reference to #myown and then use .fadeIn to make my element visible.

We can chain other methods in the same call too. In this example I’ll do the same thing, but wait for one second until the fade in begins:

How to combine DOM elements in jQuery

Sometimes you want to add your own DOM element to an existing class or ID. For example, maybe you’d like to insert something like a header advert into an existing theme without having to hack core files. jQuery makes this possible.

You can either add your own element to the beginning or the end of an existing one by using .prepend() or .append() respectively.

In this example I’m adding my own #myown id inside an existing #header:

The first line gets a reference to my own content and stores it inside a variable with the same name. The second line takes this references and appends it as the last element inside the existing #header.

.prepend works the same, but would add my element as the first inside the existing one:

How to use a custom font in CSS

CSS-LogoDid you know that with CSS 3 you can load custom true type fonts and use them on your website?

It’s relatively simple to do too. First you define a new font face with a URL to your file, then you call it just like you would call a pre-defined font.

In this example I’m using the Old Typewriter font from http://www.dafont.com/old-typewriter.font. Once unzipped you’ll end up with a standard .ttf file that you can reference like so:

Now you can style your text via the font-family property:

Where to get custom fonts

There are several sites that offer true type fonts for download. They’ll work in Word and Pages too once installed on your local machine. Here are some of my favourite sites for finding nice fonts:

Note that some fonts have usage restrictions: Even though you may be able to download them, check the license and see if you’re allowed to use them, or find out if you must buy a license before you do.

Also note that once you upload the font to your server it can be accessed by everybody.

Compatible Font Types

You’ll be pleased to hear that CSS supports several font types to be used as described above:

  • TrueType (.ttf)
  • Web Open Font Format (.woff)
  • OpenType (.otf)
  • Embedded OpenType (.eot)
  • SVG Fonts (.svg, .svgz)

Source: http://www.w3.org/TR/2013/CR-css-fonts-3-20131003/

How to centre an image in CSS

CSS-LogoCentering text in CSS is relatively easy. All you do is add the “text-aling: center” property.

If you’ve ever tried this with anything that isn’t text you’ll have noticed that this approach doesn’t work.

Instead, display your class as a block, then set the margins to auto. You also need to specify a width so the rest flows around this fixed parameter:

This approach works with everything that is not text such as images.

Thanks to Bert Bos for this tip!

How to fix “Dynamically-related files could not be resolved” message in Dreamweaver

Adobe_Dreamweaver_CS6_IconWordPress is made up of over 70 files which may be called to display your site. Dreamweaver has a handy feature with which it lets you discover all those files.

Sometimes this works great – and sometimes you get the error message above. I was stumped by this when a site I was working on seemingly threw Dreamweaver overnight. Was was going on?

The secret is Permalinks.

Dreamweaver has a problem discovering and resolving related files if you’ve set Permalinks to anything other than the default. This problem has been around for a while, ever since the introduction of this feature in fact.

Continue reading How to fix “Dynamically-related files could not be resolved” message in Dreamweaver

How to define Javascript Behaviours in Dreamweaver

Adobe_Dreamweaver_CS6_IconDreamweaver keeps on giving – and the more I’m looking into it, the more I like how it can support me. Today I discovered that you can define Javascript Behaviours without writing a single line of code.

This can only be good news – especially if Javascript is one of those things that always looks a bit scary.

Here’s how to make Dreamweaver create code that can hide an element, and bring it back.

Continue reading How to define Javascript Behaviours in Dreamweaver