transparent menu

roger70s / 2010-11-22 15:08:51   

Hi there.
first of all thanks to indexhibit developers for such a cool tool.
I´m pretty new in indexhibit with no experience on html and css.
Before considering to participate on this forum i´ve been learning from the different tutos and forum threads I found on the web just to avoid bothering people with begginer questions, but at this stage I´m starting to be in a mess.
So, i want my menu bar & logo to be transparent but including a gradient color as this site have.
http://www.zachstarrweiss.com/
I found a video-tuto on youtube, http://www.youtube.com/watch?v=gfgrUhahhOA&feature=related, but is explained in german.
I´ve been able to extract some info and applied to my site, but at this stage I´m quite lost no able to get what I want.
Any help please?
my site http://www.rogergabarro.es/

thanks in advance.

R70s

rachelsender / 2010-11-22 15:26:16   

Hi Roger,
\nThe background image of the menu is a gradient, so you can do that in photoshop. In the website you mention, they use this image for the background image of the menu: http://zachstarrweiss.com/files/menufadergray-05.png

\n\n

It\'s a png, so it\'s transparent.
\nGood luck!

roger70s / 2010-11-22 15:53:00   

Hi Rachel,
\nI´ve realized that they used a gradient image made by photoshop. I did the same but doesn´t work in the same way to me.
\nWhen I put this image on the style sheet in the same place they did, after reloading the image goes over the logo and not below. and is not fitting properly to the logo bottom and covering the entire menu. as i want my gradient to be yellow thats important.
\nI don´t know the proper size of this image (gradient) to fit on the menu above the logo as zach´s site do.
\nThis is what I have in my css style sheet.

\n\n

#menu {
\n width: 215px;
\n overflow: auto;
\n top: 20px;
\n bottom: 20px;
\n    left: 20px;
\n position: fixed;
\n height: 100%;
\n background-image: http://www.rogergabarro.es/files/menuimg2.png;
\n background-repeat: no-repeat;
\n}

\n\n

If you can give me some idea on how to manage this, I really appreciate it.
\nanyway thanks for your interest.

\n\n

All the best.

\n\n

G470 / 2010-11-23 05:08:22   

sorry, i don´t get the problem. Can you show us a screenshot how it should look like?

rachelsender / 2010-11-23 05:40:44   

Hi Roger,
\nI don\'t really understand the whole problem, but I\'ll answer some things that might help:

\n\n

- In your CSS you\'ll see that the width of your menu is defined, it\'s 225px wide. You can also define the height. So then you can make an image in Photoshop the same size as what your defining in your CSS.

\n\n

- In the site you mentioned (http://www.zachstarrweiss.com/), the letters are transparent. Now you say you want them to be yellow. Correct? So what do you want to be transparent? I don\'t think you can make the yellow transparent, if that\'s what you meant...

\n\n

G470 mentions you could post a screenshot. You could do that so we understand your problem better.

\n\n

rachelsender / 2010-11-23 08:49:56   

Have you heard of firebug? If you haven\'t, you should download it! It\'s very helpful!

roger70s / 2010-11-23 08:52:06   

Already done!! ;D
\nMy mistakes were using two images. one as a gradient and another one as a logo instead of just using a simple one that includes both, in the other side my gradient image was wrong made also.

\n\n

I was using wrongly 2 images cause I wanted to mantain my logo image as a link to back to the home page as is usually set in (settings/main/ pre-nav text), and using the gradient image as a menu background to get the effect i wanted.
\nMy proportions (margin, padding, width etc..) were also wrong.

\n\n

Now everithing looks good as I wanted, but.....
\nHow do I make a \"back to home\" link clicking on the logo??
\nI supose I need a transparent image that fits with the exactly area where the logo is,(see zach´s site logo) and include the image link in the pre-nav text window. but I´m not sure how to manage it.

\n\n

As soon as I finish refitting the rest of the setting of my site I will try it.

\n\n

Any help that make me this process easier?

\n\n

Rachel, G470, thanks a lot for your time and I hope I´ve been understandable enough....;D

\n\n

my site:
\nWebpage

roger70s / 2010-11-23 08:53:28   

Sorry, wrong link to my site.
\nhttp://www.rogergabarro.es/

G470 / 2010-11-23 09:31:56   

the solution with the image sounds good but i think you can also use
\na href=\"link to your site\" style=\"width:100%; height: 30px; line-height:30px\">&\"nbsp\";( without quotes )

G470 / 2010-11-23 09:34:37   
    \n
  1. or... but i think it´s not valid
  2. \n
  3. <a href="back home"><div style="height:30px;"></div></a>
  4. \n
\n\n
roger70s / 2010-11-23 14:58:44   

G470, Neither of the solutions are working to me....:(
\nI when back to the transparent image option, although that make me do some margin and padding adjustments that I personally hate. But, yes Rachel, firebug help me alot to go through those adjustments.
\nThanks again to you both, and I´m sure i will come back to the forum with more questions.
\nAll the best.

\n\n

R70s
\n

rachelsender / 2010-11-24 11:46:19   

What code are you using?
\nCopy paste what you have, please.

roger70s / 2010-11-25 02:07:13   

I guess you meant that code in the pre.nav.

\n\n
roger70s / 2010-11-25 02:14:06   

Let me know..

G470 / 2010-11-26 04:56:38   

Hey roger70s i see you fixed it with the transparent image method.
\nYou´re right I meant the code to be in the \"prenav\". Works for me.
\njust a \"div\" wrapped in a \"href\" link.
\n

veronicahansen / 2010-12-01 03:25:59   

Hi,

This thread has been really helpful! But I need a little more help :)

I've created the transparent png - however, I don't know quite where to put it. Right now it's in the img folder of my site/css.

I defined the height in the menu in my style.css to have the same dimensions as the png. (215wide;600height)

My theories are: 1) I can't edit this style.css because it's the Eatock one and I don't know how to replace it or
2) I need to somehow direct it via the pre-nav?
3) it's 4am

thanks for any help! I'm new at this

lemathieu A / 2010-12-01 05:05:11   

Hello Veronica,
1/ yes, change theme to "sample" in your settings page.
3/ go to sleep ;)

roger70s / 2010-12-01 06:20:27   

Hi Veronica, I´m not a well experienced on coding, but I think I could help you on this issue.
first of all I´m working on the sample theme, not eatock wich I assume is the default theme. So, all what I did is based on the sample theme.

First, upload your png image by using the "files manager" located on any of the exhibits (the small folder icon) click the folder icon, upload your image, once you already have your image uploaded, click on the narrow (at the files manager window) to place the link code of the image in to the text window of the exhibit. Copy this link and then erase it from there as you wont need it anymore.

Paste this link where I say "YOURIMAGE.png"..see below.

Download your css style sheet (via cyberduck).

ndxz-studio/site/sample/style css.

MAKE THAT CHANGES.
#body. TAKE OUT background: fff#;
then go to..
#menu
REPLACE THE background-color: fff# FOR:
background-image: url(http://www.YOURSITE.com/files/YOURIMAGE.png);
inmediatly below add:
background-repeat: no-repeat;

Upload your css style sheet, refresh your site and that´s it.

I hope this works for you.,,,;)

R70s

veronicahansen / 2010-12-01 12:19:59   

Yay!!!!!!!!!!!!!

I did it!

thanks x a million lemathieu and roger70s! I'm going to give all my money to index exhibit.

roger70s - I saw on your site you were able to make your logo in the menu bar link back to your homepage. Did you do that via the pre-nav text or some other way?

roger70s / 2010-12-01 13:53:17   

Yes, that´s what I did:
Upload via "files manager" a (transparent image.png) with the same size of your logo. This way the image will fit properly to your logo. you can change sizes of the image directly in your code link although.
Then get the code of the image by clicking the narrow, as you did before.

paste it in your pre-nav text that way:

  1. <%obj_name%>
  2. <a href='http://www.YOURSITE.com'><img src='http://www.YOURSITE.COM/files/YOURTRANSPARENTIMAGE.png' width='225' height='85' /></a>

Change width and height accordingly to your needs.

and that´s it.

maybe you need some adjustments in your css style sheet in order to get the logo area well covered.
This should work.

take care.

R70s

veronicahansen / 2010-12-01 16:32:20   

Hi,

thanks again roger!

I did it, and the link works - but I'm not sure how to get it to exactly overlap my transparent logo.

as it is now, I the logo is somewhere below and right of the transparent menu logo....!

besos!

roger70s / 2010-12-02 11:28:44   


veronica, what´s your site? this way its easier to see whats happening.
I had the same problem. I needed to go trough the style.css to fix it.

Try it changing the p{ margins.0000} and let´s see.

R70s

This thread has been closed, thank you.