How to start if I already have CSS and HTML

8/4/2011 9:23:11 AM

rowek

Total Posts 9

View Posts

I have been tasked with taking a very clean design which was created by an internationally acclaimed design shop and dropping it into mojoPortal. I really need some help with approach. I am a developer with limited visual design skills, but I was able to spin up a basic black and white site with all functionality without issue. I have read lots of documentation and watched lots of videos, but still a bit confused about the best path forward.

Question: Since we already have CSS and HTML and a functional "file based" web site, do I even need to try Artisteer? I have not problem purchasing the tool, but I think in the end it will simply generate what I already have - CSS and HTML.

Question: We already have the "boring" version of the web site "stubbed out" in a mojoPortal, meaning we have all the functionality defined, all the pages created, just no content or styling. I know now I must go back and somehow drop my style sheet into a skin or a template and then tell the pages to use those classes. What is the best approach? Create a whole new site or try to apply changes to existing stubbed out site?

I will continue to read the docs, but really want to get some guidance before I run down the wrong rabbit trail.

Many thanks,

Keith

8/4/2011 10:02:57 AM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: How to start if I already have CSS and HTML

Well, your question is kind of broad, but I'll take a stab at it. First off, there shouldn't be any need to "start over" on your site. The beauty of a CMS like mojoPortal is that the pages are all rendered on demand, so changing the look is as simple as putting a new skin folder under /Data/Sites/[Sitenum]/Skins, and selecting it under Administration, Site Settings.

So what you need to do is convert your design into a mojoPortal skin. You can do this either with the "classic" method (using a delivered mojoPortal skin for reference, and the Firebug plugin for Firefox, convert your design's HTML file into a layout.master file, and integrate any mojoPortal-specific CSS selectors and other support files to the skin); or you can use Artisteer to recreate your design, then export from there and turn it into a mojoPortal skin. From experience I can tell you that the first method may be a bit tedious and frustrating, but you'll gain a very good understanding of the nuances of skinning, and how CSS is used within mojoPortal. That said, after I'd created a couple of sites using the "old" method, Joe added Artisteer support to mojoPortal, and we haven't looked back since.

Whichever method you choose, the skinning documentation is pretty comprehensive, and we'll try to help you out here on the forums if you get stuck.

I'm looking forward to seeing your design running on mojoPortal!

Jamie

8/4/2011 11:09:36 AM

Joe Davis

Total Posts 2239

View Posts

Re: How to start if I already have CSS and HTML

Hi Keith,

I would highly recommend creating a skin from your current HTML and CSS, not using Artisteer. The reason for this recommendation is that your design, being created by a professional designer, is more than likely going to have elements or style that Artisteer simply isn't going to be able to produce.

Creating a skin without Artisteer isn't very difficult but if you aren't a CSS guru, you may want to hire someone to do it for you. If you aren't planning on making a business out of creating skins for mojoPortal, or you aren't going to be building several mojoPortal sites for your employer, learning either Artisteer or mojoPortal skinning doesn't pay off in the long run. A good skin developer can build a skin from valid HTML and CSS in less than a week. My company, i7MEDIA, offers skinning services and we guarantee all of our work. We have created over a hundred skins from PSD and HTML/CSS that other design firms created.

HTH,
Joe

8/4/2011 2:57:45 PM

rowek

Total Posts 9

View Posts

Re: How to start if I already have CSS and HTML

Thank you both for your reply. I am very comfortable with HTML and somewhat comfortable with CSS. I want to learn mojoPortal well enough to support it in this area. If I were to start from scratch I would go the Artiseer route, but I plan to at least test out how tedious it will be to do this manually.

Keep in mind that we have:

-a master page

-a primary (home) page

-multiple instances of a secondary page

If I get stuck I will definitely post to you guys on this thread. If I really get stuck then I would consider hiring a pro.

Thanks again for the reply.

Keith

8/4/2011 3:25:56 PM

Jamie E

Total Posts 1203

View Posts

Help support mojoPortal!
Add-on modules

Re: How to start if I already have CSS and HTML

Hi Keith, I'm not sure what you mean by a "master" page and a primary (home) page. In mojoPortal those are basically the same thing (the site landing page is called the home page). If your home page needs to look different than other pages, you can create a skin for each design, then turn on "Allow Setting Skin for Page" in Administration, Site Settings. For a specific example of how this can work, take a look at our Library site. The main section, kids section, and teens section all have different skins applied, though they are all part of one site.

In the past I've seen Joe D. come up with some really clever ideas for skinning and adaptive designs, so he may have some good starting tips if you can explain in detail what kind of design structure you're trying to accomplish.

Happy learning!

Jamie

8/7/2011 11:30:00 PM

IndigoTea

Total Posts 355

View Posts

Re: How to start if I already have CSS and HTML

Keith,

Every designer/developer has their own approach; the biggest question is time and resources. Since you've been tasked to do this, it's a fair bet there's no budget to hire the job out, and it's 50/50 as to who's paying for an Artisteer license, if that's the direction you're going.

That being said; I've yet to use a 100% Artisteer output for any of my custom designs, or mojo implementations of a .psd supplied by a 3rd party. Artisteer is handy to checking how elements will flow together, and is great for allowing you to take a .psd design, insert the graphic elements in the proper spot, and spit out a template that's 80-85% of what you need, with Firebug to help you tweak the CSS the rest of the way.

Is this a learning opportunity for you, or are you under a tight deliverable schedule? If this is the only time you'll be doing this, it may be less expensive in terms of software and the value of your time to hire the job out.

If you don't have the budget/authorization to hire it out, but the budget is available for Artisteer, I do recommend it for getting the job done more quickly. You'll still learn a lot about mojoPortal skins, just from the tweaking you'll do after you export the template, to get it 100% accepted by the QA/end user. Implementing a custom design by "deconstructing" an existing template will take a good bit of time, and is honestly just a masochistic exercise, when there's a tool available to expedite the process.

Good luck, and enjoy the learning curve!

8/8/2011 3:31:03 PM

StuTheDog

Total Posts 5

View Posts

Re: How to start if I already have CSS and HTML

I'm in the same boat, tasked with mojoing a site for which we already have basic layout complete. Since the sample skins are tightly linked to Artisteer naming conventions I thought I'd start by copying an existing skin then use the demo version of Artisteer to make adjustments. But since there is no reference to a stylesheet within the layout.Master artisteer doesn't know what to do and I find myself back to manually hunting down css tags, which is painful.

Is there a quicker way to get up and running with Artisteet, IOW does there exist a skin with an Artisteer project file that couples the master page with the edited css? Or are there steps written out somewhere that would help getting up to speed? I suspect the answer is the plug in a temporary link to the stylesheet for that particular skin?

Any other suggestions how to start, I don't want to just start from scratch if I can avoid it.

8/8/2011 4:42:48 PM

Joe Davis

Total Posts 2239

View Posts

Re: How to start if I already have CSS and HTML

Hi,

None of the included Artisteer skins have the project files with them. You can download the project files from the mojoPortal downloads page over on Codeplex.

In mojoPortal you don't reference the style sheets from within the layout.master. You reference them from the style.config file as explained in the Understanding The style.config File documenation.

If you want to use Artisteer, you should take a look at the Creating Skins from Artisteer Html Templates documentation. If you are starting from a plain HTML/CSS file set, you aren't going to be able to open or import those in Artisteer.

As far as hunting down the CSS classes, you will have to do a good bit of that no matter how you skin a CMS. You should become familiar with FireBug as it makes finding CSS classes, selectors and the rules being applied so much easier than just browsing the rendered page source.

I still maintain that if you're good with CSS, and you're creating a skin from an existing design, the advanced skinning (non-Artisteer) technique is the way to go.

HTH,
Joe

8/8/2011 4:48:34 PM

IndigoTea

Total Posts 355

View Posts

Re: How to start if I already have CSS and HTML

Stu,

If you've got an existing html and css file (with image assets, I presume), that means you've got a working prototype to compare to. The fastest way is to open up Artisteer, configure a layout that's as close as possible to your working prototype, insert the graphic assets/typography to be as close as possible, and then when what you have in Artisteer strongly resembles your working prototype, export your project as HTML.

Your page.html will have the layout that needs to go into a mojoPortal layout.master, sans the control tags, which you can copy over into the proper locations. Once you've done that, copy the contents of your page.html into your layout.master, and select that skin in the mojo admin. From there, tweak with Firebug until you have an exact "mojo'd" version of your original prototype. This really is the fastest way that I can suggest for getting the job done DIY.

There are various articles available to step you through this, both here at mojoPortal.com, and the tutorial blog articles for mojoPortal over at Arvixe Hosting.

8/8/2011 5:35:48 PM

StuTheDog

Total Posts 5

View Posts

Re: How to start if I already have CSS and HTML

Thanks Indigo and Joe-

I guess I was thinking Artisteer worked somewhat like Expression Web where one could insert the css elements directly into code. Since it does not and our designer has her whatever Mac users use tool of choice I think I'm going stick with the manual method and Visual Studio. If I were designing a layout from scratch Artisteer looks like it might be a pretty good choice especially b/c they have many pre-built backgrounds and other "suggestions".

Thanks for the ideas guys!

8/10/2011 4:42:58 AM

emtwo

Total Posts 160

View Posts

Designer of over 25 unique and custom mojoPortal sites with DMSQD and sister company, The Design Loft - www.dmsqd.com

Re: How to start if I already have CSS and HTML

Hi Stu

Just wanted to chip in here - you've made the right choice in my mind. Artisteer is great for people wanting a quick solution but is a little heavy for certain things.

We always always create a standard HTML / CSS template and then add what's required for mojoPortal. Artisteer is simply an enhancement and adds a lot of heavy ish code that isn't optimal. If you've manual coding skills then you'll end up with a much better output by coding mojoPortal in by hand, plus you'll not have to "unpick" Artisteer code should you need to teak anything later.

Artisteer, in my opinion isn't the fastest way, it's merely an easier way for people willing to sacrifice some control over their code - people who want that "off the shelf" look, fee, backing code. I don't believe that's what mojoPortal is about and certainly if you look at some of the best mojoPortal sites out there, they don't look like the "unique" Artisteer templates. Remember, anyone using Artisteer still needs to learn howwo to tweak the code it creates, why not use that time to create a skin from your current HTML / CSS.

Good luck with the skin, I've actually drafted a blog post about this very thing - how to approach things so once it's up I'll pop you a link :0)

Best regards

Mark