Quick Tip: How to Make Tweet Embeds Responsive

Twitter embeds were introduced in WordPress 3.4, allowing you to insert tweets by pasting a link to that tweet on a line of its own, in you post or page content. However, many responsive themes (including mine) resulted in broken layouts on narrow screens, since the embedded tweet will get a fixed width of 550 pixels. After a little poking around, I found an easy way to solve this with some CSS magic:

.entry-content .twitter-tweet-rendered {
    max-width: 100% !important;
}

Where entry-content is the class name of your content wrapper, which can be different for different themes. This will make sure that the rendered tweet block will scale along with its container. Obviously, if your existing theme is not responsive, this trick will probably not work, try Twenty Eleven ;)

You can also try stripping out the width argument by filtering on oembed_result like Otto mentioned but I think CSS is the better way to go. Tested on Android and iOS 5.

Update: Created a core ticket for Twenty Eleven and Twenty Twelve — #21680.

Custom CSS Now with CSS3 Support on WordPress.com

Who said all WordPress.com blogs have to look the same? Who said you cannot customize your theme unless you’re running self-hosted WordPress? WordPress.com had the Custom Design upgrade for quite some time now, and now it’s suited and booted with CSS3 support: animation, gradients, shadows, transforms and a bunch of other stuff.

You can even make your non-responsive theme into a responsive one, with media queries! Perhaps then share your CSS via the forums with the other “dot com” members.

The CSS editor itself has been upgraded too! Now that we’re using Ace, it’s just like having a desktop code editor in the browser: syntax coloring, auto-indentation, and immediate feedback on the validity of the CSS you’re writing are just a few of its features.

The WordPress.com Custom CSS plugin for self-hosted WordPress users might be getting the updates too, although that’s less exciting, since you were able to edit CSS anyway. A good use case, however, is a multisite environment with no access to sources — the Safe CSS plugin will make sure nobody’s doing anything fuzzy ;)

External Links with CSS3 or jQuery

Here’s how I marked external links using CSS throughout my blog with a few simple selectors one of which is a level 3 meaning this solution will probably fail in some version of IE and other browsers with limited CSS3 support.

a {
    background: url('http://kovshenin.com/core/wp-content/themes/publish/images/external-link.png') right center no-repeat;
    padding-right: 14px;
}

a[href^="http://kovshenin.com"], a[href^="/"], a[href^="#"] {
    background: none;
    padding-right: inherit;
}

The first one selects all the links on the page, gives them the external link icon and a padding on the right. The second selector fetches all links that begin with my domain name, relative links and empty links and then removes the background and padding set by the first selector.

This solution might need a few tweaks depending on your linking structure and perhaps a fallback stylesheet for browsers with no CSS3 support. Another option can be jQuery, somewhere in your head section after jQuery has been loaded:

jQuery(document).ready(function($) {
    $.expr[':'].external = function(obj) {
        return !obj.href.match(/^mailto:/) && (obj.hostname != location.hostname);
    };
    $('a:external').addClass('external');
});

Which would add an external class name to all links where hosts don’t match the current host, and then use the a.external selector to style your external links as shown in the example earlier. This solution will “blink” though because jQuery has to first load and initialize before it can read all the contents of your page. It’s a matter of milliseconds so most people won’t mind. Enjoy!

Driving the 960 Grid System

CSS frameworks are unflexible, overbloated and confusing. Whoever said that, never used a CSS framework, or at least the 960 Grid System. I used to think that too, some time ago, but I did use the 960 Grid System to draw my templates. I didn’t care about the CSS, the columns, etc. All I used were the Photoshop templates with a preset grid of 960 pixels, which was pretty convenient for designing purposes. I had no idea that layouts performed in such a grid could be sliced that easily.

Driving the 960 Grid System

Maybe I didn’t take enough time to read all the info about the 960 Grid System, maybe I was just afraid of CSS frameworks, or maybe I thought that CSS is so simple that there’s no need for any pre-written code except for the Reset CSS. A few days ago I decided to take one more look at what the 960 grid really is, how it works, and why people like it. I found a couple of tutorials which explained the system, mostly in text and images, but I was too lazy to read, so I searched for some videos.

I instantly came across an awesome post by Jeffrey Way on NetTuts, written back in January 2009, called A Detailed Look at the 960 CSS Framework. It’s a short and informative screen cast, where Jeffrey explains what CSS frameworks are, why we should use them and shows an example layout done with the 960 CSS.

After viewing the video, I decided to try it out, of course on my own blog. I took the old layout and redone it using the grid system. Not sure about all the regions on the website, but everything now seems to work as expected. The layout didn’t change much, maybe a few pixels in the width and the sitemap, which I’m quite comfortable with. Tested in IE, Firefox, Chrome and Safari, seems okay.

One thing I didn’t expect is that the grid system breaks whenever you add a 1 pixel border around a grid block, or maybe it’s just me who’s unlucky, and their Reset CSS is quite awkward, or maybe I’m just used to others. Anyways, for simple 960 pixels layouts, the 960 Grid Systems is perfect, for easier, faster and browser-friendly development, which is why I recommend it. Feel free to share your thoughts on CSS frameworks in the comments.

Update: Here’s an awesome video by SitePoint called CSS Frameworks: Make the Right Choice:

CSS Tricks – Playing With Position: Relative

For some of you this post might be obvious, but I’ve been working with XHTML and CSS for years and haven’t figured out you could do such magic! We’ll be talking about the CSS Position property and it’s combinations with the Overflow property.

Let’s talk about each of these properties individually first. The position property could have five different values. I’m not going to explain each of them, as you can read about CSS positioning at W3Schools. We’ll be talking about one of the most useful – relative value.

I don’t see relative being used that much, instead people prefer absolute positioning, especially if we’re working on a left-aligned fixed-width layout. I agree, this is bullet-proof when your website is static. But what happens when you add that extra bit of text at the top? You drive to your stylesheet and adjust the top parameter every time something moves. Then again, absolute positioning is treated differently in some browsers, especially IE.

Relative Positioning

So why isn’t relative being used? Well there may be plenty of reasons for that, but personally I loved it when I had to overlap something, especially if it was being done vertically. Horizontal overlapping brings issues.

Perhaps the most irritating thing about relative positioning is that when you move it around, the block sort of remains in it’s own place but it’s content is moved. I’ll try to illustrate this in pictures. Let’s look at the following example:

CSS - Position: Relative

Three fixed-width blocks, floating left, everything seems okay. Now let’s try to move the green box outside of our content block using position: relative. Here’s what happens:

CSS - Position: Relative

We were really hoping that the red and gray blocks follow the green one, but meh!

Overflowing

This is where overflow comes in. W3Schools has got some specifications and examples on the overflow property too so I won’t be explaining the values. One interesting thing about overflow is that you can specify visible which basically means that all content that didn’t fit inside the box, is still visible outside of it.

Yes, may seem useless at first, but not in conjunction with the width: 0 property! This means that we could tell the browser that our block is 0 pixels wide, but using the overflow: visible property still display whatever is in the block!

CSS - Position: Relative

Alright, that seems to have done it. But what is it actually for? Well let’s try to make a little list here:

  • I’ve seen some javascript and CSS drop-down menus which look very sweet, but they’re using absolute positioning and counting pixels via javascript. Now that’s strange!
  • You sometimes need to place a block outside of the one it is actually written in without loosing that extra space (as in the examples above).
  • What if you need to place a block into another one, if in HTML it’s not supposed to be there? (example below)

Quick example – you have a big cycling picture, sort of a slide show in the middle of your page. Now that’s cycling via javascript which is replacing a block with another one, block by block. So in that slide-show you’d like to have a search box which should be on top of the cycling images.

Well, yeah, you could write 5 search boxes on each of the slides haha! Rediculous isn’t it? Draw your search right after the cycling block is closed and move it in using relative positioning:

CSS - Position: Relative

I hope that all makes sense. Oh and by the way, did I mention I haven’t tested this in all browsers? Well works in Firefox 3 and IE 7-8.. If you’ve got some time to test this in your browser, please leave a short note in the comments section below ;)

Handling IE6

Great, I ran a few tests on different browsers, and every one worked fine except, of course, Internet Explorer 6. IE6 treats the block as a block, even if it’s width is set to 0, but there’s a fix for that too! Combining position absolute and position relative as child and parent, it seems to fix the problem. This is because absolute positioning works absolute to the browser window if there’s no positioning specified in its parent, this is why we use a relative position without any top and left options, so that the parent block stays where it is, and the child block’s absolute positioning is being counted from the parent.

This trick is helpful for relative positioning within a content block which is centered to the page for instance. So the code would be:

<div class="b">
    <div class="wrap">
        <div class="a1">
            <div class="a3">123 456 789</div>
        </div>
        <div class="a2">
        456
        </div>
    </div>
</div>

And the CSS would be:

.b {
	width: 100%;
	margin: 0;
	display: block;
}

.wrap {
	display: block;
	width: 300px;
	margin: 0 auto;
	background: yellow;
	position: relative;
	height: 100px;
}

.a1 {
	float: left;
	width: 0px;
	overflow: visible;
	position: absolute;
	left: -90px;
}

.a2 {
	float: left;
}

.a3 {
	width: 100px;
	display: block;
}

Don’t forget to specify the XHTML 1.0 Transitional Doctype!

Powered by Delicious: Web Design, Coding & HTML5

This is my first “Powered by Delicious” post, but I plan on writing similar posts at least once a month or so, depending how many links I bookmark. Here’s a list of some of my latest delicious bookmarks, with goodies on web design, coding, html5, photoshop, javascript and a bunch of other stuff.