Welcome to Cloud-ee!

Welcome to Cloud-ee a blog template for ExpressionEngine. If you are in need of a Search Engine Optimized blog for your website then look no further. We have taken every consideration into account from the Semantic HTML to the Order of Content to the Title Tags. Just look at this unstyled page to get a glimpse of what Search Engines will see when they come to a site built using this template.

There are many other features that we outline below. But more importantly if I were wanting to learn how to use EE this is the site I would do it with. Every custom site I build has some aspect of a blog or news releases portion on it. The code we used for this template could be used as part of a larger site and would save hours of time coding a scouring the forums for that little nugget of code.

Anyway, continue reading for more details…

Features

Export HTML using a WYSIWYG? No Way!

Again, we hand cod all of our templates. We are big fans of the 960 Grid System (see next point). Blog-ee validates HTML 4.01 Strict and valid CSS 3. We used semantic HTML for the template so the Business Name in the header is an H1. The tagline is an H2. The navigation is a unstructured list and so on. All of the Titles of the Articles are links to the articles and they are also H2s. It should be a great template for a site that values SEO.

We see grids everywhere!

We use the 960 Grid for just about everything now. It is a lightweight CSS framework that was written by Nathan Smith. The 960 grid system is extremely helpful as it helps with cross browser support. Meaning this site should look the same whether you are using Opera, Safari, Firefox 3, or Internet Explorer 7. Technically speaking we don’t support IE6 anymore but the code should still work. Also, if you need to make changes then that should be a breeze as the 960 grid system is quite easy to learn.

ExpressionEngine

By using ExpressionEngine to build this template we are able to make it easy for fairly non technical people to update everything on the site from the Name and Tagline in the header to the content in the footer and contact page. We use the path.php Global Variables for displaying the following:

• Company Name - updates the name in the header and anywhere else the {companyname} variable is used
• Tagline - updates the tagline underneath the company name in the header and anywhere else the {tagline} variable is used
• Email Address - updates the email address in the footer and on the contact page and anywhere else the {emailaddress} variable is used
• Phone Number - updates the phone number in the footer and on the contact page and anywhere else the {phone} variable is used
• Fax Number - updates the fax number on the contact page and anywhere else the {fax} variable is used
• Street Address - updates the street address on the contact page and anywhere else the {streetaddress} variable is used
• City - updates the city on the contact page and anywhere else the {city} variable is used
• State - updates the state on the contact page and anywhere else the {state} variable is used
• Zip Code - updates the zip code on the contact page and anywhere else the {zip} variable is used
• Social Media Links - Twitter, Myspace, Vimeo, Youtube, Facebook and LinkedIn are all configurable from the path.php file
• Side Bar Ads - If you want to display Ads in the side bar you can either use EE to manage those or just drop your code into the .ads template and your ads will appear below the navigation. But a simple yes or no enables this feature in the path.php file
• Side Bar Functionality - Same goes for About the Author, the links for the Membership portions of EE, the Calendar, Syndication Links and the Mailing list. Don’t want a Calendar? Just type no in the field in the path.php file and it goes away. Want your RSS feed to show up? Type a yes in the field next to that variable and it will appear.
• Titles - We all know that Titles and Content are the Holy Grail for SEO. So we made the Titles of the Blog Entries the Titles to the page. So when someone clicks on the comments for a particular article then the Title tag will grab and display the title of the article they are viewing. This goes for Robot for Search Engines too. But, the titles for the more static pages we made configurable so we have spaces in the path.php file where you fill in the title tag information for the About, Contact, Category List and Archive List pages.

Having these variables defined helps in maintenance of the site as once you make a change to the path.php file for the phone number (for instance) it updates both the contact page and the footer on all pages. So you don’t have to hunt through the HTML in the Templates to make that change.

Freeform

We think freeform rocks. So much so that it was our first Module Review. While we don’t create the fields for you in Freeform we do provide the front end form and style it. Freeform is arguable the best form module available for ExpressionEngine. And it is free.

Searching… Searching… Searching….

We went ahead and styled the search results page for you. Your welcome!

The includes from PHP are Embed…

Embeds make maintaining a website a whole lot easier. We use embeds to isolate everything from the head, css files, script files, analytics and navigation (and more) so that if you need to make a change you can do so quickly and know that the change will populate across the site.

I like pretty pictures

The images that you embed into the Blog will be styled if you just add a class name to them. So if you add the class name imgright (class=“imgright”) the image will float to the right and have the appropriate amount of margin on the top, left and bottom sides. If you use imgleft (class=“imgleft”) then the image is styled by floating it to the left and given the appropriate amount of margin on the top, right and bottom sides. And if you use imgcenter (class=“imgcenter”) the image will center in the container and have margin on the top and bottom.

Plugins that we’ve plugged in

You will need to download Freeform from Solspace for use with this template. They are all free. We just did not want to step on any toes by passing on versions of each of these cool add-ons for ExpressionEngine. Once you have installed them the Freeform module will need a firstname, lastname, email, and message field.

RSS what? and Emily Lewis

Emily Lewis recently wrote an article on getting the formatting up to par in the RSS2 template for ExpressionEngine. She took the time to outline various changes that she made to her RSS feed and why. We found those changes to be pretty kick butt so we incorporated them into the RSS template for Blog-ee.

Related to whom?

I always wanted related posts on my blog (I have yet to port this over to the EETemplates.com blog) so I went ahead and made that a feature on Blog-ee. This will make it much easier for your readers to find other articles that are similar and ultimately keep the on your site.

Lists Lists everywhere

Want your visitors to be able to see what you have been writing? Well we make it easy for them to view your articles by Category or by Date. Handy!

A chance we’ll have to take

We don’t support IE6. Nuff said….

What do you get?

In the package

In this template package you will receive a zip file that contains 4 folders:

• Files for Manual Install
• Source Image Files
• SQL Install File
• “Upload This” Files

The installation of Blog-ee can take one of two paths.

New Installs

For new installs of ExpressionEngine we have included an SQL file that should ONLY be used for brand new installations of ExpressionEngine. Because of the highly flexible nature of ExpressionEngine there is no real way for us to guarantee automatic installations with existing websites. But, if you are building a new site then we have provided a way for you to get up an running with an EE site in less than 15 minutes. Just install EE. Open phpmyadmin. Click on the SQL Tab in phpmyadmin. Copy and paste the SQL that we have provided into the textarea and run. Voila! New ExpressionEngine site.

Manual Installation

In the Files for Manual Install folder you will find instructions for how to manually install the template. This is the only way to install the template for websites that have already been customized and have existing custom fields and content. Each Template Group is represented by a folder and each template’s code is placed in a text file inside of the Template Group folder. There is also a folder for Custom Categories, Custom Fields and Custom Weblogs. Within each of those folders there are text files that define each parameter for those custom items.

Modifications of Color

There is really only one color with this particular template. But we provide the source PNG and PSD for the header that you would need to change the color. We’ve even thrown in a few other colors for use. Changing any of the other colors would mean require knowledge of CSS. Have a client that wants purple with pink polka dots? With this template you can provide that would be relatively simple to provide.

“Upload This” Folder

The uploads folder contains all of the images, css and javascript files that will be needed to recreate the provided color style. Upload the CSS and Javascript folders to the root of your hosting and copy the contents of the images folder to your images folder (taking care not to overwrite anything) and you should be good to go.

Typography

Blog-ee is a blogging template for ExpressionEngine

Heading One

Heading Two

Heading Three

Heading Four

This is paragraph text. The rest of the text is merely a placeholder to let you see what paragraph text will look like. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

This is a blockquote text. The rest of the text is merely a placeholder to let you see what this blockquote will look like.

This is a link

• Unordered List Item One
  • Unordered List Sub Item One
  • Unordered List Sub Item Two
  • Unordered List Sub Item Three
• Unordered List Item Two
• Unordered List Item Three
• Unordered List Item Four

1. Ordered List Item One
   1. Ordered List Sub Item One
   2. Ordered List Sub Item Two
   3. Ordered List Sub Item Three
2. Ordered List Item Two
3. Ordered List Item Three
4. Ordered List Item Four

• Checklist Item One
• Checklist Item Two
• Checklist Item Three
• Checklist Item Four

Code