Various articles pertaining to web design and development

Changing the Viewport Height When Link-Jumping

Published Category: CSS

When clicking on a #link that jumps to a particular part of a page, sometimes we need to take into account the viewport. If we have a fixed header, say 80px in height, our content will be overlapped by the header. To fix this, we can use some CSS magic: .jump_link:before { height: 80px; /*

Counting with CSS using CSS Counters

Published Category: CSS

body { counter-reset: count; } li a:before { counter-increment: count; content: counter(count) “. “; font-weight: bold; } I needed to use something like this to count the <LI>s within an unordered list <UL> for a table of contents generated using jQuery. It’s simple, so there’s not too much to explain about it. It’s super handy

Use Headings Throughout Your Oxwall Installation Using jQuery

Published Category: Oxwall

Using Oxwall with plugins such as the forum and third-party articles plugin, you may have noticed that you’re not allowed to enter certain HTML. Well, you can, but it gets stripped once you’ve submitted the form. Instead of digging through core files that will be overwritten after upgrades and patches, we can use some jQuery

Optimal Line-Height for Your CSS

Published Category: CSS

body { font: 100%/1.618 sans-serif; } While this won’t exactly cover the golden ratio for line height when it comes to your content’s width, this will at least help get you there with a starting CSS solution.

Google Chrome “ERR_SPDY_PROTOCOL_ERROR” Quick Fix

Published Category: General Web

While using Chrome, you may have come across a ERR_SPDY_PROTOCOL_ERROR error. This has happened to me personally many times on websites such as Facebook and a couple that I develop myself. The issue is hard to reproduce and there are no error logs on the server to be had. What would happen is you’d navigate to the

“Fixing” CSS of iOS Buttons

Published Category: CSS

When you’re designing a responsive theme, the buttons while browsing on an iOS device will take on their own consistent design. This tends to force your own buttons to take those elements as well. To be able to give your inputs and buttons your own CSS, simply add the following to them: -webkit-appearance: none; -webkit-border-radius: 0;

Using an Nginx Rewrite to Add Trailing Slashes to Your URLs

Published Category: Nginx

rewrite ^([^.]*[^/])$ $1/ permanent; Add to your server block. This line will add a trailing slash o the end of your URLs, as long as they don’t contain a period (for things like static assets), and if it does not already have a trailing slash. This is a handy way to improve SEO by redirecting

Styling an IFrame With jQuery and CSS

Published Category: General Web

<script> $(‘iframe’).load( function() { $(‘iframe’).contents().find(“head”) .append($(“<style type=’text/css’> .yourCSS{background:#eee} </style>”)); }); </script> That’s pretty much it. Add the script where it needs to load. As an example, I used this to style the quoting feature within a textarea: I believe there’s only very hacky ways of doing this if the IFrame isn’t coming from your own website. In

A Quick jQuery Solution For a Fixed Website Menu

Published Category: General Web

With Beard Profile, we decided to make the website’s header fixed. This should fix issues with long-scrolling article content, and most definitely the Newsfeed content. We initially had a Back to Top button, but a fixed menu seems to be a better option when it comes to keeping visitors navigating on your website. This is

Using Google Forms to Pre-Register Members on Your Oxwall-Powered Site

Published Category: Oxwall

Working with what’s a new software for myself, Oxwall, I decided that it’d be a great idea to pre-register members before I even launched the site. This will help gauge interest, build a little bit of hype (I hope), and allows me to utilize these awesome people to kick start the community. Since, you know,