bioneural.net » css

Geo Mashup implementation guide

Bruce — Sun, 21 Sep 2008 23:06:46 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

Geo Mashup is one of my favourite WordPress plug-ins (and no, that's not just because it adopted the Geotag Icon). It neatly integrates geographically-relevant blog posts with a custom Google Map displayed within your own site. The Maps API in turn allows those willing to dirty their hands with a little JavaScript the option to pull in geotagged content from external sources, including photos (e.g. from Flickr, Panoramio, Picasa Web Albums), content from other blogs (via GeoRSS feeds), and placemarks from Google Earth (uploaded KML/ KMZ files, even with network links). What follows is an implementation guide, sharing some usage tips and the code used on bioneural.net. The code given here applies to Geo Mashup 1.1.1 and WordPress 2.6.2. Geo Mashup 1.2 was released on 19.03.09. Some of the code here may require modification. Installing the plugin Download Geo Mashup here, expand the ZIP archive and upload the geo-mashup directory to /wp-content/plugins/ on your web server. Log in to WordPress as Administrator and activate Geo Mashup from the Plugins tab. Once active there will be a new Geo Mashup tab under Settings, and you'll need to visit this to enter your Google Maps API key (if you don't yet have one, click the Get yours here link). Don't worry about the other options at this stage. Creating a map page The tag reference gives you the choice of two types of tag to use with Geo Mashup. Shortcode tags are added to posts or pages on a case-by-case basis. Template tags on the other hand involve adding ...

Web developer widgets

Bruce — Fri, 11 Apr 2008 21:42:29 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

Mac-based web developers may yet find a use for Dashboard. SeeSS is a CSS property reference detailing inheritance, CSS compliance, Safari support, possible and default values, examples, plus an informative description [screenshot]. PHP Function Reference provides offline access to the PHP manual, a cheat sheet, and an interactive date formatter [screenshot].

How to safely inject CSS3 using jQuery

Bruce — Thu, 14 Feb 2008 14:14:56 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

So you fancy using some of that über-cool draft CSS3 that WebKit browsers can handle, such as text shadows, drop shadows, opacity and rounded corners? But at the same time you want to present only valid CSS to the W3C CSS Validator? It's a dilemma, but it is possible to have your cake and eat it too—albeit by hiding CSS in JavaScript and thus cheating the Validator. However, there is even a precedent for doing so. During the course of researching my review of the various ways to make rounded corners, drop shadows, and gradients I learned more about CSS3 and the jQuery JavaScript library. They just needed introducing to one another. Text shadows, drop shadows, and round corners in Safari 3 A historical precedent The concept of tricking the Validator to pass CSS that is incorrectly implemented or proprietary and not part of the W3C spec is not new. Many web developers have found it necessary to employ various hacks in their CSS to accommodate differences in the way browsers interpret the rules. Others have used proprietary code to overcome limitations or quirks in the way some browsers handle certain content. For example, the following in your document head could be used to fix IE6's lack of handling for transparent PNGs and mis-handling of the box model, floats, overflow, italics, etc.: It's a hack: there's no other term for it. In the above example we're using proprietary conditional comments and filters to fix proprietary cock-ups. Seems fair, doesn't it? So, if we can hack our ...

Corners, gradients and shadows with jQuery

Bruce — Wed, 13 Feb 2008 15:36:40 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

Previously we looked at moving to jQuery, and then at the best way to do corners and gradients using a variety of techniques (Part 1). In this follow-on article (Part 2) I want to share how jQuery can be extended for similar cornering, gradient, and drop shadow visual effects. Although my JavaScript ability is not much beyond "cut and paste" the idea here is to share how easy it is to create these effects for other folk possessed by similar (in)ability. Situation recap In Part 1 we explored various ways to make rounded corners, comprising one or more of JavaScript, CSS, Flash, and SVG. Ditto for drop shadows. Implementing a gradient was restricted to the use of background (or inline) images, or to SVG. There are a few more tricks we might try for gradients: We could load a transparent PNG as a CSS background and vary the fill colour on the container to allow for a multitude of colour-graduated boxes without further image editing (see this ALA article); Unfortunately the CSS 3 draft as of this writing doesn't include background gradients, but you might be able to fake it using border-color; We could use JavaScript effects libraries. It turns out we can use JavaScript to create our corners and drop shadows too. There's also a plugin for using curvyCorners with jQuery that more than halves the standalone curvyCorners code size. Extending jQuery While there are some basic effects (hide, toggle, slide, etc.) and manipulation options in the jQuery core API, jQuery UI is a bolt-on library of ...

The best way to do corners and gradients

Bruce — Wed, 06 Feb 2008 14:36:17 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

Rounded corners. Yes, they may be a "Web 2.0" fashion fad, but it has been clearly documented that they're a lot easier to make than square ones. As part of my overhaul of bioneural.net I've been optimizing much of the code "under the hood", meaning a lot of the changes aren't even visible. Re-evaluating how things are put together, and considering how they could be done more efficiently or otherwise improved is a valuable exercise—that it scratches a perfectionist itch is an added bonus. In this article I look at a variety of methods for creating boxes with rounded corners and gradients. Yep, it's a showdown! The traditional approach The well-established method of adding corners or gradients to an element is to use multiple background images. Depending to some extent on your content, this is typically impossible to achieve without the use of non-semantic extra mark-up. For example, this box uses to extra and empty divs: Willkommen! Welcome! Willkommen auf der Projekt Koru Seite, wo Simone & Bruce die praktischen Aspekte eines Jahres in Neuseeland mit Euch teilen wollen. Eine Einführung findet Ihr hier zusammen mit einer Erklärung warum wir das Koru als Symbol unserer Reise gewählt haben. Welcome to Project Koru, where Simone & Bruce share insight into the practicalities of organizing a year in New Zealand. You can find an introduction to the project here together with an explanation of why we chose the koru as the symbol for our journey. Three gradient images (2 having one rounded corner each) could then be loaded ...

IE6, italics, and overflow issues

Bruce — Fri, 01 Feb 2008 14:12:48 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

Since I began revamping my site (mostly under-the-hood) at Xmas I've tracked down and eliminated a number of long-standing bugs. I'm now satisfied that my site renders acceptably using Firefox, Safari, IE6 and 7, and across both my primary and alternate styles. Thankfully the majority of bugs I've encountered have been well described and have had solutions documented. But it's matching your issue to the bug description that's the hard part. One particular IE6 bug took me a while to identify because it seemed so random: some pages were inexplicably wider than the fixed-width of 780px by 3px. The problem Because my header image is exactly the width of my page container, the effect of the expanded container was readily visible in IE6: Playing detective Starting with an afflicted page I deleted content first from the sidebar, and then from the main content area, adding it back one chunk at a time to see which element was responsible for causing the anomaly. By so doing I narrowed it down to one particular text-only paragraph. The mark-up was perfectly valid and contained no floats, padding, or borders that IE6 loves to choke on. Firefox's Web Developer Extension has a topographic overlay which is extremely valuable for checking element widths (especially when combined with the new Dimensions "laser" in the indispensable xScope, now at v2.0). That looked fine, but the breakthrough came when I tried outlining divs in Internet Explorer 7 with the Developer Toolbar. I noticed that italics rendered outside the div outline: Sure enough, now I ...

bioneural.net site preference panel revisited

Bruce — Tue, 22 Jan 2008 20:06:51 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

The first version of my site preference panel for WordPress needed lots of JavaScript for the toggle (Proto.aculo.us), more JavaScript to switch styles, and still more JavaScript to change text size. Version 2 still uses JavaScript for the toggle effect—but no additional load—since jQuery is already utilised by K2. The rest is accomplished using server-side PHP, and the revised 3-column panel layout makes use of more recent CSS know-how. I've tried to modularize the preferences panel as much as possible, but some simple template editing is still required (at 4 points). It is optimised for K2 (tested using RC3 and RC4) and although I haven't tested it with other themes (that's your job!) I don't see why it couldn't be used (*Some tweaking may be required. Batteries not included.) Get the files Let's get it done, then come back to the how and why if you're interested. Download the files to create your own preference panel as siteprefs.zip, available here. Expand the archive and upload the folder "siteprefs" into your K2 main directory: /wp-content/themes/k2/siteprefs/ At this point you may also want to download and activate the Theme Switcher plugin if you plan on allowing your audience to change the WordPress theme they see on a per-user basis (storing their preference in a cookie). Support for the plugin is built into the preference panel (see features, below). It's yours to play with and customise; all I ask is that you retain the little "i" icon with it's link back to these instructions. Feedback and suggestions for ...

From Proto.aculo.us to jQuery

Bruce — Sun, 06 Jan 2008 18:31:03 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

As I recently noted, both WordPress and K2 have migrated from using Prototype plus script.aculo.us to using the jQuery JavaScript library. Prototype is a JavaScript framework, including a library of functions used to build Ajax applications. It's best buddies with script.aculo.us, an add-on JavaScript effects library that extends the capabilities of the former. So where does jQuery fit in? The winds of change WordPress hasn't altogether dropped either Prototype or script.aculo.us. As of version 2.3.2 they're still bundled in wp-includes/js/, but the Codex notes that since version 2.2: Switched to jQuery for core JS, which is lighter and faster. I'm no programmer, but I do understand that loading a smaller function library is kinder on your bandwidth and browser, and that writing fewer lines of script to call those functions is kinder on web developers. K2, on the other hand, stopped bundling Prototype and script.aculo.us as of revision 382. This popular WordPress theme now does all its Ajax magic—Live Search, Rolling Archives, and Live Comments—via jQuery. Loosing weight As of this writing Prototype (1.6.0.1) weighs in at 121 KB. The six core files that make up script.aculo.us 1.8.1 (sound.js and unittest.js are optional) also happen to total 121 KB, making a combined size of 242 KB. If I could therefore use jQuery 1.2.1 (at 45 KB) to achieve the same JavaScript-mediated effects, I'd be using around one fifth of the code libraries I was previously loading. But it's worse than that, because if I retained Proto.aculo.us for custom effects and loaded jQuery for K2, I'd be wasting ...

Overcoming CSS Validator changes

Bruce — Sat, 05 May 2007 08:46:41 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

A quick follow-up to this post in which I fell victim to the moving CSS validation goal-post. Do you include a link to the W3C Validator on your site to check your mark-up and CSS for standards compliance? If so you probably tested your code against the CSS profile that was in vogue at the time. But what happens when the W3C release a new profile? They upgrade the Validator—and your CSS may go from green tick to red cross! Here's a quick tip that avoids having to re-write any CSS, but at the same time keeps you from seeing red. Originally when I created footer.php for my site I included the following CSS validation link: CSS My pages were valid CSS 2.0. Life was good. But something changed; the W3C began developing CSS 2.1. And I began to see red: The W3C had started to use the draft CSS 2.1 profile as the default for its Validator. The property text-shadow isn't in the 2.1 draft, but it was there in 2.0. I happen to like this effect and wanted to retain it, so the trick is to specify that your website is complying with a specific CSS profile. This is easily accomplished by appending that profile to the URL of the link to the website you are checking, like this: CSS Now, that's better: It's a small thing, but too many little annoyances can be overwhelming!

Details on CSS changes for IE7

Bruce — Mon, 23 Oct 2006 19:33:18 +0000

From http://www.bioneural.net doi:tSglPpAB7a8nfM :

IE7 is being pushed via Windows Update. The IE7 development team document bugs fixed (noted on positioniseverything.net & elsewhere), & extended compliance/ new features from the CSS specs. The IE Web Developer Toolbar may assist debugging your site for IE7.