menu customization

[yugnats]

hey folks,

i need to find out how to make changes to the vertical and horizontal menu systems(text size, color, offset, etc)
also how can i put little pics in front of each menu item easily?
any help would be appreciated, stan

anyone know where these files are located?

[Mike Morrison]

Howdy Stan,

i need to find out how to make changes to the vertical and horizontal menu systems(text size, color, offset, etc)
1. Make a copy of this file:
sohoadmin/client_files/base_files/runtime.css

2. Rename it "custom.css" and stick in your template's directory (along with index.html, etc.)

3. Modify to your heart's content.

also how can i put little pics in front of each menu item easily?
Two options:

Option A. Through that custom.css I just mentioned (might need to look up CSS 'pseudo-classes' online)

Option B. Use a modified pgm-auto_menu.php

1. Make a copy of this file:
sohoadmin/client_files/base_files/pgm-auto_menu.php

2. Stick in your template's directory (keep the name the same)

3. Check out the html it's sending out to make bullets for sub menu items (~ line #240)

4. Apply same logic to make bullets for main menu items (~ line #318)

[yugnats]

Howdy Stan,


1. Make a copy of this file:
sohoadmin/client_files/base_files/runtime.css

2. Rename it "custom.css" and stick in your template's directory (along with index.html, etc.)

3. Modify to your heart's content.


Two options:

Option A. Through that custom.css I just mentioned (might need to look up CSS 'pseudo-classes' online)

Option B. Use a modified pgm-auto_menu.php

1. Make a copy of this file:
sohoadmin/client_files/base_files/pgm-auto_menu.php

2. Stick in your template's directory (keep the name the same)

3. Check out the html it's sending out to make bullets for sub menu items (~ line #240)

4. Apply same logic to make bullets for main menu items (~ line #318)


ohhh man, can't wait to try this later!

thanks alot mike, stan

[yugnats]

so is this line where the bullet comes from? is it just the arrow charactor(>)?

// Bullet cell
$sub_buttons .= " <td class=\"".$subBullet."\">\n";
$sub_buttons .= " <div class=\"".$subBullet."\">\n";
$sub_buttons .= " &gt;&gt;\n";
$sub_buttons .= " </div>\n";
$sub_buttons .= " </td>\n";


Thanks, Stan

[Mike Morrison]

so is this line where the bullet comes from? is it just the arrow charactor(>)?

Yup: The "gt" in "&gt;" stands for "greater than", as in ">". So just replace those with, for example, something like this:
$sub_buttons .= "<img src=\"images/my_bullet.gif\">\n";

...and you're off to the races. :cool:

[Mike Morrison]

BTW: If you want to get a little fancier, you can go a few lines up, and find this:

// Define on and off SUB MENU classes
if ($tmp == $pageRequest || $tmp == $dup) {
$subBullet = "vmenu_sub_bull_on";

...etc.

This just determines what style to put on the table cell based on whether the visitor is currently on the page-in-question or not.

So if you did something like this:
// Define on and off SUB MENU classes
if ($tmp == $pageRequest || $tmp == $dup) {
$subBullet = "vmenu_sub_bull_on";
$subClass = "vmenu_sub_on";
$stans_bullet = "my_bullet-on.gif";
} else {
$subBullet = "vmenu_sub_bull_off";
$subClass = "vmenu_sub_off";
$stans_bullet = "my_bullet-off.gif";
}

...And then went back down a few lines and did something like this:
// Bullet cell
$sub_buttons .= " <td class=\"".$subBullet."\">\n";
$sub_buttons .= " <div class=\"".$subBullet."\">\n";
$sub_buttons .= " <img src=\"images/".$stans_bullet."\">\n";
$sub_buttons .= " </div>\n";
$sub_buttons .= " </td>\n";

Guess who now has unique "on page" and "off page" bullet images? Stan does, that's who. :)

[yugnats]

BTW: If you want to get a little fancier, you can go a few lines up, and find this:

// Define on and off SUB MENU classes
if ($tmp == $pageRequest || $tmp == $dup) {
$subBullet = "vmenu_sub_bull_on";

...etc.

This just determines what style to put on the table cell based on whether the visitor is currently on the page-in-question or not.

So if you did something like this:
// Define on and off SUB MENU classes
if ($tmp == $pageRequest || $tmp == $dup) {
$subBullet = "vmenu_sub_bull_on";
$subClass = "vmenu_sub_on";
$stans_bullet = "my_bullet-on.gif";
} else {
$subBullet = "vmenu_sub_bull_off";
$subClass = "vmenu_sub_off";
$stans_bullet = "my_bullet-off.gif";
}

...And then went back down a few lines and did something like this:
// Bullet cell
$sub_buttons .= " <td class=\"".$subBullet."\">\n";
$sub_buttons .= " <div class=\"".$subBullet."\">\n";
$sub_buttons .= " <img src=\"images/".$stans_bullet."\">\n";
$sub_buttons .= " </div>\n";
$sub_buttons .= " </td>\n";

Guess who now has unique "on page" and "off page" bullet images? Stan does, that's who. :)

OH MAN, Thanks alot Mike:)

I am still in exams so have no time right now for extra R&D but as soon as i try it i will post results.

Thanks again,
Stan

[ricardosanX]

Hi,

May I suggest that rather than making mods to the code, just use bground images in CSS to add "bullet" images for menus/submenus.

If for example you removed the >> for sub-menus, then template designers could set the CSS to use any .gif image (including a ">>" image) to apply an image, or just have no image and use the CSS to apply an apprporiate indent.

I know I've been posting a lot about CSS - its because I think if we stripped down a lot of the html formatting code in the PHP, there would much greater flexibility in the template designs. Better template = more sales :)

[PS: Thanks - now I know where to find the >> in the code, so I can comment it out]

Richard

[ricardosanX]

Hi,

[PS: Thanks - now I know where to find the >> in the code, so I can comment it out]

Richard

Here's a quick fixt ot turn off the the ">>" for the sub-menus. Just picked this up a ZenGarden. Just set the CSS for the Div to NOT display
eg
div.vmenu_sub_bull_on {
padding: 0px;
width: 100%;
display: none;
}

Saves having to mess around in the code, and you can still style the TD to apply a image bullet point etc.

Regards

Richard

[Mike Armas]

ok i need somt help with my bullets.

this is my code at line 240-245

// Bullet cell
$sub_buttons .= " <td class=\"".$subBullet."\">\n";
$sub_buttons .= " <div class=\"".$subBullet."\">\n";
$sub_buttons .= " $bullet_image\n";
$sub_buttons .= " </div>\n";
$sub_buttons .= " </td>\n";





this is my code at line 313-330

// Create MAIN MENU option
// ----------------------------------------------------------------------------------------
if ($MENUTYPE == "buttons") {
$main_buttons .= "<INPUT TYPE=BUTTON VALUE=\"$thispage\" STYLE=\"font-family: Verdana; font-size: 8pt; width: 120px; height: 20px; background: #$menubg; color: #$linkc; cursor: pointer;\" onclick=\"navto('$pagelink');\">\n$vertOption\n";
} else {
$main_buttons .= " <tr>\n";
$main_buttons .= " <td valign=\"middle\" class=\"".$mainClass."\">\n";
$main_buttons .= " <div class=\"".$mainClass."\"><img src=\"sohoadmin/program/modules/site_templates/pages/Testpage/bullet.gif\" width=\"10\" height=\"10\">\n";
$main_buttons .= " <a href=\"index.php?pr=$pagelink\" class=\"".$mainClass."\">".$thispage."</a>\n";
$main_buttons .= " </div>\n";
$main_buttons .= " </td>\n";
$main_buttons .= " </tr>\n";
}

$hmainz .= " <td class=\"hmains\"><a href=\"index.php?pr=".$pagelink."\" class=\"hmains\">".$thispage."</a></td>\n";
$main_textmenu .= "<a href=\"index.php?pr=$pagelink\">$thispage</a> | ";

// ----------------------------------------------------------------------------------------

I get the bullet to show put but it looks like this

http://209.59.142.74/~donedeal/

I tryed the why showed in the post but it doesn't show the bullet.gif file.

didn't try the css why i don't now how to do that.

[Cameron Allen]

Nuke, the problem is the first style in your template. Open up your templates index.html file. Look for the line:


<style type="text/css">td img {display: block;}body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;


Delete

td img {display: block;}

Upload the change, and your bullets will display next to the links.

[Mike Armas]

Thank you SO much

[Mike Armas]

Is there a way to add a pic of a line ?

like this site has a line http://www.profusioninternet.com/

evertime you add a page it adds the line just like the bullets.

And can i use my custom botton pic?

In soho you can have text or botton on the Vmenu.

Is there a way to edit the menu php file to add my own botton pic for hover, active and visited.

I can add them in the template but if the customer makes more pages he can't have the nice bottons i make for them.

But if there is a why to do it in the php file then they can make 20 pages and have the nice botton with out me editing the template everytime.

[Cameron Allen]

You can include a copy of pgm-auto_menu.php, which you can find in the doc. root, in your templates directory. For example if your templates index.html was in /sohoadmin/program/modules/site_templates/pages/My_awesome_template/ , you would make a copy of the pgm-auto_menu.php file and add it here. Now you can edit the pgm-auto_menu.php in your templates folder, this way only this templates menu is effected. You will need to hack pgm-auto_menu.php to be able to add a pic between each menu item.

[Mike Armas]

I now i need to hack the pgm-auto_menu.php I just don't now where to edit it.

to add pic of a line under ever new page add to the menu.

And edit to so i can make my own pic bottons and add them also so the customer can use custom made bottons.

i don't now how to add a file to my post.

[Cameron Allen]

Try this:
On line 321 (might be a different line if you have added /deleted lines before this line), which looks like this:


$main_buttons .= " <a href=\"index.php?pr=$pagelink\" class=\"".$mainClass."\">".$thispage."</a>\n";


Change to this:


$main_buttons .= " <a href=\"index.php?pr=$pagelink\" class=\"".$mainClass."\">".$thispage."</a></br><img src=http://www.profusioninternet.com/images/line.gif>";

[Mike Armas]

Thank you for all your help.

I like to ask you one more thing. I am trying to move the bullet and the manu name over a few px.

this is the web page http://silver.tritoncore.com/~donedeal/

The yellow buttel is to far to the left. I don't want to center it i just want to move it 3 or 5 px to the right.

Do i add something to the php to do this or do i add something in the ccs for vmenu ?

I now there is a html tag i can you to move it how ever meny px but i don't now it.

[Cameron Allen]

In your custom.css, add padding: 0px 0px 0px 5px; to your .vmenu class. Your vmenu class should look like:


.vmenu {
font-size: 12px;
color: #000000;
font-family: "Times New Roman", Times, serif;
padding: 0px 0px 0px 5px;


text-align:center
text-decoration: none;
margin-right: 10px;
}


In the padding tag you will notice their are 4 entries. The numbers represent how many pixels of padding from each table wall. The first is the top, second is the right, third is the bottom, fourth is left. So if you wanted a 5 pixel spacer from the left, you would use padding: 0px 0px 0px 5px; .

[weddingassistant]

similar problem here.
vetical submenu is defined as buttons, but they are too narrow - the text doesn't fit and it takes only half of the space on the left side.
take a look here: http://www.weddingplansoftware.com/index.php?pr=Features

where are the files that control this?

thanks,
W-A

[lwyau]

soho menu button uses hard-coded size, while text menu don't have this restriction. Personally I would use text menu instead.

If you really want to use button and change its size, you can copy pgm-auto_menu.php in public_html folder to your template folder, then modify it there. Searching for "INPUT TYPE=BUTTON" should get you to the right locations to make the changes.

[weddingassistant]

Thanks a lot!
I changed the width and it looks much better :-)