I am working on upgrading a site to Elgg 1.8.4.


I see that there is very useful reusable button css in views/default/css/elements/buttons.php.


So in my custom plugins I want to use 

<a href="#" class="elgg-button"> and I expect the css to be appliied. It is not.

I searched everywhere and I can't find any information on how these css views are loaded. Is there any documentation on how to take advantage of these built-in css files? Should I be able to use the elgg-button class in my plugins to get a button style link?




  • General solution: Right-click on an element, select Inspect Element, and look at what class names are used.

    Elgg's bundled Developer Tools plugin has a handy "theming sandbox" (admin > Develop > Tools > ...) mini-site that gives you a demo of the various components and accompanying CSS. 

  • Thanks.

    The question is how do I make sure the buttons.php css is loaded in the browser so when I use elgg-button classes, the buttons are styled appropriately.


  • Aha.


    I figured this out. The theme was overriding the view, then returning true at the top so the button css never loaded. Working it out with the theme.


  • @ Dave Bauer , Do not change plugins css or core files... when upgrading, you will run into nightmares! What You need to do is write your own plugin and in your own plugin start.php file, extend the code below

    elgg_extend_view('css/elgg', 'anyname/elements/buttons');  // this is css to modify buttons buttons

    your buttons.php css file ubove will have something like

     * CSS buttons
     * @subpackage UI
    /* <style>
    /* **************************
    ************************** */

    .my-button + .my-button {
        margin-left: 4px;

    /* Base */
    .my-button {
        color: #333;
        font-weight: bold;
        text-decoration: none;
        width: auto;
        margin: 0;
        font-size: 11px;
        line-height: 16px;
        padding: 2px 6px;
        cursor: pointer;
        outline: none;
        text-align: center;
        white-space: nowrap;

        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #fff;
        -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #fff;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #fff;

        border: 1px solid #999;
        border-bottom-color: #888;

        background: #eee;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f6f6), to(#e4e4e3));
        background: -moz-linear-gradient(#f5f6f6, #e4e4e3);
        background: -o-linear-gradient(#f5f6f6, #e4e4e3);
        background: linear-gradient(#f5f6f6, #e4e4e3);

    .my-button-delete {
        background: #444;
        border: 1px solid #333;
        color: #eee !important;
        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #999;
        -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #999;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), inset 0 1px 0 #999;


    Then on the same start.php file change the "link_class" to your own class that you want to modify,

    elgg_register_menu_item('title', array(

                        'name' => 'remove_me_from_here', // the name of your menu item

                        'text' => elgg_view_icon('users') . elgg_echo('delete:menow'),

                        'href' => "/action/delete/remove?me=$owner->guid",

                        'is_action' => TRUE,
                        'link_class' => 'my-button my-button-delete', // my button class controlled by your css

                        'contexts' => array('profile'), // the page where the css will be loaded
                        'priority' => 1, // this will give your plugin first priority then followed by other buttons


    And this will work once your flash your catches....

    Hope it helps some one having the same problem...