taking VSD theme to HTML editor for CSS

User 110693 Photo


Registered User
24 posts

I am redesigning a city web page & want to use a VSD theme but am familar with HTML & have been using HTML editor for years (& haven't used VSD). I tried playing around with VSD & found it limited me in how much I could edit the theme. So I want to take the theme after I've tweeked it a little & bring it into Editor - I know how to do that.
There will be a lot of pages in the site, one for each business category, each gov't dept, monthly minute list page, ordinance list page, etc. so I want to do external css. Can I just cut & paste the css that is at the top of the theme into Editor to create the external css? Or will that cause a problem in the design.
The site will have 3 columns, so I am taking a 2 column theme & adding another-a clickable bulleted list to the right, plus drop down menus, a header with a photo or 2 & hopefully a calendar.
I have used some css but I did my last full website a few years ago & I used css to control text styles & not much else, so I don't want to have to create the site & more importantly the css from scratch.

Thanks for any help.
User 2073552 Photo


Registered User
1,625 posts

You can just take the CSS from the top and place into a CSS page separately from the HTML page.

You do however, need to make sure that if you combine each pages CSS that you have no overlaps, which you probably will.

So, just make sure there are no overlaps when you combine the pages (if there is a different style to those pages.)

If the pages say on the home page and contact us page are the same, then there should be no problems.

But if the CSS is the same for every page (same styling I mean...) then you should have no overlaps.
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
User 110693 Photo


Registered User
24 posts

Thanks, that's exactly what I needed to know. I will work with just one theme so will only paste css from one page, then it will be used by all the pages within the site. If I get it looking like I want, I wouldn't need another style :)

I just didn't want to do all the work & then cut & paste & have something go very wrong, :mad:
having wasted all that time.

Thanks for the quick response...now off to start my theme tweeking :)
User 38401 Photo


Senior Advisor
10,951 posts

I do have to ask this obvious question. Why in the world would you go through all that work for a theme? I'm betting you can come up with something very similar (if not already matching) by looking through the HTML Editor themes. There are a lot of themes that have the same theme for the other programs too. Not all of them of course, but....

In my humble opinion, you are doing this the extreme hard way. It would be much easier to use the "images" from the VSD theme, open your HTML Editor, start a new site using the Layouts and choose the layout that fits your layout style. Or better yet, look through the default themes of the HTML editor and see if there's something close to the VSD theme there. You can always use the images and buttons etc. from the VSD theme and replace the ones in the HTML Editor theme with those. Now you have HTML code as it should be, the CSS is already setup for you at the top of the page for you to pull out same as the VSD theme, but you're already familiar with the HTML setup and VSD code is a whole different ballgame.

Just my humble opinion of course :)
User 38401 Photo


Senior Advisor
10,951 posts

Oh P.S. lol, there are a lot of themes in the Theme Store for the HTML Editor and VSD. Not sure what theme you are wanting to work with, but that same theme might already be available for the HTML Editor if you look there :)
User 110693 Photo


Registered User
24 posts

Jo Ann, you make an interesting point...I started by trying to find a quick way to do many pages & not knowing how much css does these days :) I thought a theme would be the way to go & there is a nice one included with VSD, so I started playing around with that. But, yes, VSD is a different ballgame, which may be why I'm so confused ;) ie. the menu across the top is made up of buttons with the same text under each one, so if I include add'l menu buttons, you can see the text peeking through.

There is a default HTML5 layout that has the content/colums exaxtly like I want, except that it lacks a menu across the top that I can make a drop-down menu (I've not done those yet, just 'pretty buttons' across the top of a site, w/o drop downs. But the layout too has all the css in the HTML file & is very basic. So then do I just cut css out & paste it into a new css? Then to dress up the page, I just put all the code for heading &/or background images in the css I made & save the basic html file as a 'master' file to use as a 'template' for each page on the site (like a theme), right?

I have been doing websites since 1996 (in college), & had been given the company website to maintain at every job I've had since. I've redesigned this site twice in the past 7 years, but have been busy at home with the kids for 4 years, so just maintaining & adding to it for most of that. So HTML/css has gotten away from me. Now that is it time for a new look, I have a lot to (re)learn. Thanks for your insight.
User 38401 Photo


Senior Advisor
10,951 posts

No problem Jessica, it's a lot to learn when they do all these updates to the website systems on us lol so trust me I feel your pain too.

When you look at the HTML page of any theme you open that is created specifically for the HTML Editor, at the top you will see all the CSS code wrapped in <style></style> tags. This code that is between the style tags is what you put into a new CSS file. HTML Editor has a CSS file creator so just go to the file menu and have it create a new CSS file. It puts a couple lines at the top that are commented out in light grey that you can opt to keep or not, nothing needs to be there but it doesn't hurt anything at all.

Take the code in the style tags and paste it into the new CSS file WITHOUT the style tags. Delete the CSS code from the HTML page including the style tags around it. Save the page and give it any name you want. I tend to name my css files for the site I'm working on so I don't ever confuse any with other sites I work on lol. Make sure it's saved into the root directory of your site.

Now at the top of your HTML page inside the <head> </head> tags under the <title></title> tag or <meta></meta> tags paste this and change the highlighted text to your own css file name:

<link href="ima_css_file.css" rel="stylesheet" type="text/css" />

You've just made your first CSS file! Congrats! :)

Truly I would suggest going and and finding an actual theme that's close to what you like for dropdown menu and structure wise, ignoring the actual images as you can replace all that such as backgrounds and buttons etc. This way the main things you need are in place and you won't have to learn extreme CSS right off the bat. There are a lot of HTML Editor themes that have drop down menus already, but I am not sure if that's evident in the images for them in the shop.

If you tell me what theme you're thinking of being like I can check to see if I have it and tell you if it has a drop down, and any others you might be interested in tell me those too and I can check them for you if I have it. I have a good handful of them, but not all so if I don't have it, it's possible someone else might or CC people could tell us too.

Once you have the CSS file setup to go, just take a browse around it and you'll see where all the images are placed for many things. Many images still go into the main pages, but structural ones are usually in the CSS.

Hope that helps and let me know if you need any help on getting that CSS file done. :)
User 110693 Photo


Registered User
24 posts

Thanks for all the tips on making the new css file.

If I use a theme, I do worry about finding all the colors, etc. that need to be changed in the large css file that comes with HTML themes, but I'm sure I can manage that. I like the main content layout in the HTML5 layout called 'three column fixed' that comes with Editor (the larger center column would have announcements & a bus. directory link, the left column would contain a state required link & a calendar of events, & the right column would have a list of quick info links). There are several themes that I like for the header & menu area, but when I looked at Deep Red, I couldn't convert the space where the MP3 player is located into a text area & the colomns were called colRight & colLeft so I wasn't sure what to do, so I looked for different themes.
Some themes I like are The Latte, Elegance, Wood & Wool, though I struggle with seeing how to make our color scheme work (most likely Navy blue with a little bit of dark yellow & a lot of white).
Sturdy Past (in VSD) is so eye catching that I even took a pic of the bell town on our city hall like that today, but I do like the layout of the rest of the header as well.

I hope I'm making sense. Thanks for your help.
User 38401 Photo


Senior Advisor
10,951 posts

Of course I don't have any of those themes other than the Sturdy Past in VSD which I just looked at. It's a nice theme and I think you can probably do something similar with most any 3 column theme, but those I looked at on the site that look promising to get close to the Sturdy Past would be:

Autumn - HTML Editor
Canvas - HTML Editor
Cookie - HTML Editor
Elegance - HTML Editor
Kids - HTML Editor
The Latte - HTML Editor
The Whale - HTML Editor
Vintage - HTML Editor
Wood - HTML Editor
Wool - HTML Editor

Any of those would get you started pretty well on your way. Keep in mind as I mentioned earlier, images are all interchangable, backgrounds, colors all of it, but getting the main structure you want to start with is a major plus. These have the large image at the top if that's what you're after ... and....

Don't sweat the menu if what you choose doesn't have a drop down, HTML Editor has a CSS menu maker built in that does drop down menus and there are a lot of places to get scripts for menus if that doesn't do the trick and lots of people here to help you if you need help getting it in there just right.

Lots of people here if you need help with the theme too. My knowledge is much more limited than many of the users here, but I'll help as much as I can and I'm sure others will too :)
User 110693 Photo


Registered User
24 posts

having a little trouble with the header menu, I've edited colors, etc in the Latte theme for HTML editor, but couple of things. I changed my header image (the ribbon looking thing that wraps around the backgroud) to be navy blue & yellow (in photoshop) & that is showing up & in the right place, but there is another one, in the front of the good one, a little lower & a little to the right. I can't see why or where it is coming from. Any ideas?

Also, does the code for the drop down menu go in the css file or the HTML file? Right now it is in the HTML file.

Right now I have to run to the school & pick up my kids, but can post it online in about 1/2 hr, if that will help.

Thanks for any insight,
Jess


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.