Log in

Edit color border and font of Elgg Menu Nav

Aldo Li Volsi
By Aldo Li Volsi

Hi to all! 

I would like to change the font and the color of Elgg menu, simply I would to do it with background white (like body) and change button color and border.

I attach an image for explain better what I would like. https://postimg.cc/image/l0lugewp7/

Anyone can tell me what css code I have to write (I am using GalliCSS plugin to modify), i have modified the Elgg Button with this code:

p, body {
    font-family: "Segoe UI",Tahoma,Calibri,Trebuchet MS,sans-serif;
    font-size: 14px;
}
.elgg-button {

font-size: 16px;
font-family: "Calibri",Tahoma,Calibri,Trebuchet MS,sans-serif;
font-weight: bold;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

width: auto;

padding: 2px 4px;

cursor: pointer;

outline: none;

-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);

-moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);

box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);

}

 

 

I am not an expert, so I don't know what code need to have what I would.

Thank you all! 

  • Aldo Li Volsi
    Aldo Li Volsi

    I have tried to copy all code of ELGG MENU in navigations.css of Aalborg Theme and paste it in GalliCSS plugin, now I have the button I want in this way: 

    I would like to have always that button like "PUBBLICA" in my menu, and when I go on it with mouse it lights (exactly what now I have with button "Pubblica").
    I would also center the button of Nav Menu that are too high in the menu.

    Last thing, when I go to button "ALTRO" (it is button MORE in English), now the dropdown menu with other entries doesn't remain fixed.

    Thank you all for help! 

    this is the code I used for now:

     

    <?php
     
    ?> 
    p, body {
        font-family: "Segoe UI",Tahoma,Calibri,Trebuchet MS,sans-serif;
        font-size: 13px;
    }
    /* ***************************************
    SITE MENU
    *************************************** */
    .elgg-menu-site {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    float: left;
    left: 0;
    top: 0;
    position: relative;
    z-index: 50;
    }
    .elgg-menu-site > li {
    float: left;
    }
    .elgg-menu-site > li > a {
    color: #FFF;
    padding: 14px 18px;
    }
    .elgg-menu-site > li > a:hover {
    text-decoration: none;
    }
    .elgg-menu-site > .elgg-state-selected > a,
    .elgg-menu-site > li:hover > a {
    background-color: #60B8F7;
    color: #FFF;
    font-size: 15px;
    font-family: "Calibri",Tahoma,Calibri,Trebuchet MS,sans-serif;
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: auto;
    padding: 2px 4px;
    cursor: pointer;
    outline: none;
    -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
    -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
    }
    .elgg-menu-site > li > ul {
    position: absolute;
    display: none;
    background-color: #FFF;
    border: 1px solid #DEDEDE;
    text-align: left;
    top: 47px;
    margin-left: 0;
    width: 180px;
     
    border-radius: 0 0 3px 3px;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.25);
    }
    .elgg-menu-site > li:hover > ul {
    display: block;
    }
    .elgg-menu-site-more li {
    width: 180px;
    }
    .elgg-menu-site-more > li > a {
    padding: 10px 20px;
    background-color: #FFF;
    color: #444;
    }
    .elgg-menu-site-more > li:last-child > a,
    .elgg-menu-site-more > li:last-child > a:hover {
    border-radius: 3px;
    }
    .elgg-menu-site-more > li.elgg-state-selected > a,
    .elgg-menu-site-more > li > a:hover {
    background-color: #F0F0F0;
    color: #444;
    }
    .elgg-more {
    width: 182px;
    }
    .elgg-more > a:after {
    content: "\bb";
    margin-left: 6px;
    }
    /* ***************************************
    ELGG BUTTON
    *************************************** */
    .elgg-button {
     
    font-size: 15px;
    font-family: "Calibri",Tahoma,Calibri,Trebuchet MS,sans-serif;
    font-weight: bold;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: auto;
    padding: 2px 4px;
    cursor: pointer;
    outline: none;
    -webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
    -moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
     
    }
     
    remember I'm not a programmer, I'm an accountant... so I don't know what I'm doing  :-)
  • Nikolai Shcherbin
    Nikolai Shcherbin

    In first, GalliCSS is an outdated plugin, don't use it.

    Just customize the existing CSS. The view overloading is best choice for you (but you need to create your own plugin in this case).

    You need to overload these files:

    mod\aalborg_theme\views\default\elements\buttons.css

mod\aalborg_theme\views\default\elements\navigation.css (section Site menu)
  • Aldo Li Volsi
    Aldo Li Volsi

    Ok I will change directly the button.css and navigation.css 

    but can you tell me what code I have to edit to have what I want ?

    I'm not a programmer... really thanks ! 

     

     

  • Nikolai Shcherbin
    Nikolai Shcherbin

    Don't edit these file directly! Read the mentioned docs

  • Nikolai Shcherbin
    Nikolai Shcherbin

    button color and border

    All in views\default\elements\buttons.css

    change the font and the color of Elgg menu

    All in section SITE MENU views\default\elements\navigation.css

  • Aldo Li Volsi
    Aldo Li Volsi

    So, I have to create a plugin to edit menu ?

     

  • Nikolai Shcherbin
    Nikolai Shcherbin

    1 - Make your own plugin (you need manifest.xml and start.php only)

    2 - Place your plugin at the bottom on Administration->Plugins

    3 - Copy files from

    mod\aalborg_theme\views\default\elements\buttons.css

mod\aalborg_theme\views\default\elements\navigation.css

    to

    mod\your_plugin_name\views\default\elements\buttons.css

mod\your_plugin_name\views\default\elements\navigation.css

    4 - Now edit these files

    5 - Run flush the caches via Administration

  • Aldo Li Volsi
    Aldo Li Volsi

    Ok, I have done what you told me, created my first plugin. Hope well  :-)

    I'm trying. thank you!

  • Nikolai Shcherbin
    Nikolai Shcherbin

    I did it for you already. Enjoy!

  • Aldo Li Volsi
    Aldo Li Volsi

    Ok it seems works fine! 

     

Theme Development

Theme Development

Navigation

Contact

info@elgg.org

Security issues should be reported to security@elgg.org!

Legal

©2014 the Elgg Foundation

Elgg is a registered trademark of Thematic Networks.

Cover image by Raül Utrera is used under Creative Commons license.

Icons by Flaticon and FontAwesome.