Just wanted to share JoomlaBear’s elation that Barack Obama was elected as President of the USA.
History was made today.
Regular readers may have noticed a beautiful new Tag Cloud appearing at the bottom of the right column on this blog - If you haven’t checked it out have a look now - it’s magic!
It’s a Wordpress Tag Cloud plugin called WP-Cumulus and it was devised by Roy Tanck.
I won’t beat about the bush - As soon as I saw it I knew the Joomla community would love to have a compatible version of this plugin as a Joomla module so I contacted Roy and asked if he would mind if we ported it. Roy has kindly given us the thumbs up - read more here.
We hope to have a Joomla beta version of the WP-Cumulus tag cloud available in the next week or so. I’m thinking it should perhaps be named J-Cumulus, but will run this past the original developer. Leave a comment if you have a better idea for a name.
Thanks again to Roy Tanck for making something so beautiful and sharing it with the world.
This is only the first release, cleaner more advanced code will come shortly. Please post suggestions and comments in the Joomlabear forum
I’ve been playing around creating some cool background images which I’m pretty stoked with - These will be used in our upcoming Joomla template - this one is going to be something special. A sample below to get you excited!
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.
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.
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.
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.
I was looking at our Google Analytics today and noticed http://www.joomla-themes.co.uk have consistently sent us traffic ever since we released our very first version of BlackBear over one year ago. An astonishing number of visitors when you add them all up.
Thanks Joomla Themes, we really appreciate your support.
I’ve made a little video below to show you how I analyzed our Google Analytics with the Timeline tool to work out how many visitors in total have come from Joomla Themes over the past year, and also to demonstrate some cool new screen casting software I’ve been playing with.
If you don’t use Google Analytics and want it you can get it here
This is the first in a series of tutorials I’ve decided to put together to share my knowledge of Optimizing Joomla 1.5 For Search Engines.
We’ll look at the whole process in depth so grab a cup of coffee and lets get started.
For the uninitiated Search Engine Optimization, usually abbreviated to SEO, is the art of getting your website ranking in the search engines. When we say a website “ranks” it means your website appears preferably in the first few results when a person searches for keywords related to the topic of your website. It means the Search Engines think your site is extremely relevant, and an authority, on its subject matter.
Why do we want to optimize our websites for search engines? Well the more often you appear in the search engine results pages (often abbreviated to SERP’s) the more traffic will come to your site. Visitors are the currency we deal in on the world wide web. They make you, or the lack of them will break you.
Most of us don’t have enormous amounts of time to invest in optimizing our websites so I’m going to try to provide you with clear, concise information and we’ll start with the techniques that will benefit you most for the least effort.
There are a couple of things to understand before optimizing your website.
Firstly there are only 3 search engines you need to worry about; Google, Yahoo and MSN/Live.
Google has about 60% market share - meaning 60% of all searches performed on the internet, Yahoo approx 30% and MSN/Live about %5. These statistics vary depending on whom you talk to, and they also fluctuate a little. Regardless these numbers are ok for us to work with as they are indicative of where our energies should be placed. Many people believe that there is only one engine you need concern yourself with… yes that’s right… Google. I actually disagree with this as I run a number of sites which Yahoo and MSN have both been very good to. However Google is the dominant player and therefore we will focus more on it in this series.
The second thing you need to know is that good SEO relies on only two factors:
I said we’d keep it short and simple and we are - the above wraps up what you need to know before we get started on technique
Don’t worry if it’s a lot to take in - we’ll be going over, and expanding on, many of these topics before the tutorial series is finished.
Getting down to it, On-Site Search Engine Optimization
As mentioned this is the first tutorial and for this session we will focus on a number of Joomla Extensions that will help you succeed in getting your site to rank on the search engines and drive traffic to your pages.
What we will focus on for the first few tutorials is on-site search engine optimization . This is really about making sure you have good content and then showing the search engines what your site is about and helping them to index as much of the information as possible. If you are very new to all this and are wondering about terms like Title Tags and Meta Tags don’t worry, we’ll go into these in detail soon!
Lets get started! All I want you to do this session is get an idea of the tools you will need - All the tools we will use are free.
Extensions we’ll be investigating and using in different combinations are:
There are three routes you can take.
sh404SEF is truly amazing and indispensable. Something I have not even touched on here is that sh404SEF is going to handle your URL re-writing in this SEO method and the above two. This is the task it was designed to do and I have not even got to singing it’s praises for this yet. We’ll cover this in a separate tutorial.
Like the SEF patch mentioned above sh404SEF lets you create your Title Tags and other meta individually - however where it differs is in that it lets you create this per URL, or web address. This means that this method is actually compatible with any and all other components you have installed on your Joomla site. This is because you can assign the additional meta to the URL. It’s so clever! It does not rely on any communication between itself and other components - It simply comes along afterwards and cleans up the mess.The only thing that takes a little getting used to with sh404SEF is that the workflow is not completely intuitive. Once you have written and published your content items you’ll then need to visit the sh404SEF component, browse a list of URLs, select the one you wish to modify and then add in your tags. This can be confusing especially when you have not got your content right in front of you to reference when creating the page title, etc.
In spite of the final tiny gripe this is my preferred option and is the most powerful for the reason already mentioned - that any URL or address on your site can have a custom Page Title Tag, meta descriptin and all the rest. Fabulous!
Well I think that is enough for one session, I’ve been writing for about 3 hours… We’ll wrap up with a quick summary - I want you to have a think about what method above suits you best. Now that I have explained in minor detail how each option works I can quickly add a couple of other pointers to help your decision making.
Joomseo suits sites with large amounts of content, perhaps with new items being added daily or hourly. If you don’t have the time or resources to do manual tags for each content item then this is a good option for you. The sheer quantity of your content may help you win with the search engines.
Option two - The SEF patch is the most logical to use - the parameters are added while you are creating each page of new content. It’s sensible and intuitive and although more labor intensive than the Lazy Option it is faster for the average user to go with this option than option three. Don’t forget to factor in re-patching after each Joomla update!
The Ultimate Search Engine Optimization is what I use on 90% of sites I maintain. It takes more effort but the results are great and you can add your custom information for all additional components like Virtuemart or Sobi (note that sobi lets you enter meta but does not give you complete control over title as this is partly generated by the Joomla core. sh404SEF will let you customize these settings completely).
I hope you found this useful, thanks for stopping by, and I look forward to your presence on this site again soon.
If you have questions or suggestions please share your thoughts in the comments.
Don’t forget to subscribe to the feed or email updates - I know you want to read the next installment when we’ll dive into configuring these components and look at some techniques for writing good titles and descriptions!
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!
The Chromatic version of our very popular BlackBear was released today. You can have a look at the demo site here.
I think the colors are working really nicely and seem even more vibrant than PolarBear Chromatic.
At present the commercial version is available for $10 from our store. It features built in front end color switcher, and administrator parameters to select a single color as default, or disable the color switcher alltogether. You can also turn off the footer link back to JoomlaBear. Tomorrow we will release the free edition.
I was also quite proud of the header graphicwhich only took a few minutes to whip up - A nice paint splatter effect. A tutorial for this will follow shortly.
This issue was solved with the help of a couple of our users who reported the error on their purchase and then continued to make test transactions for us from other locations in the world - Thank you! We really appreciate your help.
It’s been a big week completing the new template as well as the new shopping system. And for all our effort and testing we got rewarded with an unexpected Virtuemart Paypal error, Typical.
“Paypal does not allow your country of residence to ship to the country you wish to”
With much confusion and googling we discover we’re not the first to experience this error; And it’s not specific to Virtuemart. UberCart and other cart systems have also scored this error. Sandbox.paypal.com test accounts don’t produce the same results so this error isn’t discovered until the shop goes live (we’ll for all our test accounts no errors were produced. Your cart and Paypal configuration may be different). Now I can’t help a whole bunch with other systems but I did find a work around for Joomla + Virtuemart.
In our Virtuemart admin area we can select ’store’ then ‘list payments methods’, I have Paypal as my only active payment method. In the ‘configuration’ tab we get to set some parameters for pay pal like our Paypal email. In the ‘extra info’ text area there is a bunch of PHP which pulls the users data and product info to be sent to Paypal for purchasing. It all looks dandy, until you configure Virtuemart for downloadable goods. Virtuemart 1.1.2 offers a nice revised check out to its earlier releases; We now get to skip all the billing and shipping info when we configure Virtuemart for downloads. This is good for the shopper which is always good for merchant. However in our first few lines of code in ‘extra info’ we’re still trying to pull the users ‘country code’.
$db1 = new ps_DB();
$q = “SELECT country_2_code FROM #__vm_country WHERE country_3_code=’”.$user->country.”‘ ORDER BY country_2_code ASC”;
$db1->query($q);
With no billing or shipping info the Virtuemart user data goes to defaults in the database. Mainly a lot NULL’s a couple of 0’s and one ‘US’ which is the default country code in the database. Lucky for us it’s easy to fix. If you look further down the PHP extra info (around line 22) you’ll find a line with “address_override” => “1″,. This is some Paypal API to help the shopper with payment when they get to Paypal. With out all the data fields this causes error, but it’s OK we don’t want the address/billing info anyway.
Change line 22 “address_override” => “1″, to “address_override” => “0″,. With this set Paypal wont try and gather all the other address information which isn’t there.
And to save 0.004 of a second we can delete the database request on the first 3 lines or comment it out.
//$db1 = new ps_DB();
//$q = “SELECT country_2_code FROM #__vm_country WHERE country_3_code=’”.$user->country.”‘ ORDER BY country_2_code ASC”;
//$db1->query($q);