Custom Drupal Theme from a Photoshop Design in Seconds

[ashty175]

Hi shaun,

i wonder if you can help me, i have created my own theme through photoshop with all the correct layer naming conventions (i Think). i have then uploaded to your site and then extracted the file. then i uploaded it through filezilla. but when i apply the them through drupal it just shows my theme like you would see it in photoshop, none of my primary links/blocks/menu have shown up.

do you know why this is happening? and how i can fix it.

cheers ash

[ulle89dk]

@ashty175 Got the same problem..

[psd2cssonline]

@ulle89dk @ashty175 We are still currently working on Drupal 7, so there might be some problems there; but doublecheck your Drupal names -- no capitalizations in layer naming and rasterize all Fx layers. :) Hope this helps!

[athleten07]

First, great video!

Second, like you said, its a fix sized theme.. and you say that i can remove the scrollbar in the .css-file.. but which .css file is it? and what code do i change?

If i remove the scrollbar, then i guess i cant see all of the content? so is it possible to make the theme, just like a regulary/standard theme where the page expands instead of a scroolbar?

[psd2cssonline]

@athleten07 please check out our Frame feature that will provide expanding content without scroll bars. You will also want to make sure to use bodybg as well as when the frames expand you are going to want to have the background extend and expand with it

[SRR119]

@athleten07 try using the Firefox plug-in Firebug and install the Drupal module this is a very good tool for finding out where everything is in your stylesheets

[forrestkholleman]

Hi Shaun,

Cool concept - but just out of curiosity, why PSD instead of Illustrator? A vector graphics package just seems so much more logical for creating a theme than does a raster graphics package...

Just curious.

- Forrest

[psd2cssonline]

@forrestkholleman with Illustrator you can also save to PSD format. Most designers through our research use PSD

[JOHNVDEEZY]

Does this tool still work for the current version of drupal?

people have posted on your forums and you tell them to send in their PSD to support. I sent in my PSD 14 days ago, and have yet to see a response.

[psd2cssonline]

@JOHNVDEEZY sorry that you have been having issues with Drupal. What is the current issue with the Drupal not loading

[BRedTheShizznit]

first great vid

when i copy a theme to my sites/all/... folder and select it, there is no content in it

i can't reset the old theme except by deleting the new theme

what is my mistake?

[psd2cssonline]

@BRedTheShizznit not sure what you are describing; but what we suggest is with all of our CMS's is upload the contents of the zip as is... it should do the trick...

[TLommy831]

@BRedTheShizznit - dont feel alone ive been battling the same problem. Soon as i set up the theme to run in drupal all it shows is the theme like a single image. cant edit modules or see any text no matter where i go inside of drupal. I then have to delete the psd2css theme and my drupal is back to normal with no theme installed. I would love to get the premium version but this is the one thing holding me back. I dont want to pay for this service if it wont work for me.

[champ2day]

layer 4 lol

[WMuckaMW]

link dont work

[psd2cssonline]

@WMuckaMW what link does not work? We are happy to assist any issues that you may have. if you need additional instructions please check out psd2cssonline (dot) com/node/186

[WMuckaMW]

@psd2cssonline download link , after uplod 

[WMuckaMW]

@psd2cssonline necessarily define the names of the layers, as shown in the video?

[shakaama]

you make me feel so dumb. I can watch this video 20 times and not understand one word :(

[psd2cssonline]

@shakaama try and check out this link for additional information psd2cssonline (dot) com/node/186

[shakaama]

@psd2cssonline got a 404

[psd2cssonline]

@shakaama if you send us the PSD file we can see what the issues are support at psd2cssonline com

[urfreeway]

Can you tell me the standard dimensions of the template ?

[psd2cssonline]

@urfreeway check out the W3C recommendations...

[Naramiss]

@urfreeway : +1

will be nice to know the content window dimension and the left column dimension please.

[Mtbfanro]

Good useful tutorial. In my understanding, for this to work, it means that all layers in Photoshop must be named with the drupal naming? where can I find a list of all valid drupal names please? thanks cheers.

[mattyburke1975]

Thanks, great video, can't wait to try it

[PaceShowcase2009]

This is great, thank you. Ignore all those stupid comments.

[jcontraros]

There is alot of negative comments on these videos. Although I want to learn how to create a theme by hand from a PSD...this program could be a very handy tool.

[aufumy]

this video is not what I was looking for, but I did find the knowledge useful that there is a generator out there.

[blogx113]

if you have fireworks with youre adobe suite "CS4" know automatiocally slices an outputs codes for you. Theres no need for this Software PSD to css online' anyways you want to learn how to hand code your stuff, generators add alot of crap code which can cause longer load times~ I prefer hand coding my work ~ some people take pride in this skill. " generators wont keep you employed.

[psd2cssonline]

Thanks for all your comments blogx113.  Actually I have a _lot_ of web developers who are much more productive because of psd2css Online. It does hours of the 'grunt work' that they used to do by hand. Then they add just their special coding magic by hand to what was generated.

[snorlaxx1337911]

@blogx113 ahahah fireworks in adobe :) you are funny but be careful they can be dangerous and might be prohibited in your state. vote quimby

[blogx113]

The reason why i opened it because I thought it was " an actual tutorial" its not its youre stupid comercial for psd to css online" ~ I am sick of seeing youre videos you have them tagged as something else when you open them "its the same old PSD 2 CSS bullshit~ I am sick of seeing this ~ I dont want to watch this shit i want to see how to create Custom Drupal Theme from a Photoshop Design in Seconds~ this is PSD 2 css software advertisment not an acutal tutorial asswhole

[vicktech]

garbage.

no info how2 customize menu links appearance.

[psd2cssonline]

Firebug and your text editor. It's in a couple of the other videos in the series.

[vicktech]

never saw any, no matter how hard i tryed.

To build your own html code for really outstanding menu buttons you got to dig into functions overloading.

Very badly documented topic and many questioners about it never have been given detailded explanation of jpg menu to drupal howto, with video examples.

Besides it is not clear how to turn into template html design with lot of images for autosize capability _and_menu_buttons_.

Wish to fix it once and for all?

- You're welcome.

[pear406]

Can you do this in GIMP? I know PS is better, but I can't afford it.

[psd2cssonline]

Absolutely. However the Gimp likes to make layers as big as the entire image. This makes for a really inefficient web page - lots of big image files. For any layer in The Gimp where the actual art is smaller than the whole page (probably all your layers), choose the layer to edit, then in the layer menu choose 'Autocrop Layer'. Tutorial 3 shows this little work around in action.

[GameWalkThru]

How do you chnage the name of the psd2css online name?

[psd2cssonline]

In the theme, you just change the art in the PSD file. In Drupal you use the adminstration menus. Try the Site Configuration -> Site Information page while you are logged in as user 1.

[Keegaroosky717]

This is incredible! It's exactly what I need, thanks!

[TheGigglefish]

can i load this into a zen subtheme

[psd2cssonline]

The psd2css Online generated theme is a whole theme in itself. I don't think you can load it in any useful way as a subtheme. But if you figure it out, post about your experience here or on the forums at the site.

[tegan71969]

Also, is there a way to incorporate a custom navigation into the them as well?

[psd2cssonline]

You can either use psd2css Online generated menus, but you'll need to hook them up (fill in the href tags) manually, or you can define a space in the theme for Drupal generated menus and use those.

[tegan71969]

Do you have a tutorials for this? If not it would be very useful. I am trying to make my own custom navigation and would love to be able to make this in photoshop, convert it with your site, link the css, and there you go....

[psd2cssonline]

We have lots of tutorials - check the site for the tutorials, documentation and the forums for information.

[tegan71969]

How do you remove the fixed size on the content area and make it fluid so you don't need the scroll bars? The fixed size makes editing a pain. Thanks for any advice you may have,

[psd2cssonline]

You can make it fluid vertically very easily by just removing the line in the CSS for the drupal_content layer that reads 'scroll: auto;'. Then you will not have any scrollbars anymore.

[tegan71969]

Ok cool, but what css file is it that I should remove that from? There are a few css files that show up:

psd2css

cssreset

style

style-rtl

I looked at each one of these and couldn't find that line of cose.

[psd2cssonline]

It should be in psd2css.css. There is a comment right near it with the name of the layer so it's easier for you to find.

[tegan71969]

Did you mean "overflow: auto" rather than 'scroll: auto'?

[psd2cssonline]

oh - yep - sorry about that :) you are correct, remove the overflow: auto line.

[tegan71969]

Ok I will give it a rip and see if it works. Thanks for the help!

[shakaama]

"suddenly shakaama walked into a clearing in the forest, having heard drum sounds he thought was familiar. However, the natives he now saw were not familiar at all and they spoke a weird language. slowly, he backed away, only to run into tree and knock himself out."

in other words, I thought I knew what this was but the jargon is so over my head. apparently i need to wiki what's going on LOL guess this isn't creating a theme at all.

[psd2cssonline]

Ha! - I'm sorry about the message, but enjoyed the beginning of your post :)

Please visit the site and check out what the Drupal theme features do. It does generate a correct and functional Drupal 6.x theme.  If you have more questions there is a forum that you can participate in and get answers from too on the site. Thanks. -- Shaun

[shakaama]

I felt so stupid hehe. But now I feel even ... uh ... stupidier [i made that word french to camouflage the horror of bad English] when I returned to my free html WYSIWYG editor and found it had everything I needed. I kept trying to write direct html code and it wouldn't show on the WYSIWYG part.

I feel like George Bush on the first day of Yale.

Thank you I shall indeed go to yon forum and seek what I might see. [i thought forum was spelled forumn or is that the Latin way of spelling it]

[kuiroe]

I just want you to know that you are amazing and that this tool is probably one of the best tools that has every been created for web design!

Kudos to you!

[glassprison01]

I'm using 6.9 and I uploaded through Godaddy FTP, and I copied the files to the "themes" folder..but after waiting and refreshing the page I still didn't see it..

[psd2cssonline]

Try copying everything from the zip file (it's a folder hierarchy that starts at sites) into the root of your drupal install. The generated files should end up in {root}/sites/all/themes/psd2cs­s.

[glassprison01]

Well, at least I thought it was awesome...I followed all the steps but my theme doesn't appear on the list of themes...?

[psd2cssonline]

Hi GlassPrison01 -

That's version 6.9, right? Did you refresh your browser while looking at the list of themes page? It's important that the generated code is copied to the right folder too. Feel free to check out our forums. -- Shaun

[glassprison01]

This is awesome. I bought a 6.3 Drupal theme when my hosting service only offers 6.9..and I realized this after I bought the thing. Uploading the PSD makes it 100 times easier.

[creedgaming]

This doesnt work Tried it and it doesnt use proper colors ,..... the tutorial you show is used whenever you use the site....

[psd2cssonline]

Hi -

I was wondering what you mean by 'use proper colors'? Do you have a PSD file you could send me so I can see what's not working? You can email it to me at my email address on the site. Thanks.

--

Shaun

[XshaolinkidX]

i had your same color problem, till i sat down and thought for a few seconds. it has to be a web color. not ALL colors are acceptable for HTML. go to your color wheel, and there should b a check box for "internet colors" this WILL fix your problem

[psd2cssonline]

If you design the content area so that there is no 'bottom' or graphics below the content then you can just remove the 'scroll: auto;' line from the CSS for the content_drupal and there won't be any scroller. You can probably use the _relative layer naming convention too if you do want graphics below the growable content area.

[rossiv62964]

cool! gonna check your site. The problem is a fixed layout ends up with a scroller in content area. Anyway, nice program of conversion of psd files.

[imoddc]

wow man!

That's amazing i m gonna check it out!

thanx!