Tag: links

CSS Resources and Tools

Here’s a small collection of resources and tools for learning CSS, Cascading Style Sheets. It’s through links like the following that our collective CSS skills are improved. Read more, learn more.

Links for CSS

To get an idea of what CSS can do for your site visit the CSS Zen Garden, a site for inspiration in designing with CSS. Studying the style sheets for the different themes presented here can teach you a lot about style and positioning.

Introduction to CSS by Dave Raggett at W3C. Even though it’s a bit dated this is a good place to start to see how CSS works. Get the basics about linking to a separate style sheet and setting link colors.

CSS Reference and Tutorial from the Mozilla Developer Network could be a one-stop shop for learning CSS. Pick the getting started tutorial if you’re not very familiar with using style sheets. If you already know the basics, you might want to bookmark the exhaustive CSS reference. It has browser support tabulated for all the CSS 3 properties.

SitePoint CSS Reference uses categories to organize pages into CSS-properties, CSS-selectors, at-rules, styling concepts and layout examples. Play around in the “live” area (you get there by selecting the “Play” tab) where you can post CSS rules or HTML markup in the left pane of the window and see the immediate effects in the right pane.

Interested when a particular feature showed up in the history of CSS? Check the CSS Properties Index for an alphabetical list of properties. Properties are tabulated for CSS1, CSS2, CSS2.1, and CSS3. Clicking on any property name will bring you a definition of that property along with its acceptable values, which elements it can be applied to, and whether it can be inherited.

Font stacks might be of interest in studying site designs and learning the underlying CSS. Each font stack is like a mini-library. Learn how to create your own font stack through examples of Eight Different Font Stacks. Extend the idea to include basic page design via 960 Grid, a CSS library.

Great tutorials on specific CSS topics include:

Once you start writing your own CSS you’ll want to know if everyone can see your site the way you intend it to be seen. Validating CSS will assure that your style sheet is valid and therefore understood by browsers that people use to see your site. Check your CSS style sheets with the W3C CSS Validator. Tip: change profile to CSS3 and change vendor extensions to warnings, until CSS3 properties are more widely in use.

Keep reading, people. It’ll make you better at what you do.

WordPress Plugin Review: Collapsing Blogroll

Last time, I wrote about a new WordPress plugin, at least new to me, that is, Collapsable blogroll. The author let us know that there is a newer version with a slightly different name, Collapsing Blogroll.

Here’s what I did to update from Collapsable blogroll to Collapsing Blogroll:

  • Downloaded collroll, unpacked the zip file, ftp’d the folder ‘collroll’ and its contents to wp-contents/plugins/.
  • Logged in to the WordPress dashboard and edited the links page where I had used the older plugin, Collapsable blogroll, to create a list of links from the blogroll. I changed <!–catlinkspage–> to [collroll] and saved the page.
  • From the Manage Plugins page I deactivated Collapsable blogroll, then activated Collapsing Blogroll.
  • When I visited the links page, all the links were hidden, or collapsed, and the words Expand | Collapse were visible. Clicking on expand showed all the links. (I’m not sure the words expand/collapse need to be there as you can set the links page default to either expanded or collapsed.)
  • Once I knew that the new plugin worked as expected, then I deleted the older plugin.

Improvements in the plugin allow you to change the appearance of your links page from the WP dashboard. Visit the new Collapsing Blogroll page that is listed under Settings in your WP-admin.

From there you can select a title background color by clicking on the white color swatch. A color picker comes up that lets you select whatever color you want by picking it from the rainbow or entering the RGB/#hex values. If you uncheck the box “use this color” next to the title background, then there is a transparent background, or no background color depending on your point of view.

Also featured in the newer plugin, you can select the order of categories or links as either alphabetical or one of your own choosing, which is especially useful if you use a different plugin to order your links. Since I’d been using “My Link Order” on a site where the Collapsing Blogroll was installed, this feature was a relief to see.

From the settings page you can specify the width of the blogroll div, in px or %, so your link list can fit in the sidebar or other space you’ve created.

And finally, indicate whether you’d like the initial link list to be collapsed by default, or not. Make sure to save your new settings.

Collapsing Blogroll will be really helpful for those sites where there are many links, especially when the list of links changes from time to time. Works in WP 2.8.4! Thanks again, Romain!

WordPress Plugin Review: Collapsable Blogroll

A client’s site was being updated and I needed to find a way to capture their blogroll into a page of links. Instead of manually inserting links and titles into a new page, I searched for a WordPress plugin to do the work for me. It would be desirable to have the links page be automatically updated when the blogroll was updated.

It took a little bit of searching to find the plugin called Collapsable Blogroll, but it does exactly what was needed. Downloading the file collapsable-blogroll.0.1.zip, unzipping it, uploading it to the /wp-content/plugins/ directory, and activating it via the wp-admin page went smoothly. No surprises there.

All you have to do is place <!–catlinkspage–> where you want your blogroll list of links to appear. It’s that easy! Put your links inside a post or a page — it’s your choice. By default the link list is separated into the categories of your WP blog and each list is shown in the collapsed state. Just click on the category name and the list will expand to show all your links.

I like the fact that you could add a new link to your blogroll via the wp-admin and it would show up right away on the links page.

The Collapsable Blogroll plugin works with WordPress 2.8. Thanks, Romain!

WordPress Plugin Review: Page Links To

The other day I was looking for a way to have a WordPress page redirect to an external page, one that is not on the same domain as the WP blog. A quick search for ‘links page’ lead me to a great little plugin, called Page Links To.

Page Links To has basically one purpose. According to the author you can “make a WordPress page or post link to a URL of your choosing, instead of its WordPress page or post URL.” Exactly what I was looking for!

Like most other plugins downloading the page-links-to.zip file, unpacking and uploading the plugin folder to the /wp-content/plugins/ directory, and activating the plugin was simple.

Then, all you have to do is make a new WP page by entering its title and leaving the content blank. Scroll down to the Page Links To widget and enter the URL that you want your page to link to. Here, you can choose whether the redirect is 302-a temporary move, or not. The default is 301-permanent move. That’s it!

Verify that all went smoothly by clicking on your page and you’ll see that it links to the outside URL. By the way both WordPress pages and posts can point to the URLs that you like. Might be great for resource pages or links to related sites.

Page Links To works with WordPress 2.8. Thanks, Mark!