Well, pretty much all of it mate. How do I go from a psd file to a SD skin?
I think there's a little misconception: how you'd go from a PSD to html/css is not in the scope of Subdreamer, but a process that needs to be learned or acquired by other resources such as sites specialized for web design and the used applications for PSD.
Once you have at least one html and css file each, the easiest way to convert that to a SD3 skin is primarily about structuring and splitting the template into their respective content blocks.
Caution: a conversion requires a new skin to be created in SD3, which will be activated immediately! This should not be done on a live site, but either a local webserver or a fresh, password-protected SD3 install in a sub-folder!
What I've done so far, I can try to explain a bit:
* purchase a ready designed website template that includes full html and css as separate files (it may even contain several files for each already)
* in SD3 create a new skins subfolder with a name of your choice (no blanks or special characters in it)
* take a copy of the default "skin.xml" file from e.g. "sequel" and copy it that into the newly created folder and make it writable in FTP (0666) for later; do not import the skin itself
* in SD admin create a new skin (which later shall use the newly created folder, too)
Back to the template you purchased:
depending on author, it's archive may contain one or both folders like "site" or "site_flash" or similar; in my recent conversions I only used the "site" folder which contained the full HTML/CSS-based content.
Whatever they deliver, you'd have to decide what is the best usable content for conversion and keep in mind, that flash content sites may not be much of use as there may be no way for SD to supply data to it for e.g. menu etc.
CSS conversion thoughts
This can be a bit of labor either way: if the template contains only a single css file, like "styles.css", just copy it's content to the "skin-css" CSS entry in SD.
But if it has additional css files like "layout.css", "reset.css", "grid.css" and others, copy all of those to the new skin's folder.
If the main css uses css "import" statements, you must adapt all paths pointing to the additional css files manually (like "skins/myskin/reset.css" instead of "../css/reset.css").
Also look out for all image links for e.g. backgrounds specified in an "url" attribute so that their paths are also corrected. An extra "images" folder of the template can either be copied to new skin's folder as a sub-folder or all images copied to the root "images" folder (shorter paths).
Decide early on what you'd want (total separation of files vs. shorter paths) and take care of the image url's accordingly.
In one case the template delivered a folder called "bin" offering extra php files to be used for a contact email layout. Do NOT copy any of those php files to your server! Those will not be used by SD and may pose a security risk if used "as is".
HTML conversion thoughts
In my latest conversion task the skin offered multiple site layouts, each contained in a separate HTML file like "index.html", "index-2.html" and so on.
For any available layout file I then created a new layout in SD3 and pasted the file's content into it and named the layout the same as the file ("index", "index-1") so that it would serve as a reference back to the file. But that's just a matter of taste, you could name the layouts whatever you like in SD3, but at first you should make sure to not loose sight of what content came from which template file.
Header / Footer
If you're lucky, all of the template's layouts will use the same page head (everything up to and including the "</head>" tag) and footer (you should know what it is when you see the same HTML markup at the bottom of each layout).
If so, copy the common header HTML markup to the SD3 "Header" and replace in the layouts the same code with template variable "[HEADER]" (without the quotes). This should be done/checked for all layouts.
IF a template layout is different in any way from the "common" markup, leave it unchanged (you can change it later if need be).
Template pages
Once that is done, either re-use existing "Pages" within SD or just for the time of conversion create new pages for each template layout and name them appropriately. Then edit each plugin positions for each and select the right layout (top-left) for it.
Then I'd check if the frontpage of SD3 actually loads each of those pages fine, and especially check if any additional CSS files (if existing) and images are loaded.
During those checks I'm mostly using the Firebug plugin for Firefox which has a nice "Network" tab that would highlight in red all "not found" files (other browsers may have similar developer tools available).
If there are any files not loaded, I'd re-check the "skin-css" for any URL's used anywhere (as mentioned above: "import" or images).
At this time you will not see any SD plugins, obviously, but the output hopefully matches the advertised layout(s) of the template author.
Depending on what is already contained in SD's CSS entries (other than in "skin-css"), it may be required to check those for naming collisions.
SD plugin application
Assuming that the delivered layouts display fine on the frontpage as mentioned above, it'd be now the time to apply actual SD3 plugins to the new layouts.
This is basically the most work and will need your full attention as you'll have to identify within - sometimes complex - HTML markup the places, which only contain "demo" content from the template author.
I don't have examples at hand right now, but if there's markup like
"<div class="row1">lorem ipsum blah blah</div>" then that to me seems like a perfect candidate for a plugin slot (or just remove the content within the DIVs if not wanted).
So remove that obsolete markup and/or replace it with this: <plugin>
<plugin_name>[PLUGIN_NAME]</plugin_name>
<div class="wrapper">
[PLUGIN]
</div>
</plugin>The plugin name may need to be enclosed by another HTML element, depending on the original template like a special H3, like this:
<h3 class="spacing-bot">original title</h3>becomes this:
<h3 class="spacing-bot"><plugin_name>[PLUGIN_NAME]</plugin_name></h3>It's highly important that you become familiar with the template layout's structure so that e.g. no DIV's are lost or added in the wrong nesting level or not closed correctly.
As an extra safety net I'd use a secondary editor to temporarily store different versions of your changed content, just as additional backup, like a dummy, extended clipboard so to speak.
If you'd make it this far, the conversion is pretty much done. Other steps I'm not able to explain in detail here and now is to apply changes to all the other CSS entries SD has or how to replace a template menu/navigation.
Good luck! :)
Cheers,
Tobias