Menu color

twitcher / 2010-12-20 04:34:03   

I've tried n' tried but I just don't know how to change the menu color. I'm not talking about the whole background . I'm talking about just the menu. Like this:

http://www.pedroguimaraes.net/main/index.php?/about-me/

The transparent part of the menu. How do you do this?

-Thank You

-Twitch

www.pablosanchezr.nl

G470 / 2010-12-20 04:42:22   

Hi twitcher,

just juse a transparent background image on menu and turn the background color to transparent ;)

#menu {background-image: url(http://yourdomain.com/yourimage.png); background-color: transparent;}

twitcher / 2010-12-20 10:38:49   

Hello there,

Thank you for your response.
I still can't figure it out. We are talking about the style.css right?

Here's what I got there:

#menu {
width: 250px;
overflow: auto;
top: 0;
bottom: 0;
left: 0;
position: fixed;
height: 100%;
background-image: url (http://www.pablosanchezr.nl/files/gimgs/1_untitled-1.jpg)
    background-color: #transparent;
}

What's wrong here?

-Twitcher

Vaska A / 2010-12-20 10:43:41   
  1. background-color: transparent;
twitcher / 2010-12-20 12:10:46   

Thanks for the feedback. I've changed the code. It still doesn't work.. I don't know what's wrong... why won't my image appear?

-Thank You

G470 / 2010-12-20 12:16:09   

Hey twitcher,
you didn´t change anything.Maybe you edited the wrong file?

your current menu css looks like this:

  1. #menu{
  2. bottom: 0px;
  3. height: 100%;
  4. left: 0px;
  5. overflow: auto;
  6. position: fixed;
  7. top: 0px;
  8. width: 250px;}
twitcher / 2010-12-20 12:32:37   

What? That's weird. Whenever I modify color or font in de css it does work

... I make changes in httpdocs/ndxz-studio/site/sample/style.css

Is this the right file?

G470 / 2010-12-20 12:48:39   

http://www.pablosanchezr.nl/ndxz-studio/site/sample/style.css
is your file. it´s right but you got a error in your css so i didn´t see it... sorry.

  1. your code:
  2.  width: 250px;
  3.     overflow: auto;
  4.     top: 0;
  5.     bottom: 0;
  6.     left: 0;
  7.     position: fixed;
  8.     height: 100%;
  9.     background-image: url (http://www.pablosanchezr.nl/files/gimgs/1_untitled-1.jpg)
  10.     background-color: transparent;

you forgot the ";" semicolon behind the background-image.

twitcher / 2010-12-20 14:38:13   

AAAAAAHHH! It still doesn't work!!!
My code now:

#menu {
width: 250px;
overflow: auto;
top: 0;
bottom: 0;
left: 0;
position: fixed;
height: 100%;
background-image: url (http://www.pablosanchezr.nl/files/gimgs/1_untitled-1.jpg);
    background-color: transparent;
}

I've tried with n' without spaces, colons, primes & brackets.. and I've put it in a different order.. nothing.

There must be something wrong elsewhere...

G470 / 2010-12-20 15:40:38   

it´s because of the whitespace behind 'url'...

this works on every page:

background-image: url('http://www.pablosanchezr.nl/files/gimgs/1_untitled-1.jpg');

twitcher / 2010-12-21 02:49:46   

YES! It worked, thank you !!

Now I've got another problem. It seems like this background keeps repeating itself. What I'm trying to do is to create (in this case) a red column as menu bg. Like the transparent one of http://www.pedroguimaraes.net/main/index.php?/about-me/

Where do I find the settings for this?

-Thank you for your time.

ps. How do I give this column a red transparent color? Or does it already have it, but can't be seen due to the white background?

-Twitcher

G470 / 2010-12-21 03:02:54   

First of all you should use a background on your exhibit so you can see the transparency of the menu once it is applied.
Then just use a transparent background-image ( like .png file ) for your menu background-image.
background-image: url('http://www.pablosanchezr.nl/files/gimgs/atransparentpngfile.png');
The background repeat is ok for what your want to do.
Third step is to edit the position and size of your menu.
you can do this like #menu {left: 35px;} or whatever you want.

twitcher / 2010-12-21 04:23:48   

Hehey!

It worked! Kind of..

I did it in a rather unusual way.

My #menu {left: 35px;} doesn't work, it moves for about 1cm, despite the amount op px I set...

So, I made my column and added some transparency around it. Like this(http://www.pablosanchezr.nl/files/gimgs/19_untitled-1.png). It seems to function well. The column is in place and the transparency works.

Now I need to add a full bg img. I'm sure there's a thread about this somewhere.

Thank you my friend.

-Twitcher

G470 / 2010-12-21 04:38:49   

Your welcome :) . You´re right there is a full background plugin somewhere in the forum. Give it a try.

This thread has been closed, thank you.