CSS Layout Tutorial from Scratch

It's now Bank Holiday Monday, you probably won't be surprised to hear I have eaten too many easter eggs and am quite sick of chocolate, until tomorrow. 

After modifying the Greenway CSS template for use as a DNBE theme, I really wanted to be able to create more themes.  But this time from scratch all by myself rather than taking something someone else had created and just modifying it.  I have a knowledge of CSS and have mainly used it for formatting and styles, but hadn't mastered the art of page layout with CSS.  A quick search on Google brought up a lot of results but one particular tutorial caught my attention on Subcide.  They have a step by step tutorial on creating a 3 column layout from scratch, just what I was looking for.  I like the fact that the author explains the Why and Wherefore of his methods.  IE quirks are even taken into consideration.  The finished product uses nothing but XHTML, CSS and a few images. 

The next blog theme or CSS template I create will be done while following this tutorial.  I recommend you read it, especially if you are starting out using web design or using CSS.


RandomQuote Extension Update version 1.1

RandomQuote is now at version 1.1

I have done a minor update to the admin Quote.aspx page.  You can now edit a quote in the grid.  This saves you having to delete the quote and then add it again as a new entry.

I have achieved this by using a DataList control and storing in an the XML file as before.  The rest of the extension is unchanged.

The updated extension is available from the download page.

All you have to do to update any previous version is to overwrite the admin page ( Quote.aspx , Quote.aspx.cs).  Everything else is the same.


Greenway DotNetBlogEngine theme

The thing I love about the internet is you can get a lot of things for free, and legally too.  I wanted to create a theme for DNBE but I did not want to create the whole site template myself, images, styles etc.   So I turned to the internet, as I often do in these situations and found this Greenway template on free CSS templates.  I adapted this free template  for use as a theme on the blog. 

Click for a live preview.  (This preview has the RandomQuote extension that I created)

You can downlaod the theme from here Greenway.zip (32.99 kb) or from my Downloads page


RandomQuote extension

** This extension has been updated **
** Go to Random Quote Extension Update **

I have created an extension for DNBE.   For installation instructions see the README.TXT file included in the downloadable zip. 

The extension is "RandomQuote", and does pretty much what it says on the tin. RandomQuote allows you to display a quote on a page, randomly selected from those you have entered via the admin page.  You record two pieces of information, a quote and a reference, i.e. author, date and time or place of the quote.

Any quotes you have entered will be displayed in the list.

When the control that renders, there are three style sheet classes specified.  You can use these classes to style the look of the control using CSS.  The three classes are 'quotemain', 'quotetext' and 'quoteref'.  The rendreed HTML will look like this:

<div class="quotemain">
    <div class="quotetext"> Some quote text here </div>
    <div class="quoteref"> Some reference here </div>
</div> 

a simple style sheet may look like:
/****************************************
Random Quotes
***************************************/
.quotemain{ /* Specify style here */} 
.quotetext{ font-weight:bold;}  
.quoteref{ font-style:italic ;} 


You can download it from here or from my downloads page.

version 1.0, 17th February 2008.

Please feel free to contact me if you have any feedback, suggestions for improvements or if you find any bugs.