By claine on

Hiya,

I tried looking up this issue on the posts and didn't manage to find it. I want to create a drupal portal that is basically the same layout as a non-dynamic site I am the webmaster for (http://www.progressleaders.org/vmt04). It has navigation links on the left (white with blue background) and other sundry links on the right (blue with white background). How can I change the navigation block so I can do this with drupal. I tried mucking about with navigation.module but nothing seemed to work. I'm hoping that I don't have to create a whole new block.

Thanks,

Cat

Comments

wofu_home’s picture

wofu_home commented

Hi,

I am new in drupal and I also don't know how to manage navigation module. :?

Bèr Kessels’s picture

Bèr Kessels commented

You should use some CSS in a class to do the magic you want. 

.block-user {
 border: solid black 2px;
 background:blue;
}

Puts a black border around the block. And gives is a blue background.
You should modify the stylesheet of your theme to acheive something similar.

[Ber | webschuur.com]

claine’s picture

claine commented

Hi,

Thanks for your input. What css file is block-user hiding in? Also will I be able to changes the links? The background is cooperating already. It's changing the colors of the navigation links that I'm struggling with. Thanks again.

Cat

pgassner’s picture

pgassner commented

If you're using the default theme (xtemplate), you find the standard css in themes/xtemplate/default/xtemplate.css

Check your HTML-source what class (e.g. "block" - all block elements belong to this class, it should be kept as general as possible) and id (e.g. "block-menu-76" - an element with an id can only occur once in the HTML-code) the block has that you'd like to change.

Then you can add your CSS code to the bottom of "xtemplate.css" or in any other CSS that gets included in the head of your HTML-file. (You could put your own CSS in a separate CSS-file and include it after the standard CSS-file. Do this in the xtemplate.xtmpl file.)

For changing the links you have to nest your link-declaration under the block-declaration like this:

.your-block {
  border: 1px solid black;
}

.your-block a {
  text-decoration: none;
  color: red;
}

For nice instructions on how to turn your navigation links into something more beautiful, check out http://www.alistapart.com/articles/taminglists/ where you'll find much more information on CSS-programming.

claine’s picture

claine commented

Thanks you so much. It worked like a dream.

Cat