VitalBodies bought a RocketTheme template for a job for a customer web site, only later to find out that you need to buy a special program (Adobe Fireworks) just to edit the graphics. VitalBodies uses all open source software so that did not sit all that well. In order to edit the logo and other graphics we needed a work around so we wrote this guide for us and all RocketTheme users. RocketTheme produces very nice templates for open source Joomla!.

CSS:
The first step is to find the logo and the basic things that relate to the logo like the CSS.

NOTE: If you right click on the logo on your new RT site you will not be able to access the logo as there is a blank image in front of that logo.

Instead log into the Joomla panel and go to EXTENSIONS > TEMPLATE MANAGER.
Click on your template.
The click on the EDIT CSS button.
On most RT templates there will be a CSS for the main document.
On Mynxx for example that is template.css.
Click the radio button and choose EDIT.

On most templates, right at the top you can see the size of the logo.
So for example in Mynxx:
/* This is the Main template logo, Edit this to match the width and height of your new logo image */
#logo {width: 260px;height: 44px;}

Remember that size.
It is easiest to make your logo the same size and not mess with the CSS.
If you create your own logo and make it a bit larger or smaller you will need to change this size.
If you change the height you might even need to change the height of the HEADER. That is advanced to some degree so you might want to avoid that if you are not sure.

And if you scroll down a bit farther looking for the word logo:
#logo {float: left;margin-left: 10px;position: relative;}
#logo:hover {text-decoration: none;}
.logo-text {position: absolute;right: 3px;top: 15px;text-transform: uppercase;font-size: 13px;}

Click CANCEL.
And then CANCEL again.

LOGO:
Next let’s find the actual logo itself using FTP.
FTP into Joomla on your site and navigate to the TEMPLATES directory.
Double click your template (in my case it was rt_mynxx_j15)
From here on out, your on your own, as it depends on the template where they store the logo and how many there actually are.
In Mynxx for example I found logo.png in a directory called IMAGES in subdirectories called LIGHT and DARK.
Download the the logo graphic(s) and remember where you got them from and where you downloaded them to.

FONTS:
If you downloaded the RT sources for your template, you received a font or fonts.
If you want to use them, you will need to load them into your Operating System.
For Ubuntu Heron, Ibex and Jackalope check out this blog post I wrote:
http://www.vitalbodies.com/blog/2008/07/01/installing-fonts-in-ubuntu/

EDITING THE LOGO:
Open the logo.png (or what ever yours is called) in GIMP, INKSCAPE or both or your favorite open source program for creating graphics.

In Ubuntu Heron, Ibex and Jackalope, these programs are free and super easy to install.
See this blog post I wrote for how to install literally hundreds of free programs that come with Ubuntu and many that do not:
http://www.vitalbodies.com/blog/2008/07/18/how-to-install-programs-in-ubuntu-hardy-heron/

You can also just start with a new document in your favorite open source graphic program and simply make the graphic the same size and your set to go.

I like to open the original graphic and study it:
Does it have a transparent background?
Are the letters light or dark of in the middle range somewhere?
Is the text centered or way off to one side?
High or low, bold or subtle?
Etc.
This gives a nice starting point.

In GIMP I like to check the IMAGE > MODE and see if the image is Indexed, or RGB or Grayscale.
If you want to change the original image you might want to change the mode to RGB if you want more or different colors.

As the creative types we are, we do not have to do what the RT people did, but you at least know they did the math (so to say) and worked out the bugs as far as what works for the template.

UPLOAD THE LOGO:
Once you have created and saved your new master piece logo you just need to FTP in to Joomla again (rename the original) and upload your new logo.
Some of you might need to change the CSS if you made the image larger or smaller than the original.

DISCLAIMER:
This is a brief tutorial (not exhaustive), use at your own risk and yes, there are likely to be typos…
Back up and all that other safety stuff and have fun!

FUN:
Did you use this guide to make a new logo? Show it off here, by adding it to a reply.

Here is what we created:

An additional note is that the little images for the variation chooser are located in the your_site.com/images/stories/styles folder if you decide to change them to match your site.

VitaBodies designed an Ebay Template for listing items on ebay. The template is W3C Valid Table-less XHTML Strict CSS and does not break the Google RSS XML data feeds.

Having an Ebay template is nice, as you have all of the text that is repeated in almost every listing right there ready for minor tweaking. Plus your listing take on a more professional look and feel.

The images were designed so that one or more can be used in the template or replaced with images of the item that is being sold or auctioned.

One of the big challenges was to get the code to work in the layout that we needed and still support the Google RSS XML Data Feeds.

Being controlled by an external style sheet allows the look of ALL the listings to be changed. Changes can be made if ebay alters their scripts and styles (and they do) or to refresh the look of the listings from time to time.

NOTE: If you plan on doing your own style sheet for ebay, do not use the word ebay as an ID or CLASS or anything else. Vitabodies was using style sheets on ebay before ebay really got into using them. So when ebay started creating and usings a style sheet can you guess what word they used? EBAY…

]]> http://www.vitalbodies.com/blog/2008/07/14/portfoilo-ebay-template-w3c-valid-table-less-xhtml-strict-css-rss/feed/ 0 http://www.vitalbodies.com/blog/2008/07/11/portfolio-melitamarshallcom-valid-table-less-xhtml-strict-css/ http://www.vitalbodies.com/blog/2008/07/11/portfolio-melitamarshallcom-valid-table-less-xhtml-strict-css/#comments Fri, 11 Jul 2008 16:04:00 +0000 vitalbodies http://vitalbodies.wordpress.com/?p=201 Portfolio: MelitaMarshall.com Valid Table-less XHTML Strict CSS

VitalBodies recently finished the creation re-creation of the MelitaMarshall.com Web Site.

This site is based upon a template, VitalBodies created for the Oregon House web site.

Melita wanted wanted the site to tie into her existing business Oregon House and the Oregon House web site but be able to change in style as needed.

VitalBodies created the template to be W3C Valid Table-less XHTML Strict and Valid CSS.

(Click image to see a larger clearer version)

The entire web site W3C Valid Table-less XHTML Strict and Valid CSS.

The web sites original tabled design was done by Paradigm-Graphics some years back.

-

MelitaMarshall.com:

“I bring wisdom from my own spiritual journey as well as experience in business entrepreneurship and training in holistic healing into the vessel of our healing sessions. My goal is to help you gain insight into what is limiting you, and coach you to find the courage to reconnect with your source and your core.“

Visit MelitaMarshall.com

VitalBodies recently finished the re-creation of an Oregon House Web Page. From this template, all the other pages on the Oregon House web site can be updated.

VitalBodies created the template to be W3C Valid Table-less XHTML Strict and Valid CSS.

(Click image to see a larger clearer version)

The OregonHouse Events page (shown above) and a few other pages were brought up to W3C Valid CSS XHTML Strict table-less designs as part of an ongoing project of keeping the web site up to date.

The web sites design was originally done by Paradigm-Graphics some years back.

-

OREGON HOUSE:

“Oregon House, a peaceful Oregon coast retreat center for individuals and groups. At our unique central Oregon coast resort we invite you to relax, reflect and recharge. At Oregon House you experience a different world, close to nature’s beauty and the transformational energy of the ocean.”

- Oregon House is located in Yachats Oregon -

Visit OregonHouse.com

Portfolio: Mandala Arts Valid Table-less XHTML Strict CSS

VitalBodies recently finished the re-creation of a Mandala Arts design.

VitalBodies took Mandala Arts existing home page design and made it Table-less W3C Valid XHTML Strict and CSS.

(Click image to see a larger clearer version)

Earlier last year VitalBodies solar powered the MandalaArts.com web site.

-

MandalaArts.com is the home of

Stickers, Body Art Tattoos, Magnets, Flag Stings, Streamers and Wall Hangings.

- Original Art By Bryon Allen -

Visit MandalaArts.com

In web page building you generally have two main options,
Fluid and Absolute.

If you are from the art world and are used to absolutes then designing for the web can be a hard transition to adjust to.

You want that so-and-so the exact color, size, and location that you want it.
This is an Absolute-ist way of thinking.

The language of the web was not designed for absolutes but rather to display information on a broad range of devices.

This broad range of devices that your masterpiece will display on, each with their different strengths and weaknesses, is what is so hard for traditional designers to adjust to.

As a designer you will never know how your masterpiece will display for your audience that you will never see.

One can do absolutes in web page building but you rule out a large portion of your viewers and their needs.

Fluid, for example, allows your viewers to make the text a size they can read, rather than just look artistic on the page. A fluid page can change shape and size to better match the width of the screen of the viewer.

Making your page be accessible and work for a broad range of people, browsers, devices and operating systems is a Fluid-ist way of the thinking.

Not everyone has a new 30 inch high resolution LCD. But some do. Others will see your work at 640 by 480.

As a designer you actually have no real way to rule your design with an iron fist an force THEM to see your work the way you want THEM to see it.

Not unless you buy them all new machines. Oh, and heal them all to perfect vision and such.

And…

This is not to say there are not many valid reasons to design using absolutes. There are…

For people new to designing XHTML, CSS and Valid web pages, you might find gaining an overview of what you are up against in web page design helpful. This post is intended as a very brief but helpful overview…

Create a multi page multi section web site from scratch in a text editor?

Why Yes.

A one page site that can assemble itself into over 100 different web pages and up to 10 different sections, 3 style sheets and all be Table-less, CSS, XHTML Strict and have every page validate?

Yes.

DESIGN: This version of the Vitalbodies web site used hand coded (in a text editor) CSS, XHTML, SSI Content Management System and Administration. All of the little site graphics and backgrounds were either created in as vector art or raster program or shot and edited with a digital camera. All of the company images a side from Ecolution where images by those companies. The Ecoloution hemp bag was one of our own product shots. The site had three styles sheets the customer could choose from by clicking the small icons in the upper right corner. One layout was fluid and fills the screen and the other is a fixed width. The third what a nearly style-less design to show what having no style sheet at all looked like or for printing. At the time this site was first being served, the site was one of the few completely table less sites online that every single page validated XHTML strict. Each section had its own color scheme. There were countless fragments.

CMS FRAMEWORK: The hand coded content management system included a random images on the main page and a hand chosen image on each company page.  The CMS also automatically created the meta title, keywords, and description and basically assembled the the whole site from reusable fragments. each main part of the site was a fragment. Meaning the nav bar was on its own page and the header on its own page etc. The fragments wete assembled by a special page that deterines the layout of the fragments and which fragments to use. Each fragment had to be designed with inteligence so that all the correct information was assembled in depending on what page was being assembled. The most challenging was the navbar that changed (tabs, colors, section, and page names) depending on what page and what section the site viewer had clicked to.  The CMS also generated the nav barm page layout, style sheet selection, and many other features on the fly. The site design was interesting in that every page was the same page, yet that one page could assemble into any of the 100 or more pages on the web site. Pure magic!

ADMINISTRATION: This administration program was designed so one only needed to edit one single text based page in order to maintain the web site.

The Third Table-less, XHTML Strict, Valid, CSS Design:

The Forth Table-less, XHTML Strict, Valid CSS Design:

(only the style sheet is different and the random images)

Each of the sections and pages colors can be seen as you move down the page.

VitalBodies builds or remodels web sites or pages for different folks now and then and one of things we try to point out is the value of having a Strict, Valid, Table-less, CSS design. A design where the structure and style are separate. This post was adapted from an email about some of the reason why.

TEST YOUR SITE:

The first test for your current site is to go to the site and crank up your font sizes in your browser.
How did the site do? Did it break your layout? Now adjust them down as see how the site does.
It is highly likely many of your your sites viewers will have their fonts sizes cranked a notch or two either in the bowser or the Operating System.
Does the site validate? Click on the links below and open them in a new tabs. Then paste the address of the site you want to check, and see how the site fairs.

MARKUP: http://validator.w3.org/#validate_by_uri

CSS:http://jigsaw.w3.org/css-validator/#validate_by_uri

If the site is not valid then the browser will go into what is called Quirks Mode and render the site how ever the browser sees fit.
This will be different in each browser and each version of each browser and each OS.
Better dig out about 50 computers to fully test how your site will look on all those browsers, versions and OSes.
What fonts are used by your site? Are they fonts that ONLY come with Windows?
Well, then how will a Mac or a Linux display your sites fonts?

How many lines of code will you have to go through to edit all those font tags? Hopefully someone told you not to use font tags in your HTML. Fonts should be specified in the style sheet.

And what if you want to change the layout of your site from a nav bar on top to one on the side or from the side to one on top?

Essentially table-less frees you from tables where tables are not needed, like layout. Plus you are free from sorting through a whole lot of junk like all the column, row and other table tags in your code and a obstinate structure to have to fight with layout wise.
…A FIXED/SET hard to change layout that in many cases requires a complete rebuild of the page to make changes to the layout.

With no tables you could put the footer where the header is and move the nav to the side or make the site wide or narrow, you name it. All with out changing the XHTML and only editing the style sheet.
With a table, well, you have that and only that layout – You CAN NOT change that tables total layout with the stylesheet.
And you would not have to change every page one by one rather than changing them all with just one style sheet.

VitalBodies spent a number of years learning how to be free from all that. A big part of that change was to just say no to proprietary web code and closed source code web programs. The final piece was just put into place, the OS Ubuntu that glues all the other pieces together.
Interesting fact is, this journey towards freedom all started the with web mastering…

CSSZenGarden was the inspiration: http://www.csszengarden.com
“A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.”

NOTE: The XHTML code does not change on the CSSZenGarden site, only the stylesheet – that is the power of table-less, Strict, Valid and CSS.

-

If you take the time to learn to be a webmaster, learn to make table-less Strict Valid CSS web sites.

Having a strict standards based site is one that ANY software tool that is standards based can work on and any webmaster that learned standards based web building can work on. Ah, freedom…

-

And guess what tools are likely to be standards based?
The free as in freedom, Open Source tools!
And guess what webmasters are the ones that are likely to do standards based code?
The ones that support freedom…

MARKUP: http://validator.w3.org/#validate_by_input

CSS:http://jigsaw.w3.org/css-validator/#validate_by_uri

If you do not create pages, but hire others to create them for you, you can check the quality of their work in terms of web standards. Insist on valid code.

If you are not familiar with using these Validating tools consider these tips:

• Make sure you have a DOCTYPE declaration.
• Get the XHTML (markup) correct BEFORE validating the CSS.
• Resolve the errors in the code (if any) from the TOP down.
• Have fun and learn as you go.

I like to check the Show Source and Verbose Output check boxes.

Show Source lets me see the all the code by line number so I can find the offending code AND see the code that surrounds that offending code. Verbose Output give me more information to go on resolving issues that the validator finds.

There are tabs to allow you to have the validator check you code in what ever way works for you. Like by URI, file upload or direct input etc.

URI for checking existing pages but means you have to upload the changes to your server each time you want to check how valid the code is.

With Direct Input you can just copy and paste you code into the the validator and then edit the code in the validator to save time. When you are done paste your valid code back into your site and and upload.

File Upload will allow you to upload the the file from your computer.