Wikidot Design & Development

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

Premium Themes survey results

$0 - $20 Premium Themes with multiple colour choices, page templates, optional site width and no refund came out on top in our premium themes survey.

survey-banner.png

Results are in for the survey regarding premium wikidot themes. There was a total of 10 responses, and the survey is still open, so if you haven’t taken it yet, you can find it here.

For those short of time, here’s a summary of the results…

The price for a premium theme was most popular between $0 - $20, with custom made themes from $10 - 70. The amount for buying exclusive rights to a pre-made theme varied greatly from $0 - $70. Cross browser compatibility, multiple colours for the theme, a custom forum and page templates were popular standard expectations, while multiple page designs and a custom image header were most popular as optional extras.

50% of respondents said they didn’t expect any refund, with another 40% going for a 7 or 14 day 100% money back refund.

Requested page designs were a photo gallery, multiple column layouts and page-based forums (Wikified or NoComment).

Updates to site theme

We've made some changes to the theme for this site… what do you think?

theme-changes-banner.png

When my internet connection spat the dummy a couple a weeks ago, I figured there wasn't much I could do to update this site - then I realised that the software I use to code the CSS for the theme, CSSedit by MacRabbit, allows you to work offline. As long as you have a page loaded in the live preview window, you can leave it open for as long as you like and edit the CSS, seeing the changes you make in real time, without the need for an internet connection. Plus, you can even add files to the CSS locally (by just dragging them into the editor) - no need to upload them to the web. This is especially handy when you need to make slight adjustments to the image - so much quicker!

So I took this opportunity to make some alterations to the theme for this site. The most obvious is the new pattern on the background, but there's some more as well:

Premium Themes - Draft Outline

A draft outline of how we plan to differentiate free and premium themes.

Here at BMC WebDesign, we're looking forward to bringing you some very neat premium themes for your wikidot site, and are currently in the process of working out exactly what premium themes means. From the structure of the theme and differentiating it from free versions, to how the themes are previewed, paid for and transferred, we want to make sure everything is perfect before you hand over your hard earned cash. So we've posted this blog entry to allow you, the wikidot users, to voice your opinion on anything related to premium themes.

Survey Now Open

Take the Survey Now

We've created a survey to help us get a better idea of what you expect from a premium theme. We invite all wikidot users to take the survey here. Once we've had enough responses, we'll post the results here for further discussion.

Elegant Image Frame

Add some elegance to you wikidot site with this easy, stylish and formal image border.

rose image

We’ve already shown you how to turn your plain old images into polaroids, and now it’s time for a nice, formal image frame.

First, what to put on your wikidot site. Instead of wrapping the image between some <div> tags, we’re going to use the more efficient method of assigning a class (elegant-border) to the image. This means that if you add the relevant CSS to your custom theme, any time you want to use this image frame, just add class="elegant-border" to the image syntax.

[[image :first class="elegant-border" width="250px"]]

Customise the colour of CSS code

Change the way you look at CSS codes on your site by customising the colour of selectors, declarations, numbers and more.

#selector {
      property: value;
      property2: #fff;
      property3: 120px;
}

Through the magic of the internet, when you put some CSS on your wikidot site wrapped between [[code type="css"]] and [[/code]] (ie. in a code block), the code is automatically coloured, to help differentiate between different code items. But did you know that you can change the colour of those items? Just use the CSS selectors outlined in the table below in your custom theme to add some style to code blocks on your wikidot site.

Selector Changes colour of Example (bold)
.code .hl-default Default text If no other colour is specified
.code .hl-code Default text If no other colour is specified
.code .hl-brackets Curly Brackets #top-bar {
.code .hl-identifier Selectors #side-bar {
.code .hl-reserved Declaration Property border-top: none
.code .hl-special Pseudo Classes a:hover
.code .hl-string Declaration Value background: none
.code .hl-number Numbers width: 100%
.code .hl-var Variables color: #d5d5d5

There are more selectors than displayed above that are currently supported at wikidot, but I'm still trying to work out what some of them do. Once I've worked it out, I'll let you know.

Browser corner info triangle

corner-info-RA5.png

An infobox with a twist - using fixed positioning.

Sometimes you want to be able to quickly grab the attention of your visitors to inform them of something relating to your site. A creative way of doing this is by fixing the information in the corner of the browser window, so that even when the page is scrolled down, the element stays on top. We're going to use a triangle, because it fits nicely into the corner of the browser. (Just incase you hadn’t noticed it already, you can see this in action in the top left corner of this page).

First, we need to design the element itself. While it is possible to create triangles with CSS3, it's unlikely they'll render properly in every browser, and because we're using fixed positioning, the last thing you want is a great big box stuck in the corner of your visitor’s browser window. So instead, we're going to use a png. You can grab a blank triangle png at the bottom of this page, but it’s pretty easy to design one yourself.

Now to add it to the site. You can either put it in a live template so that every page on your site/category has the image, or you can just add it to selected pages. We’ll give the image the class corner-info and add the class to our custom CSS. If you’re promoting a page on your site, remember to add a link to your image.

Animated Polaroid Images

So now that you have yourself some cool polaroid images, it’s time to take it up a level and add some animations for those viewing with Safari or Chrome.

Below is what we're aiming for - if you're using a webkit browser, you should see the image gently increase in size when you hover over it. If you're using a mozilla browser, the image will just jump to the bigger size.

giraffe200.jpg

A lovely Giraffe


The first thing we’re going to do is scale up the image when the user hovers over it, using the :hover pseudo class. So from the code for the original post, we’ll change the following lines.
.polaroid-image {
    -webkit-transform: rotate(3deg) scale(1);
    -moz-transform: rotate(3deg) scale (1);
}
 
.polaroid-image:hover {
    -webkit-transform: rotate(3deg) scale(1.1);
    -moz-transform: rotate(3deg) scale (1.1);
}

Now when anyone using a mozilla or webkit browser hovers over the image, it will instantly jump in size. A nice effect, but we can do better…
giraffe200.jpg

A lovely Giraffe

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.