When you create a new template you can jsut copy it along with the whole head code and not worry about editing anything. If you wanted to cater to these older browsers, we would have too many CSS hacks, so we do this. The goal is to try and come as close to semantic markup as possible. From a web point of view, it means a page can be read by anyone, a browser, a spider or a screen reader.
Semantic layout is the cornerstone of accessibility. Now its worth noting that what we have here really is only the potential for semantic layout. If one were to go ahead and put random modules in random locations, then you would have a mess. An important consideration for CMS sites, a template is only as good as the population of the content.
It is this that often trips designers up when trying to validate their site. We will be using CSS to make a 3 column layout for the Joomla template.
We will also be making it a fluid layout. There are two main types of web page layout, fixed and fluid, and they both refer to how the width of the page is controlled. The width of the page is an issue because of the many browser resolutions that people surf the web at. A typical design might use tables to layout the page.
They are useful in that you just have to set the width of the columns as percentages, but they have several drawbacks:. You can position elements stuff in several ways using CSS. Here are a few suggestions:. We will be using float to position our content. At its most basic, the template might look like this:. One example of this is padding and margin styles applied to an element. Once you have figured out the styles, fill the shorthand versions in and delete the long versions.
The syntax is:. The left, middle and right columns are each given their own element. This very basic layout would look like this:. Unfortunately, there is a problem here. One problem is that calculates width differently. We solve this problem by not using any padding or borders on something that has a width. This simple layout is a good one to use for learning about how to use CSS with Joomla. It gives two of the advantages of CSS over table based layouts, it is less code and is easier to maintain.
However, it is not source ordered. With his kind permission, we will be adapting a layout developed by Dan Cederholm and described in more detail in his book. The page is split into two main floats. The first, main-body is floated left, the second, sidebar-2 is floated right. This is the same as we did before, the main-body float will appear first in the source code.
Now, within main-body, we have two more floats; content is floated right and sidebar is floated left. As long as we set our widths correctly, the content float can appear first in the source code.
To figure out the widths, we now need to do a little math. The width of content will need to be the remainder. Some CSS designers would recommend building in a small gutter by making the side columns fractionally smaller. This helps the layout stop from breaking in Internet Exporer. The code of the template is shown below. Its in a scroll box so you can copy and paste into the index.
Note we have removed the layout CSS from the head. So far all of our CSS has been only about layout. We will also move all of the CSS code out of the header of the index. As mentioned earlier, we use import because Netscape 4 does not understand this command.
All of the CSS relating to layout would go in the layout. The color. Lastly, all our typography and Joomla styling would go in our customize. Our layout. We have centered the page by using a small hack. This has to be done because of Internet Explorer. We have also added two more rules. One is overflow:hidden to each column. Secondly we have added a negative margin to sidebar We could apply this rule only to IE by adding a hack the Tan hack :.
However, hacks are generally troublesome. At the beginning of the customize. Everything is given a zero margin and padding and then all block level elements are given a bottom margin. This helps acheive browser consistancy. You can read more about the global reset at clagnut and left-justified. The font size is set to The reason for this is to try and get more consistant font sizes across browsers.
All font sizes are then set in em. Having line-height This means that the pages will be more accessible as the viewer will be able to resize the fonts to their own preference. Notice that the side columns do not reach their footer. If we have a template that has a white background for all three columns, this is no problem. We will use this approach and will have boxes round the modules. If equal height columns are desired that are colored, or have boxes, you must use a background image that will tile vertically.
Unfortunately, this technique causes a few problems in Internet Explorer. In some situations, the column background will disappear. Here it is slightly modified so that only IE6 is targeted using an! Important statement. This means that no actual hack, i. Its possible to fix this by hacking a minimum width, but we will leave that as an exercise for the designer. At the time of writing, the current stable of Joomla is the 1. X series. This release still uses significant tables to output content in the main body.
Along with these tables there are is CSS output available to the designer to style pages. Based on some research by various community members, the current list is shown below. Note it does not include generic web pages styles like H1, H2, p, ul, a, form etc.
Many designs you might see actually have given CSS styles that are more specific in their definition. Basically, a more specific rule will over ride a less specific rule. The color on a link and the color of the. In the case of Joomla templates, you will often see more specific rules used. This often occurs when the class is on a table.
More examples:. Specificity is not easy to understand, its often easier to start by using the most general style possible and then getting more specific if the results are not what you expect.
At the moment our template is using alot of tables, 20 in fact! As mentioned earlier, this slows the pages down and makes them harder to update. When a module is called in the index.
The following shows an example of the output:. Each module is output in the cell of a wrapper table. As you can see the CSS options -1, -2 and -3 are much leaner in code and make it easier to style the web pages. This author does not recommend using suffixes of 0 default or 1 unless absolutely needed.
Setting the modules to a CSS presentation has reduced the number of tables to Its more semantically correct and will also help in SEO. Our customize. Links are to be found in the tutorial. Hope you find it useful. Template Shop www. Randy Carver - carver-family. Those that understand binary and those that don't. Also a mambo template plugin for it.
Re: Template Tutorials Post by bluesaze » Wed Sep 07, am Wow this is overwhelming might take me days to go through all of this stuff.
Last edited by guilliam on Mon Sep 26, pm, edited 1 time in total. Harkrider, Fortran Code Engr. A: A favicon short for "Favorites icon" , also known as a page icon, is an icon associated with a particular website or webpage.
A web designer can create such an icon, and many graphical web browsers—such as recent versions of Internet Explorer, Firefox, Mozilla, Opera, Safari, and Konqueror—can then make use of them. Re: Template Tutorials Post by compass » Thu Oct 20, am Its not quite a tutorial, more of distance learning!
Extract from site Starting from building the index. Joomla is an open source Content Management System CMS that is freely literally available and supported by a large on-line community. The site will actually be live on-line from the very beginning, you'll be able to see the different stages as the design develops. As this is a CSS designed site, you'll be able to slowly see the raw joomla design get styled step by step.
Tutorial 2: Installing Joomla, doctype and the blank joomla template www. We'll also briefly look at how to construct a basic or blank joomla template with the index. Tutorial 3:Free Web Design Tools www. Now, everyone probably has their own favorites, but here is a list I have been working on of all the tools you will need to design a site.
The good part? They are all free for the downloading. We are doing this because we want to make an blank CSS template file that can be reused by anyone. With over 80 videos suitable for various skill levels, the official Joomla training covers most of the tasks you could possibly want to do with Joomla. The videos have been there for quite some time now and some of them may seem outdated, but the basics have remained the same so these tutorials are still a useful resource.
Find the free videos here on Youtube. Cloud Access is our partner and service provider for the free joomla. On their website, they have loads of free tutorials, both video and written. You can find them here or their YouTube Channel. The Basic Joomla Tutorials channel on YouTube features Joomla tutorials and live streams that help Joomla fans and users get more success and enjoyment out of their Joomla sites. Tim Davis, the host, is very experienced in creating videos his company provides video tutorials for their clients and good at explaining complex things.
The videos look professional and are fun to watch. OK, this one is a true hidden gem and we are really glad we found it: Eoin Oliver provides tips for professional web designers. Eoin has great tips that can save you a lot of work and reduce the number of support requests. Very interesting!
0コメント