Wikidot Design & Development

Lined Paper with CSS

Let's make some lined paper with CSS. The technique is quite simple - all we need is a repeating background gradient to give the effect of lines across the paper, and a pseudo element on the left to give the ruled margin.

Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.

And here's the CSS:

.paper {
    font: normal 12px/1.5 "Lucida Grande", arial, sans-serif;
    width: 300px;
    margin: 0 auto 10px;
    padding: 6px 5px 4px 42px;
    position: relative;
    color: #444;
    line-height: 20px;
    border: 1px solid #d2d2d2;
 
    background: #fff;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
    background: -webkit-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -moz-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -ms-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: -o-linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
    background: linear-gradient(top, #d9eaf3 0%, #fff 8%) 0 4px;
 
    -webkit-background-size: 100% 20px;
    -moz-background-size: 100% 20px;
    -ms-background-size: 100% 20px;
    -o-background-size: 100% 20px;
    background-size: 100% 20px;
 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
}
.paper::before {
    content: '';
    position: absolute;
    width: 4px;
    top: 0;
    left: 30px;
    bottom: 0;
    border: 1px solid;
    border-color: transparent #efe4e4;
}

Four CSS features of RoaringApps explained

From a site filled with CSS3 goodness, here’s some handy little tricks for you to try out.

While developing RoaringApps.com over the past couple of months, I came across some neat little tricks, both in CSS and wikidot. In the next couple of posts, I plan to share these little gems with you. Today, it's four of my favourite CSS discoveries.

1. Linear gradients for vertical divider - forum posts

The forum post containers have a dividing line running vertically down the left side, separating the author’s info from the content of the post. Using border-right on the post info div soon runs out when there’s a long post, so I turned to linear gradients to make sure the line runs all the way from top to bottom. The trick is to use multiple colour stops, with two sharing the same percentage value to give an instant (rather than gradual) change of colour.

RoaringApps forum post

Create a slide-up admin panel with CSS3

Put administrative links for your site in easy reach with this slide-up admin panel.

admin panel

Partly inspired by a forum thread on the community site, and partly something I've always wanted to add but never got around to it, I decided to create an administrative panel that can be accessed on any page of the site, only by me, and always just a mouse hover away. And because I'm the only one using it, I got to fill it with all sorts of CSS3 goodies. Read on for more details…

Showcase - CSS3 Image Gallery

Add some jazz to the lightbox image gallery with these CSS3 improvements.

My dashboard tells me it has been 51 days since I last posted a blog - longer than I had hoped between posts, but inevitable while I'm juggling university study with two on-going wikidot projects. And admittedly, this is not quite the in-depth post I would love to deliver you, but I felt it was time to once again whet your appetite with some CSS3 goodness - this time without the detailed explanation of every knook and cranny.

Recreating the feedback site's bug/wish button

Adding some interactivity to an otherwise static image using CSS.

Every time I visit the wikidot feedback site I expect some sort of user interaction from the bug/wish toggle button in the sidebar - instead it is a static image. So I decided to recreate the button with CSS. Below you can see the original image on the left versus the pure CSS version on the right. By hovering over or clicking the button, you can see how the CSS version adds some user interaction.

bug-wish-feedback.png

bugs wishes


The Markup

There are four main classes used to create the button: two ‘states’ for the toggles - link vs current; and two ‘positions’ - left and right, to maintain the curved corners on the correct side.

[[div class="bug-button"]]
[[span class="current left"]]bugs[[/span]] [[span class="link right"]][[[css3:wish-bug-button | wishes]]][[/span]]
[[/div]]

Using these classes means that by simply swapping the ‘state’ classes while maintaining the ‘position’ classes allows for changing the state of the toggle without having to change the CSS. You'll see in the CSS below that the styles are added only to the span element for the current state, but are added to the anchor (a) element in the link state.

Customise footnotes and hovertips simultaneously

Kill two birds with one stone1 and customise footnotes and inbuilt hovertips at the same time with less than 20 lines of code.

While I’m busy researching for our first Guide Series post, I thought I had better give you all something to nibble on, so here’s a (very) quick guide to changing the appearance of footnotes and inbuilt hover tips (the tips that popup when you hover over the options in the default wikidot footer) - they use the same hovertip class, so we can customise the two at the same time. As always, you should change the colours used to match your site’s theme (unless the theme you chose for your site is blue, in which case you chose well).

So, using the hovertip class, we’ll define the background colour, change the colour of the border, round the corners and give it a drop shadow to give the appearance of it hovering over the page. Oh, and of course we’ll also add a gradient to the background.

Streamline your page comments

Leave all but the necessities in your page comments with this quick and easy makeover

comments-streamlined-banner.png

When you use the Comments module to add page-by-page comments to your site, you’re effectively taking a thread from the forum and adding it to each page. While this is a quick and easy way of allowing people to chat about the content of that page, the design itself leaves you with lots of extras that would be fine in the forum, but are a little out of place at the bottom of the page. So we’re going to show you how to give the comments module a makeover, removing all but the bare essentials, so that the focus is back on the comments themselves - Oh, and we’ll make it look nice too!

First, we’ll get rid of all the unnecessary content - you can remove as much or as little as you like, it’s all up to you. Personally, for page comments, all I really want to see is the comment, who posted it and when. That means I’ll remove the post title, the options in the post head, user signatures, their avatar and karma and post changes. To let people fix any mistakes in their post, it’s a good idea to leave the options link at the bottom of the post.

.comments-box .title {
    display: none;
}
.comments-box .head .options {
    display: none;
}
.comments-box .post .signature {
    display: none;
}
.comments-box .head .info .printuser .small {
    display: none;
}
.comments-box .post .changes, .comments-box .post .long .changes {
    display: none;
}

That leaves us with the following:
Comments-post-1.png
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.