Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Joomla Templates from your PSD Designs

Joomla Templates from your PSD Designs

Joomla 1.5 templates from your Photoshop or Gimp designs. Now you can use the popular Joomla Content Management System (CMS) to build a professional, full featured website and enjoy your custom designed template.

The Joomla feature is brand new and simple - so far. It works very similarly to the Drupal features. For any of the standard Joomla regions you simply add a layer denoting where you want Joomla content to appear and name the layer right. Accepted names are:

* content_joomla - this is the most important one. This is where most of the regular Joomla content gets rendered by default.
* breadcrumb_joomla
* left_joomla
* right_joomla
* top_joomla
* user1_joomla
* user2_joomla
* user3_joomla
* user4_joomla
* footer_joomla
* debug_joomla
* syndicate_joomla

All of the other psd2css Online features will work in your template as well.

Here is the example site:

If you are on a look out for hosting your Joomla site, you have a look at reviews of some best Joomla
companies listed at

Oh - and if you are a Joomla expert and have an idea for a joomla feature to add or in any way to improve the generated code, drop me a note! Thanks.


To Get Your Joomla Theme To Expand With Your Content

By default, your theme is static - it will be exactly the layout you made in photoshop. But more often than not, you'll want your theme to expand with your content - when there is a long article, you want the footer, and the frame around your content to grow vertically to compensate. Here is a tutorial that addresses making your theme expand with your Joomla content:

PSD to Joomla conversion is

PSD to Joomla conversion is such an eminent way to develop Joomla extensions or templates, but it has certain downsides too. Just for example, it is very hard to set up canvas and layout in PSD that would exactly fit on Joomla after conversion. In addition, incompatibility issue also strikes out during conversion. Joomla is vastly accepted platform that offers seamless pre-built themes and extensions those can freely be used for commercial purpose. Just for instance see There are several IDE’s available those allow you to create personal template for Joomla, hence why to be bother about PSD to Joomla conversion.

Joomla is an ultimate

Joomla is an ultimate platform to make you rid of coding's complications

Joomla is one of my favorite open source platform

Joomla is one of my favorite open source platform. I love using it :)

2.5.6 Joomla

can I use psd2css for 2.5.6 Joomla?

joomla 2.5

Hi There,

is this also working for joomla 2.5 templates?

hope to here from you

Great Info.

This is very great thing you have shared with us. Now I found enough resources by your tips about this issue, Thank you.


What size should I make the photoshop canvas when making a template? and how do I make sure the whole webpage is central to the page? see


Web Design Company @PixelCrayons

In today's technology dominated world, almost everything is at our disposal. All that we need to do is access the internet, make the relevant searched and a few clicks and we will have what we are looking for. But the process is easier said than done. There are tons of web sites currently vying for the users attention over the internet and to ensure success in the web world and attract more and more new clients, the company needs to work with dedication and maintain consistency in its look design and all the technicalities that goes into making the web site stand tall and distinguished in the web world. This is where the resourcefulness of a seasoned web design company comes into picture. This is exactly what PixelCrayons is known for. We are a leading and premier e-Business solutions partner to small and medium enterprises, and blue chip companies.

CMS is no less than a boon for a website. It increases the efficiency and accuracy of your website. It is flexible, secure and reduces website maintenance cost. PixelCrayons offers quality CMS solutions like Web and user friendly WordPress Development, large and extensive and extremely scalable Drupal Development, professionally crafted and feature enriched ecommerce web portals through Magento Development and developing complex and community based web sites with Joomla Development and along with that we offer unrivaled custom solutions. All of our E-business solutions are rigorously tested to ensure robust frameworks and superior functionalities.

Visit Here :

Joomla 1.7 Questions - _page and color

Hi, Shaun. Thanks for the great page. I'd like to ask you a couple of questions:
-is the psd2css "_page" feature intended to work for Joomla (and specifically, Joomla 1.7)?
-is there a way to set the background-color (rather than using images as background) for individual divs for Joomla pages?


joomla 1.7

i just troed this and it didnt work on joomla 1.7 - i downlaoded the PSD file, made changes keeping the same names on layers... and didn't work it doesn load on the temp mag... help! ;-)

joomla 1.6

Hi Shaun,

Can you tell me if Joomla 1.6 templates will be added? I like to change to Joomla 1.6, but i need you for my templates.



Interesting. Will try this at

Interesting. Will try this at home. I hope I can also achieve what you got from what you did.

[url=]treatment for acne scars[/url]

Web Design Company @PixelCrayons

PixelCrayons is one of the leading names in the web development industry. We excel in providing a mélange of web development services like PSD to HTML/XHTML, PSD to CSS, PSD to WordPress, PSD to Joomla, PSD to Drupal etc. We have a state of the art infrastructure and highly qualified web developers who posses the best industry experience. Our prowess lies in providing high quality and best web solutions with unmatched perfection.

We give priority to our clients and ensure that they are equally involved in the web development process. We work with full dedication and aim to provide only the best solutions. For this, we go through the client website and meticulously plan how to proceed further with the project. At PixelCrayons, you will find all in one solution to all your website related problems. Be it design to HTML, or CMS integration, we can help you with everything.

By PixelCrayons

PSD to HTML Conversion Service by is one of the most reputed PSD to HTML/CSS service providers. We have the profound experience in converting every kind of PSD design to suitable and user friendly HTML/CSS markup. We are dedicated to provide high quality PSD To HTML/CSS & theming services, Table-less HTML with SEO semantic code and optimized shorthand CSS.

We offer a wide range of conversions like- PSD to WordPress, PSD to Drupal, PSD to Joomla, PSD to Magento etc. We understand the importance of conversion in the process of web designing & development. This is why we have a highly qualified team of web designers and developer who understand the complexities involved in this conversion and provide the best results to our clients. We offer flexible packages. We have a large client base from different countries.

We guarantee 100% manual conversion. We provide an optimised code that ensures that your web pages take less time to load. Our latest technology and state-of-the-art infrastructure ensures that you get a high quality website. We offer a number of options to our clients to implement their designs as skins/themes/templates for a variety of software including WordPress, Drupal, Joomla, Magento and Email Newsletter., a PSD to HTML Company adheres to core set of industry ethics in every aspect of the service it provides. This is why we have a large number of happy and satisfied customers.

By MarkupBox

I was wondering if you would

I was wondering if you would like to be a guest poster on my blog? and in exchange you could include one link the post? Please reply when you get a chance and I will send you my contact details - thanks.
[url=]nike wmns [/url]

My first template attempt

Hi, I'm familiar with building sites in HTML and CSS. But this is new to me. I've built the PSD, ran it through and ended up with this:

I tried to expand the content pane but instead the content dropped down below the pane where it is supposed to be, and the word "topmenu" appears where the menu was supposed to be, and the menu dropped below it. I can change the styles on the type via CSS fine, but the positioning of everything is what I'm having trouble with.

Can you see from this what I'm doing wrong in the PSD?

Thanks in advance. You can email me at

Great and worderfull

Thanx this is wonderfull. I was a poor photoshop user but now look what i do :

Just few problem to center, but i'm very happy french user :)

Don't stop your service please :)


Problem with bullets


I have prepared a site using psd2css and the site turned out to be good.
But I had some issues with the bullets.
Even if I put bullets in the article it is not reflecting in the site.
I tryied to solve the problem with css but couldn't solve it.

Article / menu content

I downloaded the tutorial PSD and converted it into a Joomla template but when I use it on my (newly installed) Joomla site I can't see any content.

What am I doing wrong, I followed the steps of the video but it doesn't work for me...

Thanks in advance,

Joomla article / menu content

Hi, I have used the psd2css to create a Joomla template and the modules are showing up where they should be which is great. But If I assign my main menu or similar to any of the module positions the content is not being displayed, in fact nothing created in the back end of Joomla is being displayed in any of my psd2css modules. Can you help.

Thanks. M.

Hi mbassett - Have your tried

Hi mbassett -

Have your tried a refresh on your browser? Possibly the changes in the backend have been cached and need to be refreshed.


I may have this solved with just CSS

I had problems with this as well...and all of these solutions didn't work for me...all I did was in my #layer1 NOT the first one in the CSS code called (body) here is my css code:

* psd2css.css
* This is your external CSS style sheet. It defines all of the CSS styles that you
* are using in your page. If you are going to create multiple pages from the same
* PSD file (like a template), you will share this CSS style sheet between the various
* pages.
* This file was originally generated at
* May 28, 2010, 1:28 pm with psd2css Online version 1.78
body {

/* This is the background image to the entire page that you
* get because of the layer 'b_bodybg_jpg' that you created.
* If you would like this layer to stay static relative to the
* browser window (you don't want it to scroll with your content)
* just add the word 'fixed' to the line below (before the ;). */

background: #000000 url(../Layer-48.jpg) bottom center repeat;
height: 100%;
padding: 0;
margin: 0 auto;

/* You named this layer Layer 1 */

#Layer-1 {
position: relative;
margin: 0 auto;
padding: 0;
left: +0px;
top: +0px;
width: 1024px;
height: 900px;
z-index: 1;

Don't know if this was correct CSS formatting since I'm not a css god but its working....hopefully it may help someone else!

file naming

I love this tool. My only wish is that I could choose the name for the templates. Using Joomla you sometimes need more than one template, and they cannot all be called psd2css.



same here, but..

i did have the same problem but i did figure out. when you have generated the template go the folder where you have placed it (Unziped and not uploaded yet). then there should be a file called 'templatedetails' open it with word then you can change name,version author or much more.. good luck (:


Wow, this is a great tool. I am a fairly expert developer in PHP/MySql, HTML/XHTML and Javascript and I found that this is the easiest way to create a Joomla Template. I had to do a little scripting but it was nothing to compared to endless of hours I have had to code this stuff myself. Within a matter of about 2 hours (that's because I didn't read the forums first on the naming the layers sections first) I had this up and running.

I just wanted tell you that I signed up for the Unlimited and as a result I am able to get these Modules setup as listed:


The font color problem I had to work around with this basix html code example:

// <p style="font: 14pt/12pt Arial;color:#272A33;"><span style="font-weight:bold;">USER3</span>
<br />
<p align="justify"; style="font: 10pt/12pt Arial; color:#272A33;">This is user3. This is user3. This is user3. This is user3. This is user3. This is user3. This is user3.This is user3. This is user3. This is user3. This is user3. This is user3.This is user3.This is user3.This is user3.This is user3.This is user3. This is user3. This is user3.This is user3.This is user3.This is user3.</p> //

If you just think outside the box, you can make this thing work out. BTW, this is an actual customer/client template I am creating for them.

Oh one more thing, I have found a way around the frontpage and extra page set up. In other words, if you just want an abbreviated version of the main template you can actually build a secondary template that looks and feels like the main one but with different layering. Maybe on the second template you might have the main look and feel with these modules:

(and in my case)

The mod placements: user4, user5 and user6 are in the familybeach header section of my template. With this secondary template, I can now create the content look of those frontpage "read more" links.

I hope this kind of helps, I am very excited about using this website as it has helped me to save a monster amount of time.

Remember, it's all in the naming of the layers folks and study the forums and tutorials. If you do that you will find your answers even when it's not in writing. Us your deducing skills.

Thanks PSD2CSSONLINE, you guys rock.
Eric Sotelo
The Logix Labs Creative Solutions

Extra Page

Hey Eric,
So, after you created your secondary template as the layout for your extra page, where did you upload the files? Basically, I want the articles that I write to be linked on the front page. Clicking on a link brings you to an article page where you only see top_joomla, content_joomla, right_joomla, and footer_joomla. Of course, this page should be expanding.

Any thoughts?


Text Color

I was trying to figure out how I could change the text color on my site. I think PSD2CSS makes it all a standard grey.

I searched through the forum and couldn't find anything so I started poking around and playing with it.

I got the text color to change by adding the hexidicimal color in index.php. I put <font color="ffffff"> right after the <body> tag (actually it looks more like <body><font color="ffffff">) and closing it with </font> just before the closing body tag </body> (it looks like </font><body>

I just thought it might help someone else so I wanted to post it.

Making a joomla template

Hi I was able to get my psd design into the joomla system but how do I get my menu to work with the joomla menu for when I add articles? the links that I created just link to pages that are not in joomla. Is there a way to do that?

Only Right and Content_joomla is Working

my site is
user 1 ,2,3,4 footer and top isnt working.
Do you have any idea what i could be doing wrong?

Also is says that the Paramater ini is unwritable

existing site 2 joomla

i have an existing site that i would like to convert to joomla.

i perfer not to change any characteristics of the site

buttons, nav, images

i also have the original psd file for this.

what is the essayist way to convert this site

i have a basic understanding of how to create

custom joomla templates but would like to kno more

about conecting my nav bar links to joomla pages

part where i find myself extremely lost

How do I center my page and page background

After I got the conversion my page I uploaded the template, upon checking the template live, I noticed that the site is all left. Where in the CSS (or what code should I use) do I put the CSS code for centering and also what is the code for making the page background color.


How do I center my page and page background

I did it like this:

In the file psd2css.css I changed the position from absolute to relative

/* You named this layer Background */
#Layer-1 {
position: absolute;


/* You named this layer Background */
#Layer-1 {
position: relative

And in the index file I add the <center> before the first DIV

<!-- This is 'Background' -->
<div id="Layer-1" >

And it works great!!


In order to center your whole page add a layer the full size of your canvas in Photoshop and name it _center2. Make sure that none of your other layers are behind or exceed the size of your _center2 layer or they will not be centered.

Joomla: Images are not in images folder

Hi Shaun,

You have a fantastic site and service. I appreciate it very much.

When I open the psd2css files, I see the images are in the root folder instead of in the images folder like standard joomla templates. Is there a particular reason why did it this way? While your theme works just fine, it doesn't match my other joomla template works.



Container vs. center

So I'm learning how all this works and I have successfully made a Joomla template but I have a few questions right now.

1. If I want everything centered I have to use the center_empty command? Do I have to use other containers for everything else for my design like container_empty to put backgrounds and other graphics in? So for a background I have to put this in a container? What should the container name be? container_empty? Wont this command not show graphics? If I remove the _empty is the command still recognized and converted properly?

Also if I use more than one template design in joomla will I have to rename all the CSS/HTML layer names to get templates after the first one to work? I made two templates exactly the same way with two different images and they dont both work on the site at the same time. If I delete one template from joomla and install a new one it works but they dont both work when installed to be used as a template for different pages. Where is a video tut that explains how the containing layers work and what they should be named. I'm almost there.... A couple answers and a light bulb is going to start flashing over my head!!

Under the joomla documentation you have the standard module location commands listed but not whats required for containers.


Thanks for the great tool!!



I'm not sure what, if anything, I am doing wrong.

The thumbnail that is created is your page, not mine. Can't get the articles to print properly either.


Help needed

Hi Shaun!
Theese tools are amazing, the only problem is that I can't use them properly:D
Can you please upload the psd file which was used in this video, or a psd which was made for joomla?

Hi Zams - I think here is a

Hi Zams -

I think here is a link to the PSD file in the example page made at the link above. But here it is again:

You know one of the biggest problems I have running psd2css Online is when an older example uses some technique that some newer feature makes obsolete. :) I'd use the newer _frame and _bodybg-rx features in this design for example.



Hi Shaun thanks for

Hi Shaun thanks for responding back. I tried it again with the other psd sample you had up and that one worked fine. Thank you

Collapseable Modules for Joomla Templates

I think this system is really awesome! Can modules positions be collapsible? Meaning if "user1" module is not in use, will there will be just an empty space, or will the page re-adjust? I hope this make sense. If so, could you give some instruction on how this can be done using the psd2css system? Should layers be renamed? Let me know. Thanks!

name of layers - problem


I made everything step by step like it says in tutorials and documentation. But there is still one problem. When I install it in my joomla a lot of layers is missing.

I understand that to make a user menu (login) I had to make a group of couple of layers and name the group, but still... nothing :((((

This are my file *.psd to take a look:

maybe someone can tell me what i made wrong.

thank you
greatings from Philly.

The items are not showing on Joomla

Hi shaun -this is A GRAET JOB you're doing
please if you can help I designed a photoshop page very simple like you showed on the vid, made only four layers - I converted and installed and changed the default theme and beside the text non of my logos, squares and colors appeared what did I do wrong?
Thank you for this incredible service that you're doing/


How do I make my browser have unlimited constraints so that the edges of my .psd file are not visible. I have the entire site centered in black, but beyond are white. Any ideas? Otherwise, I love everything you guys offer!


Hi gatz - Sure - use the

Hi gatz -

Sure - use the _bodybg Layer Naming Convention.



I tried to install this on ym site, but the whole page became distorted. None of the images were where they were meant to be and the content was in the wrong place at the bottom of the page


Help me by details

i have design psd but i want what can i do to convert it to css

background colour

Hi Shaun,
First of all many thanks for the tutorials and the free trial on your website for converting.

I downloaded your PSD file, changed the colour of layer _center_empty from white to grey in Photoshop, but after uploading the PSD2CSS converted zip file to Joomla, it is still white (the file I uploaded was called JoomlaExpandingtemplate3.PSD).

Isn't it possible to change the colours in the template in photoshop? If it is possible, could you please explain how?

If I would like to have navigation at the top, how would I call that layer in photoshop? top_joomla or something else? I assume I would then have to delete the layer left_joomla?

I really hope you can point me in the right direction.

Many thanks in advance.

Kindest regards,

Hi Andy - Apologies for not

Hi Andy -

Apologies for not getting to your question sooner. I do have a day job and when things get busy there, I'll fall behind on the Forum here. Luckily there are a number of users who answer questions too - please feel free to answer any questions you find here that you know the answer to. :)

So to answer your question above - the layer called _center_empty is, empty. The graphics (color, image, etc.) in that layer in Photoshop will not be displayed because of the _empty in the layer name. If you want to see that image (be it filled white or red or some image), remove the _empty from the layer name. An _empty layer is WAY faster to render in your site than one with graphics in it (since no image is downloaded). The point to the _center_empty layer is that everything within that layer will get centered due to the _center in the layer name - that's all.

So yes - completely possible to change the colors, the graphics, the designs, the layouts - you are in total control of the look of your theme.

All the possible _joomla Layer Naming Conventions are listed in the documentation. Take a look there and at the video tutorials for more info on how to make Joomla themes.



generated the joomla template but does not work (from ur psd fil

HI Admin of the site,

First of all thanks for making such usefull site.

Well i have tried the joomla template making option.
as you have already given the psd file.

so i have just downloaded the psd file and without changed
i have convertted into joomla template and installed it at my joomla site
but i am not
able to see the template which you have given at the
demo link.

I did not find the upload link let me know if you have one.

i wish to send by email


Hi 2 - I'm unclear. You said

Hi 2 -

I'm unclear. You said that you converted the PSD file into a Joomla template, but you also say that you can't find an upload link? What do you mean by upload link?

I'm assuming that you downloaded the example PSD file (JoomlaTest2.psd) and uploaded it to psd2css online via the 'Upload your PSD' form that is at the top of every page on the site. If you were logged in, and either within your first 2 weeks free or a paid account holder, then you were presented with a link to download a file called Are you saying that you did all that and when you use the Joomla template installation tool to install the template to your Joomla install, and choose it as the current template that you don't see the template?

I just tried it again and with my Joomla 1.5.15 installation the generated code from JoomlaTest2.psd works great. Are you sure you were logged in? Are you sure that you are within your first 2 weeks free? Did you install the file using the Joomla template installation tool? Did you make the newly installed template current?

Let me know if after making sure you've done all that, you still think something isn't working. Thanks.


copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content