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
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
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
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
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
links?
Thanks for the tutorial, it is very nice, but I am still having problem- how to make links connected to joomla gui categories? When I name my layer "menus_link" it is trying to get me to joomla_web_page/menus.php.
Joomla links are built as joomla_web_page/index.php?args....
thank you for answer. nelf.
Hi Nelf - Yep exactly. So
Hi Nelf -
Yep exactly. So you need to edit the index.php file by hand then and change the href="..." tag to match whatever it is that you want that _link to point to.
Thanks.
--
Shaun
Modules
Hey Shaun,
At first i was sceptical about this whole PSD2CSS Website, but now i see from this joomla version you have created one hell of a tool. From this i can now make 100% custom templates for my customers in a matter of hours, instead of having to get a pre made template and alter it. Now its especially annoying when you find an awsome template but the Modules are in completley the wrong position from what you want. I need to ask though... What if you wanted a custom module name? insted of having to stick to that list you have produced... or there arn't enough modules for the website at hand and you need some more, what would you do then?
but great site. I would love to donate for your work you have done. Now i will be able to create more customers sites in a very short time.
Thanks again
Nick
Huh?
Am I missing something incredibly obvious? The CSS that this tool produces is something NO self-respecting web developer would ever write. Absolute positioning? Fixed heights and widths? Heck, you might as well have done this with HTML tables...
dwhsix...yes, you are missing something, very clearly...
This tool is NOT designed for WEB DEVELOPERS and yes, that is "incredibly obvious". It is designed for Photoshop designers that do not know how to write code... And frankly, I'm producing fully functional websites using it that are 10 times nicer looking than many I see from very experienced web developers. This tool is ingenious.
dwhsix - Thanks for you
dwhsix - Thanks for you comment. You are as you know not alone with your opinion.
What I've noticed is that absolute positioning vs totally fluid designs is one of those religious type issues that people can get pretty excited about. Like PC vs MAC, OpenSource vs Microsoft, VIM vs all other text editors, etc. (VIM all the way! :) )
The fact is psd2css Online supports vertically expanding content with _relative layers and we support _floatleft and _floatright. They help, but I know you can't call that totally fluid design.
psd2css Online takes a static image as input. And as a tool intended to help streamline and optimize the process of getting from design to working web site, absolute positions sort of fall out of the paradigm. If you want to do totally fluid designs, you might decide psd2css Online isn't the tool for you.
I've seen too with most professional web developers who look into using psd2css Online is that they see a spot for it early in their process building a site for a client. The see that the structure of the code isn't exactly what they've always created by hand. But they also recognize that the hours that are saved having psd2css Online generate the initial structure and all the files with all the clients art is huge. They can get more clients done in a day and that's a big win for them.
But thank you very much for your thoughts. Please feel free to continue participating in our forums!
--
Shaun
Old Joomla 1.0.15
Hai Shaun..
Your website is amazing and really help people especially converting to famous CMS such as Drupal and Joomla
But for Joomla why you dont create for the version 1.0.15 because that version of Joomla still used until today and me myself only can make custom components or module in Joomla 1.0.15 . :-D
But I still found your web is great !
For now on I will use your web as my tools for web development...
Thanks
Novrie
makes sense
Shaun -- as you say, might make sense as a way to jump-start some work. My comment was based on on a brief glance at the sample page created, since I was intrigued at how this tool would accomplish what I thought would be very difficult to do automatically.
(and btw, I'm an Emacs man myself ;-) )
Ok, well, Emacs people are
Ok, well, Emacs people are welcome here too :)
Thanks for you comments. Check back now and again, I'm making improvements all the time.
--
Shaun
Bravo!
Been waiting for this and couldn't be happier!!!
Welldone!!
Hi,
never did PSD to Joomla and lost got last week an offer to do one.I was thinking to give it away until I drooped on this site! what can I say- Bravo and more!!
now going to work on it...
Avi
-------------------------
Admin and Publisher at:
http://www.derberliton.de/
Web and Graphic design
http://www.whitepagedesign.com