How do I create a theme from VSD to...

User 492222 Photo


Registered User
29 posts

I've designed my site in VSD and have had a lot of positive feedback on it. Everyone loves how clean and crisp it looks...but I'm trying to teach myself the ins and outs of doing everything through HTML...so I'm looking at doing up the site in the HTML editor to get a feel for things since my site is really simple. This is the link in case anyone wants to take a peak and see what I mean. www.patbatesromances.com. If I can figure this out then I can do it with my other site as well.

I'd like to take the basic design...the theme of the site from the VSD to the HTML editor - but I'm not sure how. Is there a way to take the design and save it as a theme that's compatible with the HTML editor so that I can start putting in the graphics and such without having to spend a week trying to get my banner in place hehe. :lol:

Thanks so much for all your help I appreciate it.
User 38401 Photo


Senior Advisor
10,951 posts

Hiya Patricia,

I don't think it would be all too hard if you want to take just a bit of time. Here's what I do when I'm going backwards like that ( in other words taking the theme out of the site rather than putting it in lol ).

1. You have the site setup already, if you're familiar enough with code then export the entire site to a new folder. Make a backup of that folder so you can always pull a page from it to start over if you mess it up. Basically your backup copy.

2. From here it's all just remove the content. Take out the text you put in, take out the pictures etc. so that you're left with only the theme elements.

NOTE: When you're removing things, one good way to make sure you know what is what afterwards and what to put where is to make comments

<!-- message in here -->

in the beginning of sections or at the end of particular lines of code so you can always be sure what you had there or what you want to go there and find it easier each time.

NOTE: Sometimes it may be necessary to add paragraph <p></p> or div <div></div> tags to the sections to space it out some. Add a space code in between the tags to give it body so it spaces vertically for you and doesn't look all weird like this:

<p>&nbsp;</p>
or
<div>&nbsp;</div>

Not sure if that's the route you're looking for to make a theme usable, but it should work for the most part. Hollar if you need more assistance with it :)
User 345577 Photo


Registered User
373 posts

If you take the steps noted by Jo Ann, you need to be careful about what you remove, to avoid messing up the table that contains most of the textual information on the page.

I would recommend to start removing text at "Welcome to my author's page..." and continuing to "...this most amazing journey." In this way, you're not affecting any of the structural elements of the page.

As Jo Ann noted, when you enter your new content, you'll have to learn about the paragraph, break and non-breaking space tags to form paragraphs and sentences. If you study the current layout, you'll be able to see how these function.

Not to be critical, but you have some errors on the Home page that you might want to clean up:

In this sentence fragment "...enspire and aide those who are interested in getting there work...", should be replaced with "inspire", "aid" and "their". Also, "acquire" is incorrectly spelled in the last sentence.

I didn't go looking for errors, these just stood out as I looked at your page. No offense intended.
User 492222 Photo


Registered User
29 posts

Thanks Jo Ann for the help, I'll definitely try that. I have another question for you though. If I'm in VSD how do I export to a new file that's compatible with the HTML editor? Right now they'res no compatibility...or am I confusing myself needlessly?


I didn't go looking for errors, these just stood out as I looked at your page. No offense intended.

I appreicate that you found them CBrillow. I wouldn't have and I've looked at it for a very long time. hehe. I'll keep in mind what you said as well...right now my biggest thing is getting the template done...before I start putting things back and such. Hopefully I can teach myself fairly quickly...I love VSD but there are somethings that I'd like to be able to do myself.

Pat

User 38401 Photo


Senior Advisor
10,951 posts

Hiya Patricia,

When you do an "export" from VSD it will ask you for a location and then it automatically exports the files in HTML format for you. Basically it's dumping all the same files into a folder that it would normally upload to your site which is all in HTML format too. This way you don't have to download things from your server and hope you have it all. Make a folder somewhere ahead of time that you can easily find to export it to and that will make this part easier then.
User 492222 Photo


Registered User
29 posts

Hi Jo, thanks for the great tips. I'm working on doing this...but so far I'm having more luck iporting into the HTML editor...Where do I go to export it from?
User 38401 Photo


Senior Advisor
10,951 posts

Well exporting would be from VSD into a folder on your computer where you can then open those files in the HTML Editor. The editor already has it in raw code so there's nothing to export there.

What I do once I have pages setup how I want them for using them as skeletal pages or theme based blanks is I created a custom_themes folder in my projects area and in there I created a folder with the name of the theme (edited so I know it's something I customized). This way I know right where to find them when I need them later.

If your question was misunderstood here please let me know :)
User 463058 Photo


Ambassador
1,086 posts

Patricia Bates wrote:
Where do I go to export it from?


Actually, you don't need to export. When you save with VSD, it creates all the files you need in their own folder.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.