Spry menu text style change

#1

Please have a look at http://www.sourcelake.ca/test8/ and teach me how I can
make the text in the spry menu look exactly like that of the Source Lake text I
have embedded into the back ground photo?

Thank you,

Falofal

#2

[Q]Please have a look at Spry Menu site and teach me how I can make the text in
the spry menu look exactly like that of the Source Lake text I have embedded
into the back ground photo?[/Q]

If what I am reading in your request and what I see when I open your webpage
are consistent, then you have a somewhat difficult task ahead of you -- a task
whose results would unlikely result in a very favorable outcome, by the way. I
say this because the text under the image of Source lake is difficult to read,
and the text above the image is too big to serve as the text of a menu item.

Certainly the CSS code required to create such an effect does not appear to
exist. See http://www.w3schools.com/css/css_font.asp.

Technically, you would have to create a separate image for each item in your
menu. Once created each of your menu items would then take on the following
HTML structural format.

[LI]<a href=""><img src="" /></a></li>

This would require a consider amount of work for an effect that I am not sure
that you want; ghost text with no campfire would appear ghastly!

Roddy :smile;

#3

Ok, the line of code you provided worked like a charm (Thanks Roddy)! And I
figured out the right place to put it - I'm learning here - whoohoo!!

After playing around with which type of image file will display the style
effect I desire ( I used .png image type, 24 bit I believe not .png-8), now the
only item that remains is the link boxes that display around each image in the
Spry Menu. Any ideas how to remove these (non-visited and visited link boxes)?
Or have I run into one of many problems to come that are a result of this type
of desired menu style?

And .png image files, is this a problem for visitors? So far they appear fine
in both FF 3 and IE 7.

Have a look here: http://www.sourcelake.ca/test9/

Thank you,

Falofal

#4

[q]Any ideas how to remove these (non-visited and visited link boxes)? Or have
I run into one of many problems to come that are a result of this type of
desired menu style?[/q]

I believe that you can remove all borders from all boxes no matter where they
occur by creating the following CSS rule:

a img {
border-style:none;
}

This rule must be entered inside a <style> tag in the<head> tag of your
document.

<style type="text/css"> CSS Rule </style>

You do not have to create a new style tag, if there is already one present.

If the above does not work, you may have to make a separate CSS rule for each
pseudo class -- namely,

a:visited img {
border-style:none;
}

a:hover img {
border-style:none;
}

[q]And .png image files, is this a problem for visitors? So far they appear
fine in both FF 3 and IE 7.[/q]

Save your PNG files as JPEG (JPG) files, so as to provide greater
cross-browser compatibility.

Roddy :smile;

#5

Once again (thanks to Roddy) I have progressed forward and once again I have
hit a road block.

With respect to converting my .png images to .jpg the result is an error I do
not seem to understand. Hover over "News" in the spry menu to see the .jpg
file converted from my .png image (its the "News Archives" button). Not sure
what I need to do in Photoshop or Fireworks to get the same results as the .png
image? http://www.sourcelake.ca/test9/

Thank you,

Falofal

#6

[Q]Not sure what I need to do in Photoshop or Fireworks to get the same results
as the .png image?[/Q]

Try the following, and let us know, if it does not produce the desired result:

Step 1.0: Open the PNG file in Fireworks.
Step 2.0: Click on the Save As ... command and do the following:
Step 2.1: Select JPEG (JPG) as the file type.
Step 2.2: Select OPTIONS.
Step 2.3: Click on the Matte icon
Step 2.4: Select the NO COLOR option (Diver's warning flag with inverted
colors)
Step 3.0: Click OK.
Step 4.0: Click Save.

Insert the image into your document in the same way that you inserted your PNG
image files.

Roddy :smile;

#7

Ok, followed new instructions to save a .jpg image file from the .png. I have
new results but, still something is not correct. Have a look:
http://www.sourcelake.ca/test9/

Thank you,

Falofal

#8

[Q]Ok, followed new instructions to save a .jpg image file from the .png. I
have new results but, still something is not correct. Have a look:
http://www.sourcelake.ca/test9/ [/Q]

Thank you for your effort. You have taught me something. The transparent
matte is not transparent; it only imitates the background of a transparent
image.

Since I was able to create a transparent background image for your former
sidebar in JPEG (JPG) format, you should be able to do the same for the images
of your <a> tags. Let me mess around a bit, and I will get back to you.

Roddy :smile;

#9

Create your image in Fireworks just as you did before, but when it is time to
save it, perform the following:

Step 1.0 Click Save As...
Step 2.0 Select GIF as your file type and click OPTIONS
Step 2.1 Select webadaptive as your palette
Step 2.2 Where it says "no transparency" just above the matte icon, select
"index transparency".
Step 2.3 Do nothing with the matte icon.
Step 2.4 Click OK
Step 3.0 Save the image.
Step 4.0 Insert the image into your document.
Step 5.0 Report back.

LESSON: You can use JPEG (JPG) files to change transparency (opacity)
levels, but you must GIF format in order to create a transparent background.

Roddy :smile;

#10

Let me start off with some reference notes. First, I primarily use Photoshop
CS4 for all my graphics creation and photo editing. Second, as for Fireworks,
I currently have the CS4 version of that software as well. I mention this
simple for work flow and possible order of operation errors. When I first
created my original template for the text graphic in the spry menu, I used PS
CS4 and saved the master file as .psd . This goes to my point of order of
operation (and a bit to not wanting to be warned again about not following
instruction or disrespect for your help.) I then opened the master .psd file
and followed your instruction using that file and ending by saving as a .gif
file. Although much of Fireworks features appear similar to that of PS, I'm
much more comfortable with Photoshop, not to mention we may have slight version
difference that may contribute to me making an error. And much slower to
figure out how to replicate the menu image in Fireworks due to my lack of
familiarity.

Another interesting note, I found the .png-24 in Photoshop CS4 gave the best
results. But, I'm concerned about "provide greater cross-browser
compatibility" as you have pointed out. So, that is why I started playing
around with image formats.

Results:

Ok, with that being typed, I uploaded the results based on my comments and
your instructions.http://www.sourcelake.ca/test9/

Thank you,

Falofal