Well it took a little while, but it's finally here. 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: http://joomla.psd2cssonline.com/
If you are on a look out for hosting your Joomla site, you have a look at reviews of some best Joomla
hosting companies listed at webhostingsearch.com.
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:
http://psd2cssonline.com/node/1164
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,
Bertus
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.
--
Shaun
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 http://psd2cssonline.com
* 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;
align:center;
}
/* You named this layer Layer 1 */
#Layer-1 {
position: relative;
margin: 0 auto;
padding: 0;
left: +0px;
top: +0px;
width: 1024px;
height: 900px;
align:center;
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.
Cheers,
-=Daniel=-
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 (:
PSD TO CSS ONLINE
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.
http://ads.thelogixlab.com
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:
content_joomla
left_joomla
right_joomla
logo_joomla
user1_joomla
user2_joomla
user3_joomla
user4_joomla
user5_joomla
user6_joomla
footer_joomla
syndicate_joomla
search_joomla
debug_joomla
top_joomla
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:
content_joomla
left_joomla
right_joomla
footer_joomla
sydicate_joomla
top_joomla
(and in my case)
user4_joomla
user5_joomla
user6_joomla
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.
Signed,
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?
Thanks,
Zack
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 www.irontribe.us
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.
Thanks
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;
into
/* 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' -->
<Center>
<div id="Layer-1" >
And it works great!!
Centering
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.
Thanks,
Azad
Container vs. center
Hello,
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!!
-cliff
Thumbnail
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.
Keith
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:
JoomlaTest2.psd
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.
Thanks.
--
Shaun
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
Hi!
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:
http://cswlegionowo.nazwa.pl/joomla/gssl_new.psd
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/
Question
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!
Thanks!
Hi gatz - Sure - use the
Hi gatz -
Sure - use the _bodybg Layer Naming Convention.
--
Shaun
problems
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
plz
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,
Andy
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.
Thanks!
--
Shaun
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.
otherwise
i wish to send by email
2
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 psd2css.zip. 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 psd2css.zip 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.
--
Shaun
Same Issue
Just a little more to your answer,
I had the same issue,
the template just needed to be kept as "psd2css" and it worked.
Thanks for your great work.
Franck
it seems...
...as if the owner of this business and website gives people the option to ask questions on his site but doesn't have the time to answer any question as I see unanswered questions here. A shame.
Joomla error
So I made a template and had Psd2css process it. When I tried to upload the file to Joomla I received and error saying no XML file. Any hints?
Error! Could not find an XML setup file in the package.
I am also getting this error...did you find any help?
Hi - Kafff - you probably
Hi -
Kafff - you probably were using the Joomla tool while I had a bug in there. The bug has been fixed. Anybody else who is getting that error is probably not doing the conversion while they are logged in or while their account is current.
--
Shaun
I'm gettings the same error too:(
Hi Shaun, I followed your advise, logged in this time and tried again, but still no xml file was generated.
The preview file I viewed before downloading looked great, but it appears Joomla needs to have this file for it to work.
If you or anyone else manages to solve this problem I would be very grateful
Thanks
Hi Arhon - If you are seeing
Hi Arhon -
If you are seeing a preview file, then you definitely are not using _joomla layers. If a Joomla (or Drupal or WordPress) theme is generated, I can't give you a preview. Instead you'll see a message about how CMS themes can't be previewed (I'd have to make a whole clean install of each CMS for every PSD uploaded).
Please check your layer names again. Notice that case is important (content_Joomla won't work - content_joomla will). Also be sure that you are logged in and that you are either within your first 2 weeks free, or have a paid account.
If you still really think it's not working, please post your PSD file here and we'll see what's going on.
Thanks!
--
Shaun
Still Showing No XML
Hi Shaun I downloaded your file and just changned an image but when I uploaded to joolma it gives me Could not find an XML setup file in the package. So what do I do now?
Hi Mastabolt - I think
Hi Mastabolt -
I think something is going wrong in the process, so I'll start asking questions to zero in on the problem.
You say you've used exactly the example PSD file from this site, right (well you said you changed one image - but you didn't change any layer names)?
Are there any XML files in the zip file that you downloaded?
How did you install the theme?
Thanks.
--
Shaun
I had the problem
I had this problem after changing a few things in my template. My problem was that I had to unzip the psd2css.zip and insert an FLV file. When I did this it unzipped to a folder called templates(2). This was because I didn't previously delete the old templates folder. When I repacked it into a zip file that folder remained templates(2) and when joomla attempts to unpack it joomla looks for an XML file within a folder called templates. When that folder isn't named templates anymore joomla stops looking. Make sure the folder names stay the same and delete or move any folders from previous psd2css.zip files unpacked.
For Joomla Expanded
I've download the PSD you've posted for the last video with Joomla Expanded. I've uploaded to psd2cssonline and transformed it to a joomla template.I uploaded on my joomla (Joomla_1.5.11-Stable-Full_Package) site then I set it as default and it is not showing me every piece for example in my right instead of left_joomla I have a big whole. The psd2css_link is a little under the top. Then I've tried to do a template from scratch helped by the tutorial but the content_joomla_relative and footer_joomla are moved to the left of the screen (and between them is a wide space) and the top is centered correctly (here looks like only the container_empty is move to the left)
More users
Very nice work! Bravo!!
Why dont you put more positions?
All those at Tutorial staff can be used for joomla template creation?
Sorry 4 my bad english.
Joomla can't install the template
I just done the .psd file and use this site to convert to the joomla template, when i install it, the system give me the error message which is Error! Could not find an XML setup file in the package.
why is that, please help, thanks.
PSD-file from the last video
Thanks, Shaun, my respect, you have made a great site!)
Can you, please, make a PSD file from the last video available for download.
Evgen.
Doh! Of course. Thanks
Doh! Of course. Thanks Evgen for noticing that I hadn't posted the link. It's in the article above now.
--
Shaun
Great topic
Great topic.I am learning joomla nowadays..Here I got valuable information very clearly.Thanks a lot for sharing.
Thanks,
Life Insurance Quote (http://www.lowcostlifeinsurance.co.uk/)
Expanding Text
Can I use the expanding text feature in a Joomla template? More detailed info on creating Joomla templates would be helpful. Great site!
Yep - just made a new video
Yep - just made a new video tutorial yesterday (and fixed a bug :)) Find it here:
http://www.youtube.com/watch?v=d6HjLasHkkI
--
Shaun