Customize CSS v1.8.3

Release Notes

Initial Release

As this plugin contains copies of the core css for reference, the versioning of this plugin will match that of Elgg.

  • Just what I needed.  Thanks!

  • Thanks for the feedback.  Let me know if it makes sense, if there's anything that can be explained better, etc.  It makes perfect sense to me, but I tried to write it for someone completely new to Elgg.

    If it's well recieved and useful to people I might do a few others, demoing how to add custom javascript, extend/overwrite views etc.

    I know all this is covered in the docs, but I learn much better when I can install something, see the demo code, and play around with it a bit.  I'm sure that's true for many other people and this plugin should hopefully make it just a little bit easier.

  • Hint for the rest of us n00bs.  If all you want to change is the colors then you can do so like...

    All of the custom elgg colors are defined in the plugin's elgg.php file in the comment block.  There are 3 of them.

    /* 

     * Colors:

     *  #4690D6 - elgg light blue

     *  #0054A7 - elgg dark blue

     *  #e4ecf5 - elgg very light blue

     */

    Try coming up with your own colors.  Depending on which IDE you use you can then search the reference folder for all occurences of #4690D6 and bring each CSS entry with that color into the css.php file.  You can then find/replace that color in the css.php file with your own custom color that you're replacing Elgg's "light blue" color with.  Then do the same thing for Dark Blue and Very Light Blue.

  • Well, that gets "most" of it.  :D  The search box border is still blue and some buttons (Go, Post, Upload, Save, Search) are still blue as well.  I'll keep at it and post my findings here.

  • Buttons are good.  I just had it defined in css.php in a place that it didn't like.  

  • For the search box border you can add:

    .elgg-search input[type="text"] {

    border: 1px solid #000;

    }

     

    Just change the color to whatever you want.

  • This is for the login dropdown on the index page... change the color to whatever you want the border to be.

    .elgg-button-dropdown {

    border: 1px solid #000;

    }

  • I think that's about it!

  • @lee.. smells like an upcoming theme of yours? :)

  • All I did is change colors... not really rocket surgery.  But if anyone wants it I'll be glad to post it.  Credit to Matt on this one.  He made it pretty much painless.

  • hello. Is there a way to place one's own logo and remove elgg's logo form topbar using this plug in. I've been trying but no dice. I Really appreciate the help

  • @uliuli - this plugin is just intended to show how to modify css.  The scope is narrow because the intended audience is developers new to Elgg.  There are many other plugins out there that deal with switching the logo.

  • Hi! I just inserted the following code which should chane the header background into the css.php of customise_css:

    .elgg-page-header {
    position: relative;
    background: #FE2EC8 url(<?php echo elgg_get_site_url(); ?>_graphics/header_shadow.png) repeat-x bottom left;
    }

    and there is no change and the page still loads with the default color. 

  • Hola,

    Flush caches.

     Another rum & coke por favor...  Gracias!

  • @Matt - We need to add a like button for comments here ;) Enjoy the vacation!

  • I am trying this with Elgg 1.8.18 - fresh installs.

    While I can easily change and view the changes for .elgg-breadcrumbs
    I cannot do so for .elgg-tabs 

    I have set the priority to 1000, this plugin is at the bottom of the list, have flushed cache/hit upgrade etc - can see easily changes made to breadcrumbs - but how much I try the Tabs remain the same.

    Confused!

Matt Beckett

I'm a self-employed web developer, family man, nerd, scuba diver. Manager/maintainer of this elgg community site, and core Elgg development team member.

Stats

  • Category: Misc
  • License: GNU General Public License (GPL) version 2
  • Updated: 2014-11-17
  • Downloads: 2530
  • Recommendations: 16

Other Projects

View Matt Beckett's plugins