ARI Soft - Menu Styling and positioning

Home

News

Forum

About Us

Demos

Products

F.A.Q.

Featured Demos

ARI Smart Content demo

ARI Quiz demo

WordPress Quiz plugin

WordPress Lightbox plugin

e-mail: info@ari-soft.com

Shopping Cart

You currently have 0 items in your cart.

Show Cart

Recent Events

31/12/2023 New Year SALE

We are glad to announce New Year SALE. 25% discount for all our extensions. Use NY24 coupon code. Hurry up the discount is valid till 7 January.

more...
21/11/2023 BLACK FRIDAY 23 is coming

BIG SALE, 35% discount for all our extensions. Use BF23 coupon code. Hurry up the discount is valid till 27 November.

more...

2Checkout.com, Inc. is an authorized retailer of goods and services provided by ARI Soft.

Welcome, Guest
Please Login or Register. Lost Password?

ARI Soft Forum

Joomla components

ARI YUI Menu

Menu Styling and positioning

(1 viewing) (1) Guest

Page: 1

TOPIC: Menu Styling and positioning

Forum Tools

#8284

Menu Styling and positioning 14 Years ago

Karma: 0

Hi there, Im just learning css and would like to know a couple of things about your menu. my site is www.sure-fire.co.uk

Firstly I would like the menu to be centered horizontally in my topMenu position. What would be the css for this?

Secondly, I would like the menu to be in #898989 bg color, and for the text to be arial font,

Thirdly i would like the sub menus to be transparent if possible.

Can you provide me with the css that Id need to put in the styling box on the module perameters page.

Thanks in advance!

thomshaw

The administrator has disabled public write access.

#8285

Re:Menu Styling and positioning 14 Years ago Karma: 760

Hello,

Use the following CSS rules:

Code:



#header_wrapper .yuimenubar A.yuimenubaritemlabel,

#header_wrapper .yuimenubar A.yuimenuitemlabel

{

 font-family: Arial;

}



#header_wrapper .yui-skin-sam

{

 text-align: center;

}



#header_wrapper .yuimenubar

{

 display: inline-block !important;

}



#header_wrapper .yui-skin-sam .yuimenu .bd

{

 background-color: transparent;

}



#header_wrapper .yui-skin-sam .yuimenubar

{

 background: #898989 none;

}

Regards,
ARI Soft

admin

The administrator has disabled public write access.

#8287

Re:Menu Styling and positioning 14 Years ago

Karma: 0

Thanks!

the support really is 1st class here!

one more thing. id like the menu to sit in a module 960px wide, all of which should have the 898989 bg color. ATM the menu has container bg color either side.

Any help?

Also id like the submenus to have greater spacing between the items, and have a 1px border of 898989 around them.

Id also like to change the hover action to show a different png, and for that png to be displayed on the active menu item. Any help here?

Sorry to bug!

thomshaw

The administrator has disabled public write access.

#8289

Re:Menu Styling and positioning 14 Years ago Karma: 760

Use the following CSS rules:

Code:



/* on hover */

#header_wrapper .yui-skin-sam .bd ul li.yuimenubaritem-selected

{

 background: transparent;

 background-image: none; /* place path to necessary background image */ 

}



#header_wrapper .yui-skin-sam .yuimenuitem

{

  border-top: 1px solid #898989;

}



#header_wrapper .yui-skin-sam .yuimenuitem

{

  padding: 8px 0;

}



#header_wrapper .yui-skin-sam LI.first-of-type

{

 border-top: none;

}

Regards,
ARI Soft

admin

The administrator has disabled public write access.

Page: 1

Useful Links