Edit color border and font of Elgg Menu Nav

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! 

  • 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  :-)
  • 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)
  • 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 ! 

     

     

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

  • 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

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

     

  • 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

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

    I'm trying. thank you!