I've spilled my guts in the previous post about what the hell is wrong with Joomla templates and why are they all so fugly? But now I would like to ask a reader (if I even have any) if you cold share some links to Joomla sites that dont look like Joomla sites and that do loog nice, original, that do have a template that looks professional, that makes you think - this is an original looking website.
Please help!
Nokia&Samsung Phones | Food Recipes | Joomla | Website optimization | Money & Adsense | Blogger & Blogging | Water Sports
Welcome
This is "my" mashed&smashed up personal blog where I try to post useful stuff for people that are into sports, people that want technology to for for them and not vice versa, people looking for solutions to mobile phone problems especially Nokia and Android related, people that are interested in SEO in making money online and more...
Showing posts with label template. Show all posts
Showing posts with label template. Show all posts
Why do all Joomla themes suck?!
I wanted to puke some poison about this topic for a long time. Do you remember phpNuke CMS? Do you remember how all the sites made with this cms looked exactly the same? Now Joomla is going down the same path. I don't know why.
It's just a f...ing template. It's 100% less complicated than Wordpress template. You can not make a Wordpress template to save your life I you dont know php and if you don't know how Wordpress works.
But you can easily make Joomla template if you take 10 minutes and ckeck which tags you have to put in. And you can do that even after the template is more or less finished. But no, all free Joomla templates and most of the paid ones as well just llok the same. Left column, content, right column and some boxes for modules. And it sucks. It's like every "designer" out there is just taking one Joomla template, change the header and the colors and put his name on it and throw it back out there.
How can you recognise a Wordpress template? Most of the time it just looks nice.
How can you recognise a Joomla template? It looks like a f...ing Joomla template from a mile away.
And again - there is no need for this. You could easily take any Wordpress template and turn it into a Joomla template (I would if Wordpress templates would not be such a pain in the ass when it comes to modifying and converting them, Wordpress templating system sucks big time (and still they make beautifull templates))...
I mean, log into any Free Wordpress Template site and you will find lots of great lookgin, original, distinct templates. Then log into a Free Joomla Template site and you will find a pile of amateurish looking templates that all look pretty much the same. Even the paid Joomla templates, Club Joomla templates etc... have a hard time from separating from that Joomla look and only once in a while they produce a template that doesn't have Joomla written all over it and that is not totaly specific for...well I don't know...some stupid hosting company, or e-store o whatever...one that can be used on any website.
So why do all Joomla themes suck?! I have no idea, but I know that it is quite a crutch that prevents Joomla from getting on the next level. Nobody wants a site that screams "I WAS MADE USING JOOMLA" through the template, right? I can' remember the last time that I went to a Joomla site and thought:"Wow, this is an ass kicking nice template!".
Do you?
It's just a f...ing template. It's 100% less complicated than Wordpress template. You can not make a Wordpress template to save your life I you dont know php and if you don't know how Wordpress works.
But you can easily make Joomla template if you take 10 minutes and ckeck which tags you have to put in. And you can do that even after the template is more or less finished. But no, all free Joomla templates and most of the paid ones as well just llok the same. Left column, content, right column and some boxes for modules. And it sucks. It's like every "designer" out there is just taking one Joomla template, change the header and the colors and put his name on it and throw it back out there.
How can you recognise a Wordpress template? Most of the time it just looks nice.
How can you recognise a Joomla template? It looks like a f...ing Joomla template from a mile away.
And again - there is no need for this. You could easily take any Wordpress template and turn it into a Joomla template (I would if Wordpress templates would not be such a pain in the ass when it comes to modifying and converting them, Wordpress templating system sucks big time (and still they make beautifull templates))...
I mean, log into any Free Wordpress Template site and you will find lots of great lookgin, original, distinct templates. Then log into a Free Joomla Template site and you will find a pile of amateurish looking templates that all look pretty much the same. Even the paid Joomla templates, Club Joomla templates etc... have a hard time from separating from that Joomla look and only once in a while they produce a template that doesn't have Joomla written all over it and that is not totaly specific for...well I don't know...some stupid hosting company, or e-store o whatever...one that can be used on any website.
So why do all Joomla themes suck?! I have no idea, but I know that it is quite a crutch that prevents Joomla from getting on the next level. Nobody wants a site that screams "I WAS MADE USING JOOMLA" through the template, right? I can' remember the last time that I went to a Joomla site and thought:"Wow, this is an ass kicking nice template!".
Do you?
How to get a crappy ugly looking Blogger template like I have?
First let me explain why would you want to have an "ugly" looking template like this one :)? First of all, I don't really think this temaplte is fugly. It's simple, clean, without all the stupid bells and whistles that contribute NOTHING to the blog itself. All they do is distract. Booohooo, look at my shiny blog, at least it's beautiful if the content is not woth reading....
Minimal. Simple. Think Google. Why is Google so successful with their simple (ugly?) interface? Because it works!
Besides that - if you want your website to bring you some money using Adsense or whatever, there are two benefits of having an ugly clean template:
- people that are used to all the shiny blogs will come to your website and think that your content can not be very good and worth anything if the template is so spartan. So they will probably leave a bit faster that they otherwise would and they would preferably leave by clicking on one of your ads. And second...
- is distraciton. Every element of the screen is a possible distraction for the visitors eye. If you want your ads to stand out you want as little distractions as possible. No badges, no widgets, no link, no colors, no pictures, no twitter crap, no blog catalog, no who is online, no who is following who and who is whos friend and how am I feeling at the moment, no favourite songs, bands, movies and other lists, no favorite books, celebrities...none of that crap. You want good content, simple navigation through your site and that's it.
So how to get an ugly simple minimalistic template on Blogger?
The minimal template is a good start. Select minimal template. Then enter your dashboard -> layout and fonts and colors and play with your colors. All you want are the following colors: black for the text, blue for the links and white for everything else. Then enter page elements and throw away all the unnecessary Gadgets/Widgets/page elements...whatever.
And you are done. Or you can just have the same template as me nad just copy this:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#0066CC">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#0066CC">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#333333">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#0066CC">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#ffffff">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#0066CC">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#333333">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#0066CC">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 120% Verdana, sans-serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 70% Verdana, sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal bold 266% Verdana, sans-serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal bold 78% Georgia, Times, serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 69% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/
/* Use this with templates/template-twocol.html */
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:800px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 550px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:160%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post p {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}
.comment-link {
margin-$startSide:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
.main .Blog {
border-bottom-width: 0;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}
.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}
/* Footer
----------------------------------------------- */
#footer {
width:800px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
]]></b:skin>
</head>
You see that this ends with /head tag? Enter your Blogger Dashboard / Layout / Edit HTML and delete everything from the top to the /head tag and replace it with the code above.
Voila! You have something that some people might describe as an ugly Blogger blog.
But I call is simple is beautifull.
Till next time...
Subscribe to:
Posts (Atom)