Knut Erik
Nuke Active Member
Posts:33
 |
| 16 Jun 2009 8:10 AM |
|
| Hello,
Can someone tell me how to set the height of the main menu bar? I have tried setting it in the .main_dnnmenu_bar class, but nothing happens. I would also like the menu items to be centered vertically in the menu bar.
Thanks for any help.
Regards,
Knut Erik |
|
|
|
|
Joseph Craig
DNN Creative Staff
Nuke Master V
Posts:5354
|
| 16 Jun 2009 8:28 AM |
|
| You need to set this in the skin, styling the element into which the menu is placed. |
|
Joe Craig
DNN Creative Support
Subscribe to the website |
|
|
Knut Erik
Nuke Active Member
Posts:33
|
| 17 Jun 2009 7:24 AM |
|
| Joe,
Thanks for replying.
I don't quite understand what you mean by "setting this in the skin". Do you mean the .ascx file? In the .ascx file, I am able to identify the line where I believe the menu is defined, because it lists the various CSS classes which styles the menu. However, setting height="20", for example, after the "align" statement, has no effect.
Sorry for asking these stupid questions, but I am new to skinning and this type of programming.
Kind regards,
Knut Erik |
|
|
|
|
Joseph Craig
DNN Creative Staff
Nuke Master V
Posts:5354
|
| 17 Jun 2009 11:01 PM |
|
| Sorry. I meant that you need to apply the style to the element that contains the menu. |
|
Joe Craig
DNN Creative Support
Subscribe to the website |
|
|
Lee Sykes
DNN Creative Staff
Nuke Master V
Posts:5307
|
|
Knut Erik
Nuke Active Member
Posts:33
|
| 24 Jun 2009 7:44 AM |
|
| Lee,
Thanks for your reply. By using the "Display ID & class details" from the Web developer toolbar in Firefox, it seem like the classes .Skingradient, .main_dnnmenu_bar and .main_dnnmenu_rootitem controls the menu. The first of these classes seemingly controls the area behind the menu. I thought the .main_dnnmenu_bar class should control the menu itself, but nothing happens when I add "width" or "height" statements. The third and last class controls menu font, background color etc, but not height or width. I need to set the height or width of the menu bar because I sometimes get a break in the menu when it stretches out. I would be grateful for any advice.
Regards,
Knut Erik |
|
|
|
|
Lee Sykes
DNN Creative Staff
Nuke Master V
Posts:5307
|
|
Knut Erik
Nuke Active Member
Posts:33
|
| 01 Jul 2009 3:20 AM |
|
| Lee,
It would be great if you could take a quick look. The URL is: http://kvina.niva.no/striver/. I would like to set the height of the main menu equal to the flags picture to the left, and the width equal to the logo above (fixed at 900px). It would also be nice to have the menu items centered vertically, but it's not that important.
Is it possible to style individual elements by using the full ID instad of the general class name?
Thanks again,
Knut Erik |
|
|
|
|
Lee Sykes
DNN Creative Staff
Nuke Master V
Posts:5307
|
| 01 Jul 2009 5:06 AM |
|
Hello,
I changed this line of code, removed height and added padding:
.main_dnnmenu_bar {
cursor: pointer;
cursor: hand;
padding: 1px 0;
background-color: #999999; /*Transparent;*/
}
You will see it is slightly larger than the flags, but it maybe easier to increase the size of the flags to match
Yes you can specify individual IDs, use the Web Developers Toolbar, and menu / information / display element information
then with your mouse, navigate through the menu + click on the item you want to view the id of:
ie. this is for the partners menu item
#dnn_dnnNAV_ctldnnNAVt86
{
border: 2px solid red;
}
|
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts
Twitter: www.twitter.com/leesykes
 |
|
|
Knut Erik
Nuke Active Member
Posts:33
|
| 01 Jul 2009 7:59 AM |
|
| Lee,
Thank you very much for looking at my webpage! This was very helpful. I can use padding to control the width of the menu as well, but the best alternative would be to set it to automatically stretch out to fit with the green/blue login area above, if this is possible.
Regarding the individual ID's: When I copy your code for the "Partners" menu item into skins.css and play around with the setting, nothing happens. Do I have to specify individual ID's differently than general classes?
Thanks again,
Knut Erik |
|
|
|
|
Lee Sykes
DNN Creative Staff
Nuke Master V
Posts:5307
|
| 01 Jul 2009 5:02 PM |
|
Hello,
When testing out these things I would recommend you use the web developers toolbar, we cover how to start toolbar in this tutorial:
I just checked the ID for the partners menu item and the code does work, try this one:
#dnn_dnnNAV_ctldnnNAVt86
{
border: 10px solid red;
}
IDs are specified just as above, if you use the web developer toolbar at I explained in the previous post, it will display the ID that you actually need to use.
For the width, double check your tables, you may be able to specify a width for the table cell holding the menu.
Thanks,
|
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts
Twitter: www.twitter.com/leesykes
|
|
|
Knut Erik
Nuke Active Member
Posts:33
|
| 03 Jul 2009 3:18 AM |
|
| Lee,
Your test code for the partners menu item works fine now. I don't know why it didn't work the last time.
I use the web developers toolbar in Firefox to test these things. Unfortunately, Firefox sometimes displays the webpage differently than Internet Explorer. I think most users of my site uses IE, therefore I am adapting the skin settings to fit with this browser.
Thanks for your help. |
|
|
|
|
Lee Sykes
DNN Creative Staff
Nuke Master V
Posts:5307
|
|