Jump to content


Photo
- - - - -

Flash logo won't work, can't change menu colors


  • Please log in to reply
6 replies to this topic

#1 keenyyp

keenyyp

    Soho Novice

  • Members
  • Pip
  • 4 posts

Posted 10 June 2009 - 02:55 AM

I have a couple of problems with my new template, which uses the .css file from the template tutorial, modified for my needs:
1. I want to use a Flash animation as my site logo, but it won't work with the #LOGO# or #LOGOIMG# pound variables, nor when hardcoded on my template, although it will work fine in the content section. Is there any way to have a second "content" section on the page to enable this? Or another variable I can use in place of the LOGO?
2. I want the bottom text menu (#TMENU#) color scheme to be the same as the vertical text menu (#VMENU#), but have been unable to figure out how to do so. Applying the same style setting (or any other) in my web editor doesn't seem to affect it at all. I notice that the #VMENU# variable is not even mentioned on the wiki (which uses #HMAINS# and #VMAINS#), although it is used in the sample .css file from the template tutorial and there is an extensive section where I was able to change the colors for the various states (on, off, link, visited, hover, active), although I could not override the default left hand alignment for that vertical menu. Are there other variables available that aren't mentioned?
Thanks for your help
Ken Forsythe

#2 lwyau

lwyau

    a soho enthusiast

  • Moderators
  • 5,605 posts

Posted 10 June 2009 - 11:06 AM

1. Flash in template. There is no pound variable for flash and you have to code it yourself. Assuming you have a flash file in the template folder named "logo.swf", the typical code looks like:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" ID=thisflashobj WIDTH=790 HEIGHT=60>
<PARAM NAME="movie" VALUE="#template_path_full_url#/logo.swf">
<PARAM NAME="loop" VALUE="true">
<PARAM NAME="quality" VALUE="high">
<PARAM NAME="wmode" VALUE="transparent">
<EMBED src="media/logo.swf" loop="true" quality="high" wmode="transparent" WIDTH="790" HEIGHT="60" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</EMBED>
</OBJECT>
Note that "#template_path_full_url#" is important in "param name=movie", but cannot be coded in "embed src=".

2. Menu style: The easiest way is to look at the source code of your webpage. You will then see the classes/ids associated with various menu items. #TMENU# uses #smt_tmenu, and #VMENU# expands to .vmenu_main_on, .vmenu_main_off, .vmenu_sub_on, and .vmenu_sub_off. You can then add appropriate styles in the "custom.css" file in the template folder accordingly. Example:
.vmenu_main_on a:link { color:#999999; text-decoration: none; }


#3 keenyyp

keenyyp

    Soho Novice

  • Members
  • Pip
  • 4 posts

Posted 10 June 2009 - 07:52 PM

Hi,
Thanks for the quick help, I am enjoying learning to use this program. The flash trick works well. on to the menus...

#4 keenyyp

keenyyp

    Soho Novice

  • Members
  • Pip
  • 4 posts

Posted 10 June 2009 - 08:11 PM

Hi again,
I am struggling with getting any control over the horizontal text menu using a custom .css file. I have tried using the #smt_tmenu variable in a couple of ways, none of which has worked. Is it bad etiquette to post the contents of my .css file in a post for comments?

#5 lwyau

lwyau

    a soho enthusiast

  • Moderators
  • 5,605 posts

Posted 10 June 2009 - 09:18 PM

By all means!

#6 keenyyp

keenyyp

    Soho Novice

  • Members
  • Pip
  • 4 posts

Posted 10 June 2009 - 09:46 PM

Here is my .css file, originally from the template tutorial:

/* CSS Document */

body {
background-color: #666666;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
.page-title-top {
FONT-WEIGHT: bold;
FONT-SIZE: 8px;
COLOR: #000000;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

.page-title-bottom {
FONT-WEIGHT: normal; FONT-SIZE: 8px; COLOR: #FFCC00; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

.page-name {
FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #FFCC00; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

.bottom-menu {
font-family:Arial;
font-size:12px;
}

/* Main Menu Links */
/* I have only changed the colors here - Ken F */

div.vmenu_main_off {
font-family: Tahoma; font-size: 11px; font-weight:bold;
}
div.vmenu_main_on {
font-family: Tahoma; font-size: 11px; font-weight: bold;
}
a.vmenu_main_off:link { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}
a.vmenu_main_off:visited { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}
a.vmenu_main_off:hover {color: #00FFFF; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:underline;}
a.vmenu_main_off:active { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}

a.vmenu_main_on:link { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}
a.vmenu_main_on:visited { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}
a.vmenu_main_on:hover { color: #00FFFF; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:underline;}
a.vmenu_main_on:active { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}

/* MainMenu Links END */


/* Sub Menu Links */

td.vmenu_sub_off {
width: 100%;
border: 0px;
padding: 0px 0px 0px 3px;
}

td.vmenu_sub_on {
width: 100%;
border: 0px;
padding: 0px 0px 0px 3px;
}

div.vmenu_sub_off {
width: 100%;
border: 0px;
padding: 0px 0px 0px 3px;
font-family: Verdana;
font-size: 10px;
font-weight: bold;
}

div.vmenu_sub_on {
width: 100%;
border: 0px;
padding: 0px 0px 0px 3px;
font-family: Verdana;
font-size: 11px;
font-weight: bold;
}
a.vmenu_sub_off:link { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}
a.vmenu_sub_off:visited { color: #00FFFF; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}
a.vmenu_sub_off:hover { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: underline;}
a.vmenu_sub_off:active { color: #FFCC00; text-decoration: none;}

a.vmenu_sub_on:link { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}
a.vmenu_sub_on:visited { color: #00FFFF; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}
a.vmenu_sub_on:hover { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: underline;}
a.vmenu_sub_on:active { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}

/* Sub Menu Links END */

/* My additions begin here - Ken F */

.content {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
}

/* Text Menu Links */

div.smt_tmenu_main_off {
font-family: Tahoma; font-size: 11px; font-weight:bold;
}
div.smt_tmenu_main_on {
font-family: Tahoma; font-size: 11px; font-weight: bold;
}
a.smt_tmenu_main_off:link { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}
a.smt_tmenu_main_off:visited { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}
a.smt_tmenu_main_off:hover {color: #00FFFF; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:underline;}
a.smt_tmenu_main_off:active { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}

a.smt_tmenu_main_on:link { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}
a.smt_tmenu_main_on:visited { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}
a.smt_tmenu_main_on:hover { color: #00FFFF; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:underline;}
a.smt_tmenu_main_on:active { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration:none;}

/* Text Menu Links END */


/* Sub Text Menu Links */

td.smt_tmenu_sub_off {
width: 100%;
border: 0px;
padding: 0px 0px 0px 3px;
}

td.smt_tmenu_sub_on {
width: 100%;
border: 0px;
padding: 0px 0px 0px 3px;
}

div.smt_tmenu_sub_off {
width: 100%;
border: 0px;
padding: 0px 0px 0px 3px;
font-family: Verdana;
font-size: 10px;
font-weight: bold;
}

div.smt_tmenu_sub_on {
width: 100%;
border: 0px;
padding: 0px 0px 0px 3px;
font-family: Verdana;
font-size: 11px;
font-weight: bold;
}
a.smt_tmenu_sub_off:link { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}
a.smt_tmenu_sub_off:visited { color: #00FFFF; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}
a.smt_tmenu_sub_off:hover { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: underline;}
a.smt_tmenu_sub_off:active { color: #FFCC00; text-decoration: none;}

a.smt_tmenu_sub_on:link { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}
a.smt_tmenu_sub_on:visited { color: #00FFFF; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}
a.smt_tmenu_sub_on:hover { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: underline;}
a.smt_tmenu_sub_on:active { color: #FFCC00; font-family: Tahoma; font-size: 11px; font-weight:bold; text-decoration: none;}

/* Sub Text Menu Links END */


I have copied the original layout for the vmenu section and then tried substituting #smt_menu, which wouldn't show up as a choice in the styles menu, and smt_menu (as above), which does show up as a style choice but has no effect when assigned to the #TMENU# variable. I have tried using #HMAINS# and #HMAINZ# in place of the #TMENU# variable, with no effect.
While I was able to find a section in the pgm-auto_menu.php file setting the .vmenu variables ( // Define on and off MAIN MENU classes), but no similar reference for text menu - the closest I can find is "textmenu", and using that in place of "vmenu" in my modified structure doesn't work either. Hoping you can help...

#7 lwyau

lwyau

    a soho enthusiast

  • Moderators
  • 5,605 posts

Posted 10 June 2009 - 11:35 PM

First off, all you need to post is the code you added/modified, not the entire thing.

You went way ahead of yourself in terms of understanding how css works. You need to understand the different between a class and an id, and you did not bother to examine the source code to see exactly what class/id you should be dealing with. As a result, you blindly copied/duplicated a whole bunch of code with fictitious classes which do not exist.

I said the text menu maps to #smt_tmenu, thus you'll need
#smt_tmenu a:link {...}
#smt_tmenu a:visited {...}
#smt_tmenu a:hover {...}
#smt_tmenu a:active {...}
Grab a css book or google some css tutorials.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users