Changing Colors & Editing Navigation Bars

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
11/17/2011 1:57:48 PM
Gravatar
Total Posts 3

Changing Colors & Editing Navigation Bars

Hello, I was wondering how do you change the colors of borders for a certain skin in the style.css file. Is that even the right file to edit?

I am also trying to change the spacing between links in the navigation bar.

I am not familiar with CSS at all, so I really don't know what to do. Even reading the guides on the site confuses me a bit.

11/17/2011 3:08:40 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Changing Colors & Editing Navigation Bars

Fair warning: mojoPortal skinning is almost 100% CSS-based, so if you don't think you can learn it, or don't have interest in doing so, I'd recommend that you either hire a professional to do your skin or perhaps buy Artisteer. Even with Artisteer you'll likely still have at least a little CSS tweaking to do though.

If you do want to learn CSS, I'd highly recommend that you get the Firebug plugin for your browser, and use that to explore how the CSS styles the different areas of a skin. I knew the fundamentals of CSS coming into mojoPortal, but once I started working with Firebug everything became much more clear. When you see how the CSS selectors work, and their hierarchy, you'll be able to better understand the documentation here, and Firebug will help you pinpoint what CSS needs to be changed in order to set your new color.

Jamie

11/20/2011 10:11:59 PM
Gravatar
Total Posts 148

Re: Changing Colors & Editing Navigation Bars

One thing you can do is look at the image files in the directory of your skin. You can usually tell how the page is using these files simply by looking at them and noticing the colors. I used a skin from MojoPortal and just changed the colors in these image files to the colors I wanted.  Also, you can browse the css files using Visual Studio.  If you place your mouse cursor inside the definition of the class (inside the brackets "{" ) and click the Build Style button on the Visual Studio toolbar, you can tell what image or background color that class is using.  Also, when you examine a webpage look at the source for the page.  In Internet Explorer under the View menu there is a View Source menu item.  Looking at the source will tell you what class each section of the page is using then you can search for this class in the css files.

You must sign in to post in the forums. This thread is closed to new posts.