Creating a Custom MojoPortal Solution: Part 3, Creating a Custom Skin
Written by Carole Bennett Friday, 22 July 2011
Hi – Carole Bennett, back again, this time with some steps on how to create your own custom skin for mojoPortal.
First of all, let me start by saying this; yes, I am completely capable of designing the skin completely in Photoshop, slicing it out, and incorporating it into a skin. That being said – it is *so* much faster to use Artisteer! You do not have to use the built-in graphic elements in Artisteer; in the custom mojoPortal skin you will see today, I created design elements in Photoshop, and used the “Insert From File” feature in Artisteer to “test drive” my design ideas in an actual working UI.
Since this is not an Artisteer tutorial, I won’t go over all the details of how to use it. I will remind you that for best results, create the project as an ASP.Net project, but export it as an HTML project – much less complicated.
You will see the screenshot of the skin UI as it appears in Artisteer here, after we have incorporated our custom graphics and font webkit from FontSquirrel:
(Helpful tip: to add custom font webkits into Artisteer, use the “Export=>CSS Options” dialog to insert the webkit CSS)
After we have got the look and feel down pretty much the way we want it, it is time to export the Artisteer project. Export it as an HTML file – use your own organizational technique to decide where to output the folder.
The next step is to create a duplicate of an existing mojoPortal skin, and rename it as we want for our new skin.
After we have renamed the duplicate, we will return to Visual Studio and refresh the files – now we can see the new skin in the Data/Sites/1/Skins directory (your site ID may differ, depending on your environment).
Now, you will need to navigate back to wherever you saved your Artisteer project, open the folder, and select the contents.
After you have selected the Artisteer project files, drag and drop them into the skin folder in Visual Studio. You will have a lot of file overwriting, but that is perfectly all right – you are replacing the existing skin files with your own custom-created files!
Special Tip: If you want to make sure that the skin you are creating is the first skin selected for this site, change this line in web.config:
Now that you have replaced all the stylesheets and images with your own, it is time to sync the layout.master with the page.html generated by Artisteer.
The easiest way to sync the files is to open a separate vertical group for the page.html, and compare which sections of each file are the same, or different. You could also use a tool like WinMerge, but it is really better to visualize your layout in Visual Studio. Remember not to remove the mojoPortal-specific elements, unless it is one that you really do not want in your final layout.
Once you are finished with that task, it is time to hit F5, and see how well you have done.
That went pretty smoothly – whoops, there is a small gotcha! I did not include an icon in the header for this layout; where did that come from? After having done this so often, I know that it is a setting in style-artisteer-overrides.css, but there may be other settings in the blog, or stylemojo.css that I will also change out. It is best to field-test all the modules in mojoPortal before declaring a skin “ready to go-live”. One of my favorite tools and time-savers in tracking down and testing CSS modifications on the fly is Firebug.
Well, that is all for now! Next time, we will go through the steps to publish this project to our Arvixe hosting site, and start setting things up for this site to be live. See you next time!