22
Style hyperlinks by filetype
You’re probably seen those links with the little icons next to them. It might have been a mailto link or a link to a PDF file, but you knew what it was going to be before you clicked on it because it had the small icon next to it.
This is probably because the web designer had included a little trick that styles links based on the content that they point to.
Taking the PDF example, imagine you wanted a small PDF icon to appear automatically to the left of your link. The first thing you need to do is add some padding to the left so that the text doesn’t overlap the icon.
a{ padding-left: 20px; }
Next you’ll want to add the actual icon, so our CSS selector will look like this:
a{ padding-left: 20px; background: url(icon_pdf.gif) no-repeat left; }
The final step is that we only want this to apply to links that point to a pdf file. We don’t want to have to add a class to every PDF link either, we need it to happen automatically.
a[href $='.pdf']{ padding-left: 20px; background: url(icon_pdf.gif) no-repeat left; }
Finished. This selector will now apply to any where the href ends in .pdf.
11
CSS Syntax highlighting in nano
If your server’s version of nano doesn’t have syntax highlighting for CSS you can turn it on yourself.
Just edit your nano config file (which may not exist yet):
nano -w ~/.nanorc
And add the following:
syntax “css” “\.css$” color brightred “.” color brightyellow start=”\{” end=”\}” color brightwhite start=”:” end=”[;^\{]“ color brightblue “:active|:focus|:hover|:link|:visited|:link|:after|:before|$” color brightblue start=”\/\*” end=”\\*/” color green “;|:|\{|\}”
Save and exit. The next time you open a .css file your code will be highlighted.
Tip courtesy of the nanosyntax project where you can also find code for HTML and lots of other file types.
9
Add a span around WordPress menu links
I often have the requirement to add an additional element in the standard WordPress menu – usually adding a span around the anchors.
This is very easy to do using the link_before and link_after functions:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'link_before' => '<span>', 'link_after' => '</span>') ); ?>
Depending on your theme, you’ll probably find this code in header.php.
Tweet6
Using CSS3 in older browsers
If you want to use CSS3 and HTML5 in older browsers there are a few ways of doing it, but today we are going to focus on something called Modernizr.
Modernizr adds various classes to the <html> element which allow you to target specific browser functionality using your stylesheet.
The simplest example is just as the Modernizr site says;
.multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
}
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */
}
In the example above, the Modernizr JavaScript code will detect if the browser your visitor is using supports multiple backgrounds or not. If it is one of the browsers that does not, Modernizr appends class=”no-multiplegbs” to your <html> element.
Then, it’s up to you to decide what should happen on your site. You can control what users of these older browsers see using the stylesheet and help your site to degrade gracefully.
Tweet5
This user does not have a Google Account – Analytics problem
If you’re trying to add a new user to one of your Google Analytics profiles, you might get the error:
|
I found I got this error when trying to add my name@googlemail.com account. I knew the address was definitely valid, it’s an account I use all the time.
In the end, the only way I could get it to work was by changing the part after the at symbol to @gmail.com, even though I use an @googlemail.com address.
Tweet16
WordPress error: Could not create directory. /public_html.
If your WordPress automatic update fails with the error:
An error occured while updating WordPress: Could not create directory. /public_html.
1) Log into your server
2) Delete the folder ‘upgrade’ found in the wp-content folder
3) Remake the ‘upgrade’ folder (mkdir upgrade)
4) Change the permissions to 777 (chmod -R 777 upgrade)
Done!
Tweet15
How to clear a float
Say you have three divs, A, B & C.
Div A is a container for B & C and you would like B & C to sit side by side.
To get your divs B & C to sit side by side you need to float them, but as soon as you do that div A no longer expands to hold them. This is probably because you haven’t floated div A so the quickest fix is to float it.
However, there are many times you can’t do that – if you are using margin: 0 auto; on the container div, for example.
There are two further solutions:
1) Add overflow:auto; to the container div.
2) Add a clearing div after divs B & C.
Solution 1 can sometimes add scrollbars for reasons that aren’t immediately obvious. If that has happened to you try using solution 2.
Adding a clearing div is very easy. You simply add an empty div just before you close your container div (div A in this example) and set it to clear:both.
Couldn’t get much easier!
Tweet22
Alternating row colours (zebra striping)
If you’re looking for a quick and easy way to do pure CSS zebra striping the following code snippet will alternate row colours for you in browsers that support CSS3.
Tweettbody tr:nth-child(odd){ background-color:#ddd; }
21
Change the background colour of selected text
So, you want to override the browser’s default selected text colour? A simple bit of CSS will allow you to change it in most modern browsers (Firefox, Safari, Opera) while not causing any problems for users with IE.
p::selection{ background:#000; color:#fff; }
You’ll see I’ve changed the colour of the text there as well so that it is still legible when the background is black.
I probably don’t need to point out that you can, of course, apply this to any text element and have different colours for headings, links, etc.
Tweet26
Don’t start your classes or IDs with a number
Might not be an obvious one for people approaching CSS from a design background rather than a programming one.
The browser will not pick up your styles if your element’s class or ID starts with a number.
If you’re wondering why the browser is ignoring the styles you’ve set, that might be why!
The same goes for hyphens and underscores, the only non-alphanumeric characters allowed in classes and IDs. The CSS spec states that hyphens and underscores should only be used for vendor-specific extensions (for example, if you’ve ever seen -moz-attribute used).
Tweet