PixoPoint

CobaltCloud updated

Published June 14th, 2010 under Templates

WordPress.com has performed some updates to the Titan theme recently. They removed the <h1> tag from the header and moved the navigation into the header area instead of below it. This has caused some problems with the CobaltCloud theme which is built on Titan.

Screenshot of the CobaltCloud demo site. Looking very worse for wear after the recent changes

Screenshot of the CobaltCloud theme after patches have been made

CSS update

If you are using CobaltCloud on WordPress.com, you will need to update your CSS with the following code:

/*

	Theme Name: PixoPoint Cobalt Cloud
	Theme URI: http://pixopoint.com/products/cobaltcloud/
	Description: WordPress theme by PixoPoint
	Version: 1.0
	Author: PixoPoint
	Author URI: http://pixopoint.com/
	Template: titan

	The Cobalt Cloud theme is a child theme of Titan

http://en.blog.wordpress.com/2010/03/09/new-theme-titan/

	The design is based on Enterprise by StudioPress

http://www.studiopress.com/demo/enterprise/

	Copyright (c) 2009 PixoPoint Web Development

	This code is free software; you can redistribute it and/or modify
	it under the terms of the GNU General Public License as
	published by the Free Software Foundation.

	This code is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

*/

/* Overall */
body {
	margin:0;
	padding:0;
	background:#f1f1f1;
}
.skip-content {
	display:none;
}

/* Header */
#header {
	width:960px;
	height:180px;
	margin:0 auto;
	position:relative;
}
#header #follow {
	display:none;
}
#header #title {
	margin:0;
	padding:0;
	position:absolute;
	left:20px;
	top:10px;
	width:260px;
	height:70px;
	text-indent:-999em;
	background:url(http://cobaltcloud.files.wordpress.com/2010/04/sprite31.png) -456px -210px;
}
#header #description {
	position:absolute;
	left:20px;
	top:82px;
	font-family:sans-serif;
	font-size:18px;
	color:#888;
	text-shadow:#ddd 1px 1px 0;
	font-style:italic;
}

/* Navigation */
#navigation {
	width:960px;
	position:absolute;
	top:126px;
	margin:0;
}
#navigation #nav {
	background:url(http://cobaltcloud.files.wordpress.com/2010/04/sprite31.png);
	width:940px;
	height:50px;
	margin:0;
	padding:0 10px;
	list-style:none;
	box-shadow:10px 10px 5px #888;
	-moz-box-shadow:0 6px 25px #666;
	-webkit-box-shadow:0 6px 25px #666;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
#navigation #nav li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	height:50px;
	background:#333 url(http://cobaltcloud.files.wordpress.com/2010/04/sprite31.png) 100% -140px;
	position:relative;
}
#navigation #nav li:last-child {
	background-position:0 -140px;
}
#navigation #nav li a {
	margin:0;
	padding:0 30px 0 20px;
	float:left;
	color:#fff;
	text-shadow:#000 1px 1px 0;
	height:50px;
	line-height:50px;
	text-decoration:none;
	font-size:12px;
	font-family:sans-serif;
}
#navigation #nav li:hover,#navigation #nav li.sfhover {
	background:#0781c4 url(http://cobaltcloud.files.wordpress.com/2010/04/sprite31.png) 100% -70px;
}
#navigation #nav li:hover a, #navigation #nav li.sfhover a {
	color:#fff;
	text-shadow:#333 1px 1px 0;
}

/* Dropdown */
#navigation #nav li ul {
	position:absolute;
	left:-999em;
	z-index:10;
}
#navigation #nav li:hover ul, #navigation #nav li.sfhover ul {
	left:0;
	top:50px;
	width:160px;
	margin:0;
	padding:0 0 10px 0;
	box-shadow:10px 10px 5px #888;
	-moz-box-shadow:2px 5px 15px #aaa;
	-webkit-box-shadow:2px 5px 15px #aaa;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	background:#f5f5f5;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
#navigation #nav li li {
	background:#f5f5f5;
	width:160px;
	height:auto;
	border-bottom:1px solid #ccc;
}
#navigation #nav li:hover li a, #navigation #nav li.sfhover li a {
	float:left;
	width:140px;
	height:auto;
	color:#333;
	text-shadow:#fff 1px 1px 0;
	margin:0;
	padding:10px 10px;
	line-height:14px;
}
#navigation #nav li li:hover, #navigation #nav li li.sfhover {
	background:#0781c4;
}
#navigation #nav li li:hover a, #navigation #nav li li.sfhover a {
	color:#fff;
	text-shadow:#333 1px 1px 0;
}
#navigation #nav li:hover a, #navigation #nav li.sfhover a {
	color:#fff;
	text-shadow:#333 1px 1px 0;
}

/* Flyouts */
#navigation #nav li:hover li ul, #navigation #nav li.sfhover li ul {
	position:absolute;
	left:-999em;
}
#navigation #nav li li:hover ul, #navigation #nav li li.sfhover ul {
	left:150px;
	top:-12px;
	padding:10px 0;
	border-top:1px solid #ccc;
}
#navigation #nav li li li:first-child {
	border-top:1px solid #ccc;
}
#navigation #nav li li:hover li a, #navigation #nav li li.sfhover li a {
	color:#333;
	text-shadow:#fff 1px 1px 0;
}
#navigation #nav li li li:hover a, #navigation #nav li li li.sfhover a {
	color:#fff;
	text-shadow:#333 1px 1px 0;
}

/* Main Content */
.content-background {
	overflow:auto;
	width:920px;
	margin:35px auto 0 auto;
	padding:20px;
	border:1px solid #ddd;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background:#fff;
}

/* Content */
#content {
	float:left;
	width:630px;
}
#content h1 a, #content h2 a, #content h3 a, #content h4 a, #content h5 a, #content h6 a {
	color:#333;
	text-decoration:none;
}
#content h1 a:hover, #content h2 a:hover, #content h3 a:hover, #content h4 a:hover, #content h5 a:hover, #content h6 a:hover {
	text-decoration:underline;
}
#content h1, #content h2 {
	font-family:sans-serif;
	font-size:20px;
	line-height:26px;
	font-weight:normal;
	margin:0 0 10px 0;
	padding:0 0 5px 0;
	border-bottom:1px dotted #ccc;
	color:#333;
	width:630px;
}
#content h3 {
	font-family:sans-serif;
	font-size:16px;
	font-weight:normal;
	margin:0 0 10px 0;
	padding:0 0 5px 0;
	border-bottom:1px dotted #ccc;
	color:#333;
	width:630px;
}
#content h4 {
	font-family:sans-serif;
	font-size:14px;
	font-weight:bold;
	margin:0 0 5px 0;
	padding:0 0 5px 0;
	border-bottom:1px dotted #ccc;
	color:#333;
	width:630px;
}
#content h5 {
	font-family:sans-serif;
	font-size:13px;
	font-weight:bold;
	margin:0 0 5px 0;
	padding:0 0 5px 0;
	border-bottom:1px dotted #ccc;
	color:#333;
	width:630px;
}
#content h6 {
	font-family:sans-serif;
	font-size:12px;
	font-weight:bold;
	margin:0 0 5px 0;
	padding:0 0 5px 0;
	border-bottom:1px dotted #ccc;
	color:#333;
	width:630px;
}
#content .post {
	position:relative;
}
#content .post-header {
	position:relative;
	top:-10px;
	width:630px;
	height:70px;
}
.single #content .post-header {
	height:30px;
}
#content .post-header .tags {
	display:none;
}
#content .post-header .date {
	position:relative;
	top:55px;
	margin:0;
	padding:0;
	font-family:sans-serif;
	font-size:12px;
	line-height:15px;
	font-weight:normal;
	color:#555;
}
#content .post-header h2 {
	height:26px;
}
#content .post-header .author {
	display:none;
}
#content .post-footer {
	position:absolute;
	right:0;
	top:55px;
	margin:0;
	padding:0;
	font-family:sans-serif;
	font-size:12px;
	line-height:15px;
	font-weight:normal;
	color:#555;
}
#content .post-footer a {
	color:#008DCF;
	text-decoration:none;
}
#content .post-footer a:hover {
	text-decoration:underline;
}
#content p {
	margin:0;
	padding:10px 0;
	font-family:sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#555;
	line-height:18px;
}
#content p a {
	color:#008DCF;
	text-decoration:none;
}
#content p a:hover {
	text-decoration:underline;
}
#content ul, #content ol {
}
#content li {
	margin:0;
	padding:3px 0;
	font-family:sans-serif;
	font-size:12px;
	font-weight:normal;
	color:#555;
	line-height:15px;
	height:auto;
}
#content li a {
	color:#008DCF;
	text-decoration:none;
}
#content li a:hover {
	text-decoration:underline;
}
#content .navigation a {
	display:block;
	font-family:sans-serif;
	font-size:13px;
	line-height:20px;
	font-weight:normal;
	background:#666;
	width:115px;
	height:23px;
	line-height:23px;
	text-align:center;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	color:#fff;
	text-decoration:none;
}
#content .navigation a:hover {
	text-decoration:none;
	background:#008DCF;
}

#content img.wp-smiley {
	border:none;
}
#content img {
	border:10px solid #ededed;
}
#content blockquote {
	background:#c8e5f7;
	color:#306106;
	margin:0;
	padding:6px 10px 6px 30px;
	font-family:sans-serif;
	font-size:0.9em;
	font-weight:normal;
}
#content a img {
	border:10px solid #ededed;
}
#content a:hover img {
	border:10px solid #eee;
}
#content .aligncenter, #content div.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
#content .alignleft {
	float:left;
	margin:0 5px 0 0;
}
#content .alignright {
	float:right;
	margin:0 0 0 5px;
}

/* Comments */
#comments .comment-number {
	font-family:sans-serif;
	font-size:16px;
	font-weight:normal;
	color:#333;
	margin:40px 0 10px 0;
	padding:0;
	border:none;
}
#comments ol.commentlist {
	list-style:none;
	margin:0;
	padding:0;
}
#comments ol.commentlist li {
	list-style:none;
	margin:0;
	padding:0;
	background:#f4f4f4;
	border:1px solid #ddd;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	margin:10px 0;
	padding:10px;
}
#comments ol.commentlist li .c-grav {
	float:right;
	background:#fff;
	padding:6px;
	margin:0;
	border:1px solid #ddd;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
#comments ol.commentlist li .c-head {
	font-family:sans-serif;
	font-size:12px;
	line-height:16px;
	font-weight:bold;
	margin:0;
	padding:0;
	color:#333;
}
#comments ol.commentlist li .c-head a {
	color:#333;
	text-decoration:none;
}
#comments ol.commentlist li .c-head a:hover {
	text-decoration:underline;
}
#comments ol.commentlist li p {
	font-family:sans-serif;
	font-size:12px;
	line-height:16px;
	font-weight:normal;
	margin:0;
	padding:0;
	color:#333;
}
#comments ol.commentlist li .reply a {
	display:block;
	font-family:sans-serif;
	font-size:11px;
	line-height:16px;
	font-weight:normal;
	background:#077ab0;
	width:44px;
	height:17px;
	line-height:17px;
	text-align:center;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	color:#fff;
	text-decoration:none;
}
#comments ol.commentlist li .reply a:hover{
	text-decoration:none;
	background:#068adc;
}

/* Respond */
#respond h4#postcomment {
	font-family:sans-serif;
	font-size:16px;
	font-weight:normal;
	color:#333;
	margin:40px 0 10px 0;
	padding:0;
	border:none;
}
#respond fieldset {
	overflow:auto;
	border:none;
	margin:0;
	padding:0;
}
#respond p {
	margin:0;
	padding:0;
}
#respond label {
	font-family:sans-serif;
	font-size:16px;
	font-weight:normal;
	color:#333;
	margin:0;
	padding:0;
	float:left;
	width:120px;
	height:35px;
	line-height:35px;
}
#respond input {
	font-family:sans-serif;
	font-size:16px;
	font-weight:normal;
	color:#333;
	width:300px;
	border:1px solid #ddd;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background:#f4f4f4;
	height:23px;
	line-height:23px;
}
#respond textarea {
	outline:none;
	font-family:sans-serif;
	font-size:16px;
	font-weight:normal;
	color:#333;
	width:500px;
	border:1px solid #ddd;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background:#f4f4f4;
	height:200px;
	line-height:23px;
}
#respond #subscribe_blog {
	float:left;
	width:30px;
	height:37px;
	margin:10px 6px 0 0;
	padding:0;
}
#respond #subscribe-blog-label {
	float:left;
	width:250px;
	height:60px;
	line-height:15px;
	font-size:12px;
	margin:20px 0 0 0;
	padding:0;
}
#respond #subscribe {
	float:left;
	width:30px;
	height:37px;
	margin:10px 6px 0 0;
	padding:0;
}
#respond #subscribe-label {
	float:left;
	width:250px;
	height:60px;
	line-height:15px;
	font-size:12px;
	margin:20px 0 0;
	padding:0;
}
#respond #submit {
	clear:left;
	float:left;
	margin:0;
	padding:0;
	font-family:sans-serif;
	font-size:14px;
	font-weight:normal;
	background:#077ab0;
	width:150px;
	height:30px;
	line-height:30px;
	text-align:center;
	border:none;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	color:#fff;
	text-decoration:none;
}
#respond #submit:hover {
	background:#068adc;
}

/* Sidebar */
#sidebar {
	float:right;
	width:270px;
}
#sidebar ul {
	list-style:none;
	margin:0;
	padding:0;
}
#sidebar li {
	list-style:none;
	margin:0;
	padding:0;
}
#sidebar li ul {
	list-style:none;
	margin:0 0 30px 0;
	padding:0;
}
#sidebar li li {
	list-style:none;
	margin:0;
	padding:6px 0;
	border-bottom:1px dotted #ccc;
	font-family:sans-serif;
	font-size:12px;
	font-weight:normal;
	line-height:15px;
}
#sidebar li a {
	margin:0;
	padding:6px 0;
	color:#008DCF;
	text-decoration:none;
}
#sidebar li a:hover {
	text-decoration:underline;
}
#sidebar h2.widgettitle {
	font-family:sans-serif;
	font-size:16px;
	font-weight:normal;
	color:#333;
	margin:0 0 10px 0;
	padding:0 0 5px 0;
	border-bottom:1px dotted #ccc;
}
#sidebar #recent-comments td {
	font-family:sans-serif;
	font-size:12px;
	font-weight:normal;
	line-height:15px;
	margin:0;
	padding:0;
}
#sidebar #recent-comments td.recentcommentstexttop, #sidebar #recent-comments td.recentcommentstextend {
	padding:0 0 0 5px;
}
#sidebar li li ul {
	margin:0;
	padding:0;
}
#sidebar li li li:first-child {
}
#sidebar li li li {
	margin:0;
	padding:6px 0;
	text-indent:10px;
	border-bottom:none;
}

/* Footer */
#footer {
	width:960px;
	margin:0 auto;
}
#footer p {
	font-family:sans-serif;
	font-size:12px;
	font-weight:normal;
	line-height:15px;
	text-align:center;
	color:#888;
}
#footer p a {
	color:#008DCF;
	text-decoration:none;
}
#footer p a:hover {
	text-decoration:underline;
}

/* Footer widgets */
#footer-first, #footer-second {
	display:none;
}
#footer-third {
	margin:0;
	padding:0;
	position:absolute;
	top:50px;
	left:0;
	width:100%;
}
.logged-in #footer-third {
	top:80px;
}
#footer-third h2.widgettitle {
	display:none;
}
#footer-third  ul {
	margin:0;
	padding:0;
	list-style:none;
	width:960px;
	margin:0 auto;
	position:relative;
}
#footer-third  ul li {
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	right:25px;
}
#footer-third #s {
	margin:0;
	padding:0 20px;
	border:0;
	background:url(http://cobaltcloud.files.wordpress.com/2010/04/sprite31.png) 0 -210px;
	line-height:29px;
	width:255px;
	height:29px;
	color:#666;
	outline:none;
}
#footer-third #searchsubmit {
	margin:0 0 0 10px;
	padding:0;
	border:0;
	background:url(http://cobaltcloud.files.wordpress.com/2010/04/sprite31.png) -295px -210px;
	line-height:29px;
	width:81px;
	height:29px;
	font-family:sans-serif;
	font-size:14px;
	font-weight:normal;
	line-height:15px;
	color:#fff;
}
#footer-third #searchsubmit:hover {
	background-position:-375px -210px;
}

CobaltCloud theme for WP.com

Published April 21st, 2010 under Templates

After we redeveloped the Red Devils ice hockey team site on WordPress.com, we felt the urge to create something which could be benefit the rest of the WordPress.com community. It is not possible to upload themes to WordPress.com per se, but it is possible to change a themes CSS via the custom CSS option. So we decided to create a child theme of the WordPress.com Titan Theme. All you need to do is copy and paste the CSS into your custom CSS panel in WordPress.com when you are using the Titan theme and the new design will appear on your site.

The result of this is the CobaltCloud theme. It is a two column widgetised design with a slick looking drop down menu.

Screenshot of the new CobaltCloud theme for WordPress.com

Design

The design of this theme is heavily inspired from the StudioPress Enterprise Theme. If you are looking for a high quality paid theme for your self-hosted WordPress installation we highly recommend checking out the selection of top notch themes available at StudioPress.com.

Demonstration

CobaltCloud demo site

Download

The CSS for the design is available on the CobaltCloud theme page.

Customisations

For custom versions of this theme, please contact us for pricing information.

Dropdown shadows

Published January 31st, 2009 under Templates

We have recently added some improvements to the menu system within the PixoPoint Template Generator.

Dropdown shadow as seen in Revolution Generated

Dropdown shadow as seen in the Revolution Generated theme

Most of these changes are under the skin, improvements to cross-browser compatibility, bug fixes etc. However one of them is the addition of subtle shadows to dropdown menus. You can control the depth of the shadows from within the menu editing panel (depth of 0 gives no dropdown at all). Hopefully some of you will find this a nice addition to your site.

This feature is not yet available within the Suckerfish dropdown menu generator but it will be available eventually. If you have any suggestions for improvements, bug reports or just want to comment on the service please leave a comment in our support forum.

Simple CMS theme update

Published January 17th, 2009 under Templates

A new version of the Simple CMS theme is now available.

Simple CMS theme for WordPress

Download Simple CMS theme version 1.5

The Simple CMS theme does not display comments, tags, categories or anything not needed for a basic static website. The theme folder only contains four PHP files, header.php, footer.php, index.php and 404.php. Unlike regular blog themes, static themes do not require large numbers of theme files.

New features

Simplified code
Improved SEO
CSS indenting
Improved code comments

Support

As per usual, all bug reports/improvements will be dealth with through our forum. As this is intended for developers, we will not be providing support for basic theme modifications.

Revolution Generated – magazine style template

Published January 15th, 2009 under Templates

We have received numerous requests for the implementation of a magazine style templates into the PixoPoint template generator. We originally intended to launch an entirely new magazine style theme of our own creation, however Brian Gardner of the Revolution themes recently announced a new site, RevolutionTwo.com, which features a wide range of great magazine style themes which are all GPL licensed. Since they are GPL licensed we have been allowed to implement these directly into the PixoPoint template generator. Instead of having to modify the Revolution themes code to create the magazine style theme that you want, you can simply modify a few options in the template generator, hit the export button and have your very own magazine style WordPress theme!

Revolution Generated

Revolution Generated template for the PixoPoint template generator

The design of the Revolution Generated template is based on the Revolution Church theme. This is a great design and we have ported it over to look almost exactly like the original design. Since we expect most people to use the design for non-church themes we have removed some of the ‘churchy’ styling on it and replaced them with a more generic design which will hopefully be more suitable for those of you looking to modify it for your own purposes.

Demo

You can see a live preview of the theme in the template generator … Live preview demo

Note:The template editor has been removed for the time being. It needs some major updates which will be available at a later date.

Or if you want to dive right in and start editing … Start editing Revolution Generated (link no longer works)

To download the theme, go to ‘Upload/Save’ and choose ‘Export to WordPress’ in the editing area.

Improvements over previous magazine themes

A common complaint heard from users of magazine themes is they have to add a custom field for every post they create. We have alleviated this problem by allowing you to specify a default image URL in the themes WordPress admin page for each section of the home page. When a default image URL is specified, that image will be shown in the particular home page area whenever you forget (or can’t be bothered) to add a custom field.

We have also made it easier to control what content is shown on the home page. Instead of making modifications to the theme code, you can now alter which categories of posts and how many characters from those posts are displayed in the various sections of the home page directly from your WordPress admin page.

These changes are all GPL licensed, so feel free to use them in your own themes. Links back to our site are much appreciated though

Credits

All credit for the styling of this theme goes to Brian Gardner of RevolutionTwo.com who created the Revolution Church theme which this template was based on.

New Aqua Vaccinium WordPress theme

Published November 30th, 2008 under Templates

The Aqua Vaccinium template features a smooth blue and green design and has a prominent dropdown menu built in (no plugin needed). The template was originally released as a standalone theme, but has been incorporated as one of the standard templates in the PixoPoint Template Generator.

Aqua Vaccinium WordPress theme

Download template as a WordPress theme

Download Aqua Vaccinium WordPress theme

The big blue bar

The blue section (below the main menu) is controlled via the ‘Main menu shadow’ section in the ‘Main Menu’ box in the template generator control panel.

If you require any (paid) customisations specific to your site, please get in touch via our contact form.

Naming

The word Aqua came from the mixture of the blue and green tones of the design. The name Vaccinium is the genus for a variety of berries including blue berries which we baked a pie for in honour of the new theme.

Follow me on Twitter

Categories