Should I Use Joomla Or Wordpress?

Now I could be wrong about this but I believe there are two groups of people who read this blog. There are those who are interested in Joomla Templates, and have arrived from the main site. And those who have come from search engines or from some of the niche marketing circles I have been frequenting.

If  you are part of the first group, those who love Joomla, own a Joomla website, or want to build a Joomla website then you may be wondering what this blog is based on. Yes you probably guessed correctly, it’s WordPress.

I am big fan of Joomla and I believe it is an excellent choice for many types of websites, but I also believe that you should pick your CMS based on what you intend to use it for and what you want to achieve.

WordPress is an excellent framework to quickly publish your thoughts and ideas to the web and I’ve chosen it for the JoomlaBear blog because I believe it is the most efficient tool for my purposes.

The main site at joomlabear.com is based on Joomla – Joomla 1.0.15 to be precise, and will very shortly be upgraded to Joomla 1.5.9.

So when to use Joomla and when to use WordPress? Well that is something I will be addressing in future posts because I think it’s an important topic and could save many of us days or weeks of grief in the long run if we choose the correct CMS framework that best matches our site’s purpose.

A strength of each system, off the top of my head:

Joomla’s user management which is built in and allows for user registration on your site out-of-the-box. Includes user email authentication, i.e the user must click a link in a n email they receive before their account is activated. Once registered a user will be able to use other components integrated into teh Joomla site such as forums, etc.

Wordpress on the other hand has an incredibly powerful commenting system which is built in – and for which I do not believe there is anything yet for Joomla that compares – not when spam protection and other factors are taken into consideration.

Of course there are hundreds of pros and cons for each platform, and amongst my many tasks over the coming weeks I intend to write a little bit more about this as I think it’s a topic that people will find very useful and something I have had quite a bit of experience with over the past couple of years.

In the meantime I want to let you all know I am installing a WordPress plugin that makes my comments “dofollow“. Wordpress by default ads a “nofollow” tag which means Google, and the other major search engines, ignore the link  back to the commentators website.

I’m removing this because I have decided I do not agree with the principal behind the nofollow tag – I believe if you take the time to comment you deserve a credit to your site. I also have a zero tolerance for spam and will not accept comments if they are spammy or off topic. And finally, I want to encourage people to interact with me and others here.

So go ahead and leave me a comment, what are you waiting for!

Time Lapse Video – View From JoomlaBear Office

The video above shows a time lapse of shots taken with a water proof stills camera. Pause between shots is 30 seconds. The sequence was started just before dawn and shot from our office window. Thats the view we see while we work on templates for you

The video was created by my very good friend Phil Aitken from Film Scouts who can be found at his site specializing in film locations.

Changing Fonts In A Joomla Template

Something I’m asked quite often is how to change the font on a Joomla site. I thought I’d write a quick post about it because it’s an easy thing to do, but there are also some limitations. There’s also one other option for using cool typefaces on your Joomla site which I’ll touch on at the end – It’s called sIFR and uses flash and JavaScript to display a custom typeface. sIFR is really just good for headings as large blocks of type should not be rendered with flash.

Before we delve into how to make the changes it’s important to understand how fonts are displayed. Fonts in web pages are not embedded into the web page itself as many people think. The font must be on the end users computer to be displayed. The way it works is the template designer (or web site designer) will enter the font(s) they want to be displayed but it must be on the visitors computer to work.

This is why pretty much all web sites use one of the 10 or so standard fonts that are available on pretty much all computers – they include Ariel, Verdana, Times, Courier, Tahoma, Georgia, and a few others.

Quite simply all you need to do to change the font in your Joomla Template is edit the font list in your template css file. The css file is in your template folder on your live site – It is usually in a directory called “css” inside the template directory:

yoursite.com/templates/your_template_name/css/template.css

But, this depends on the designer who built your template as it’s not mandatory to structure files like this. It is good practice however and if you got your template from JoomlaBear then this is where you’ll find it.

• If you are using Joomla 1.0+ then your main template css file should be called template_css.css.
• If you are using Joomla 1.5+ your template css file should be named template.css

The simplest way to edit this css file is to do it through the Joomla admin. Joomla provides a nice method to access both your template index.php and template css file from the template manager.

• In Joomla 1.0 go to Site > Template Manager > Site Templates -Then select the template you are using from the list by clicking the radio button and hit Edit CSS.
  
• In Joomla 1.5 go to Extensions > Template Manager -Then select the template you are using from the list by clicking the radio button and hit Edit from the top menu. On the next screen hit the Edit CSS button at the top right of screen.

Depending on how the designer structured the CSS file you may need to change font specifications in a number of places inside the template css – especially if you want to change heading styles. Typically the base font will be declared in the body tag like this:

body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	color: #CCCCCC;
	line-height:20px;
	background-color: #222222;
}

You can see in the example above that we have two fonts declared – Verdana and Arial – in this example the viewer of your site will see Verdana if they have it installed, and if not the viewers computer will try to use Arial – remember these fonts must be installed on the users computer to be seen on the web page. If Verdana and Arial were not available then the viewers computer would try to use any available sans-serif font installed. Neat eh!

Other common font-family combinations include:

font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: Geneva, Arial, Helvetica, sans-serif;

And you can mix and match these as much as you like!

Sans-serif fonts are the straight and simple ones like Verdana and Arial – Serif fonts, like Times and Times New Roman. are the ones with little curly or pointy bits. An interesting fact is that sans-serif fonts are typically much easier to read on screen while serif fonts are easier to read in print! Have a look at any novel and you’ll see what I mean. However this is not true when the fonts are displayed at larger sizes so my recommendation is to go with a simple sans-serif font like verdana or arial for the body text and have fun with type faces like Trebuchet MS, Times, Tahoma, etc for your headings.

If you want to edit the heading font in your template css it will be exactly the same as above except you will need to locate the style in the css – you can do a quick “find” and search for “font-family” – if you whip through all instances of this you will find the heading styles pretty quickly. Or with Joomla you can be quite confident that your heading styles will be contained in one of the following styles:

h1
h2
h3
.componentheading
.contentheading

These are the default classes used for headings.

Hopefully this has been helpful – If you really, really want other typefaces in your template you can look at sIFR, which stands for Scalable Inman Flash Replacement. sIFR uses flash, css and javascript to replace blocks of text on your site. Its a cunning technique that I’ll be delving into further on this blog and using in some our fine Joomla Templates. Stay tuned.

Using The FireFox Web Developers Toolbar To Tweak Your Joomla Template

If you’re having trouble modifying your Joomla Template then read on as we show you a simple trick with the Web Developers Toolbar to help identify and fix layout and design issues.

So you’ve got your Joomla site all setup, you’ve downloaded and installed a template, or perhaps created one yourself, and now you’re finding that a few things don’ look quite right… Perhaps the menu is aligned to the opposite side from where you want it – or possibly the headings just look to big and are the wrong font.

It’s an experience that almost everyone setting up a Joomla site has at some point. And for those with no web design experience it can seem an impossible task to fix theses problems.

Luckily there is a very useful tool available called the Firefox Web Developer ToolBar. This toolbar, as the name implies, requires the Firefox web browser which you all should have anyway. If you don’t have it then grab it now.

Once you have installed it you’ll be asked to restart Firefox – don’t worry the latest version of Firefox is clever and will remember all pages you were viewing and reload them when it restarts – I accept no liability if this does not happen

Now you should see a row of tool bar icons in the top of your browser that look like the image below -  I have broken the icons out onto two lines to fit into this blog post:

I won’t cover every feature of the Web Developers Tool Bar as most are self explanatory. There are many useful tools here such as shortcuts to validate your HTML and CSS, options to display all the images contained in any page, and many many more tools that you will come to rely on.

However there is one shortcut that is completely indispensable and will help you find what’s causing those annoying glitches on your site! The shortcut is to hold down three keys on your keyboard: CONTROL-SHIFT-Y, if you hold  these three keys down for a moment (Using Firefox with the web devs. toolbar installed) you will then be able to move your mouse over any element within the current web page and highlight each element. When you click on a highlighted element an inset window will appear showing the CSS that is affecting this element.

Below is a screenshot showing our ever popular BlackBearPro template – In this live action shot you see the Web Dev’s Toolbar activated, the heading text has been moused over and the element has been highlighted – this element has then been clicked and you can see the inset showing the CSS that is governing this style including font, font size, color and very importantly the line number in the CSS (your Joomla template’s style sheet). I’m sure you can see how this makes it so easy to identify and tweak your Joomla template.

Click to see the full sized screenshot.

BlackBearPro Template For Joomla 1.0 Updated

I’ve just updated and fixed a number of errors in the free version of BlackBearPro for Joomla 1.0.x.

http://blackbearpro.joomlabear.com/

This version now validates CSS/XHTML – Although the WYSIWYG has slapped some invalid code into the flash area at the top – this is not part of the template so I’m not going to worry about it! What you download will be valid CSS and XHTML.

I urge all users of this template to log in to the main site and update their Joomla 1.0 version of BlackBear. If logged in the download will appear at the bottom of the template description.

I’m working on fixes to BlackBearPro for Joomla 1.5 currently (should have done this first really seeing as J1.5 version is about 10 times as popular!).

I’m on a mission to bring all our templates up to speed and make them validate!