Favicons Next To External Links. I've had this JSFiddle (broken, see this Pen for fixed version) from CSS Wizardry open for like 2 weeks in my browser.
I kept thinking about it, because before that I got an email from someone asking about essentially the same thing and it stuck in my head. They were wanting to insert a favicon next to links and use only CSS to do it. Unfortunately I haven't found a way to do exactly that, but using some jQuery we can do it pretty easily. The "I Wish" CSS Only Technique What would be nice is if you had simple semantic HTML like this: <a href=" And then you could access everything you needed to insert a background image of the favicon using a service like getFavicon. Maybe the syntax wouldn't be exactly like that, but something like it. Google's Favicon Service. How to show a different number of posts for a WordPress category. WordPress allows you to vary how many blog posts you show on your blog, but it’s a single setting, and affects how many blog posts show over the whole website.
This tip allows you to have a different number of posts for a particular category. I used this tip on a category that’s very image intensive to show only 5 posts rather than 10 posts per page. This allowed me to reduce page load times on this category page, whilst still leaving the rest of the website easy to browse. Open up archive.php and add the following code before the loop. And then after the loop, just paste this: jQuery Form Plugin. The following code controls the HTML form beneath it.
HTML5 Part 1: Semantic Markup and Page Layout - Jennifer Marsman. This week, I will be publishing a 5-part blog post series on HTML5.
This series is an introduction to HTML5 and some of the cool new functionality it provides. In this first blog post, I’ll discuss semantic markup. Semantic elements describe their meaning or purpose clearly to the browser and to the developer. Contrast that with (for example) the <div> tag. The <div> tag defines a division or a section in an HTML document, but it doesn’t tell us anything about its content or convey any clear meaning. Developers commonly use IDs and/or class names with these <div> tags. In HTML5, there are new semantically rich elements that can convey the purpose of the element to both developers and browsers.
There’s a great story about a university who, when building their campus, didn’t create any walking paths. The HTML5 new semantic elements were based on that exact same logic (see the W3C design guidance to “Pave the Cowpaths”). Here are some examples of the new semantic elements in HTML5: <! Simple jQuery Dropdown Menu.
JQuery is great for making things like dropdown menus, it's really simple to use and allows us to write lovely, clean html.
JQuery is really easy as long as you remember that it's all in the css. If you keep that fact in mind, you'll have no problem using jQuery. We're going to make a simple dropdown menu using jQuery and its going to look like this: How will our dropdown menu work? Dropdown menus work by simply hiding the sub-menu lists by setting the visibility to hidden in our css. The first thing we have to do is write our html. Now we're going to style the list with css: Again, notice that the sub menu unordered lists have their visibility set to hidden. Lets start adding the jQuery to make pour dropdown menu work. Now we can start writing the jQuery code that'll make out slides move. Now lets start adding the jQuery code. Now we're setup and ready to start coding. So this line of code sets it up so that when the mouse is moved over a li in myMenu, the function openSubMenu is called. CSS letter-spacing. Cambridge Software - Free future-proof HTML5 blank Joomla 2.5 template for responsive web design.
Joomla 2.5 has just arrived including some good stuff like automatic update notifications (for both, Joomla and extensions) and a natural language search engine (part of Joomla core).
It also includes (for the first time) multi-database support (for example, you can now run it on SQL Server Express). In this blog entry, we would like to share our new Joomla 1.5/1.6/2.5 template, ready for your new websites. It won’t give you everything (i.e. look & feel, graphics, modules…). What it will give you though, is a very solid future-proof foundation for all your Joomla work.
This template was created using HTML5 Boilerplate (read more about it here HTML5 Boilerplate contains plenty of good features, most useful:- cross-browser compatibility - it is HTML5 ready - best practice website configuration - basic responsive design - IE specific css classes - mobile ready DOWNLOAD Download cambridgesoftware_html5 Joomla template UPDATED 3/February/2011: Style Web Forms Using CSS.
A big part of our work as website designers is the ability to make things look good and function well.
We spend hours taking the time to make every aspect of our site visually compelling, intuitive, user friendly, accessible and overall beautiful. Our forms are no exception! Our forms should be beautiful, easy to use, and should look consistent with the rest of our website. Styling form buttons — Tyssen Design.