Custom CSS

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:17

Custom CSS

Poster: mqcarpenter
Dated: Wednesday January 18 2006 - 4:18:32 GMT

I would like to use my own CSS to handle the styling of the menu elements. Is this possible? I noticed that even if I blank out the "menUStyle" details, it does not pick up the CSS that the menu is already a part of. Can the CSS references be put in this section directly (ie reference the class):

Code:

aI("text=home;url=/");
aI("text=league;showmenu=league;url=/");
aI("text=teams;showmenu=teams;url=/");
aI("text=stats;showmenu=stats;url=/");
aI("text=manage;showmenu=manage;url=/");

I would like the links to behave the way they do now (the menu), prior to implementing milonic:

http://www.otbdesign.com/rotc7/

TIA

Poster: vikenk
Dated: Wednesday January 18 2006 - 4:53:40 GMT

Yes, you can use custom CSS. What you need to do is define an "onclass" and "offclass" style in your CSS. Then you would assign them using the onclass and offclass commands. In my experience, you must have both an onclass and offclass. So in your css you could put:

Code:

.menuon {
border: blah blah blah;
font-style: blah blah blah;
background-image: blah blah blah;
}

.menuoff {
border: yada yada yada;
font-style: yada yada yada;
background-image: yada yada yada;
}

Then, you can add this to your main style as:

Code:

onclass=menuon;
offclass=menuoff;

You can also put it inline as you suggested:

Code:

aI("onclass=menuon;offclass=menuoff;text=league;showmenu=league;url=/");

Hope this helps.

Viken K.

Poster: Ruth
Dated: Wednesday January 18 2006 - 7:41:00 GMT

Hi,

There is also a basic 'demo' page for css styling in the menu. It talks about off and onclass properties and using a custom css style for the menu. It's a pretty quick read and has a page of examples with the css class noted and what the results are.

http://support.milonic.com/beginners/css_styling/

Hope this helps.

Ruth

Poster: mqcarpenter
Dated: Wednesday January 18 2006 - 16:40:24 GMT

Just out of curiosity, aren't we essentially talking about a:link and a:hover? If I place the menu reference inside a div with a class declaration, shouldn't that be enough, or does it have to be declared inside the corresponding js file? In other words, why doesn't this work:

Code:

<div class="menu"><script type="text/javascript" src="menu_data.js"></script></div>

Poster: Ruth
Dated: Wednesday January 18 2006 - 17:16:46 GMT

Well, using that declaration in the div would apply it to the div, but it's not like this is text written in the div, I mean, the menu_data.js file does contain text and you edit it as text, but it is js. So I'm not sure how you get a class that is applied to a div to apply to a part of a 'program', to apply to functions, unless you use the built in function that allows it to be applied.

Then again, I dont' do much css, don't do any js functions, and sure don't write programs :lol:

Ruth

Poster: vikenk
Dated: Wednesday January 18 2006 - 17:22:09 GMT

The menu should only be placed in a table or div if you plan on relatively positioning the menu to move with your content. Otherwise, the menu will float according to the settings in the menu_data.js file.

Calling the script from inside a div doesn't mean the script is *in* the div *unless* it's relatively positioned.

So that's why "<div class="menu"><script type="text/javascript" src="menu_data.js"></script></div>" doesn't work. If you want the menu to be in the div, what you would do is take the Main Menu out of the menu_data.js file and place it in the div, leaving the rest of the style and other menu's in the menu_Data.js file. So you div would look like this:

Code:

<div class="menu">
<script type="text/javascript">
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=155;
left=200;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Home;url=http://www.milonic.com/;status=Back To Home Page;");
aI("text=Menu Samples;showmenu=Samples;");
aI("text=Milonic;showmenu=Milonic;");
aI("text=Partners;showmenu=Partners;");
aI("text=Links;showmenu=Links;");
aI("text=My Milonic;showmenu=My Milonic;");
}
drawMenus();
</script>
</div>

Actually, even if the menu was relatively positioned I'm not sure it would inherit the div's style. Again, I'm not *sure*, so it might inherit. You'll have to experiment.

See http://www.milonic.com/menusample9.php for an example on how to use the menu in a table.

Hope this helps.

Viken K.

Poster: mqcarpenter
Dated: Thursday January 19 2006 - 2:47:55 GMT

vikenk,

Thanks for the idea, but that does not work. My confusion I think stems frmo the way PHP works. PHP would generate the actual HTML and text, which therefore would be affected by the class associated. I will use the method Ruth mentioned and tweak it to make it work the way I need it.

Thanks to everyone!

Poster: Ruth
Dated: Thursday January 19 2006 - 4:16:51 GMT

Hi,

I just checked the page, if that's how you wanted it to work, it looks nice

Is there something else you wanted it to do?

Ruth

Industrial Strength JavaScript and DHTML Menus

Custom CSS