Now that Elgg 1.0 is released, administrators may want to distinguish their site for all the other installations. As of this writing, there are no Elgg1.0 themes available nor has the Elgg Documentation Wiki yet been updated with instructions on theme development. There are some quick and easy ways to significantly change the appearance of your site.
The first thing you need to do is grab your ftp client and access yourelggdirectory/views/default/css.php and open it in your text editor. This is the heart of the appearance of your Elgg site. Now that you are looking at the code, it’s time to start hacking. Make sure you are working on a copy of css.php. If you mess things up, you can always upload your backup and restore the original theme.
Where do you start? First of all, the file is well commented by the elgg developers. There are also some cool tools can be a lot of help. One great free tool is a Firefox Plugin called Web Developer. Once you install Web Developer you will see a new tool bar on your browser.
Click to enlarge
Look for the CSS button, click it and select “View Style Information.”
Now, as you mouse over elements of the page, Web Developer will display the CSS style information for that element, giving you a pretty good idea where to alter the code to change its appearance.
Note the element is outlined in red above and the styles impacting it displayed directly below the tool bar. A quick peak at the code under those divisions should quickly reveal which needs to be edited.
Some elements such as the background are based upon graphics:
body {
text-align:left;
margin:0 auto;
padding:0;
background: #4690d6;
font: 80%/1.4 "Lucida Grande", Verdana, sans-serif;
color: #333333;
background: url(<?php echo $vars['url']; ?>_graphics/page_back_linen.gif) repeat left 1px;
}
In that case you have the option of finding another graphic, or in some cases simply replacing it with a color.
Another handy option is to use your find/replace command to change colors en masse. This css file makes it easy because around line 70, you will find:
70 /* *************************************** 71 DEFAULTS 72 *************************************** */ 73 74 /* elgg open source blue #4690d6 */ 75 /* elgg open source dark blue #0054a7 */ 76 /* elgg open source light yellow #FDFFC3 */
These are color elements that repeat many times in the file. By choosing a replacement color appropriate for each of the three is a quick and easy way to make changes to the theme.
Once you have made your changes, you can overwrite the css.php file to see the results, but a better approach is to use the override system. Simply save the file as css.css and upload it to yourelggdirectory/_css. This way, you still have the default available to fall back on if things did not work out as expected. Please refer to this post on installing themes as plugins.
You may want to change a few elements at a time then upload and view results. There are also some really handy css editors out that give real time feedback. CSSEdit for the Mac makes this process even easier! I’m sure there is something similar on other platforms.
Another thing that you may want to change is the text within Spotlight at the bottom of pages. One option is to write plugins to populate Spotlight, but that is beyond the scope of this post. The other way to edit it is to go to yourelggdirectory/views/default/spotlight/default.php. The commenting makes it clear where to edit.
While this in all probability does not represent the full procedure for developing an Elgg theme, this information will help change the look of your installation. You can do so with very little knowledge of CSS, but of course, the more you know, the easier it will be to make more significant changes.
Related Posts
-
Hey Steve, Jade here from http://www.tastyseed.com Thanks for your comments regarding the autoAdd feature. Users have requested ability to add to the dashboard as well so I’ll have the updated mod up shortly.
Thanks for an informative css tutorial. I was unaware of “Web Developer” plugin and will have to try that out. An interesting thing was to see the css handled via php which makes a lot of sense, I just have not seen it done like that before.
I’m all about the development first since my thinking is just that I need to have something tangible and working before I go ahead and spend time making it look nice!
I’ll definitely be looking into themes and such when I configure elgg to what I need it to be.
Keep in touch – Jade
-
Pingback from Creating Elgg 1.0 Themes | openedweb.com on August 25, 2008 at 3:31 pm
-
Pingback from Elgg 1.0: Blue Gneiss Theme | openedweb.com on August 29, 2008 at 4:48 pm
-
Can you provide a post on how to modify the front page that can be displayed for those user not logged in. I was looking at something similar to wiggiwoo.com. I tried a tip to modify canvas, but then it’s in all pages–not what I want. I just want a simple simple welcome page for new users, and a way for them to see latest activity and discussions. I am sure it is simple, but I haven’t the foggiest. I appreciate your help. Your blog so far has been a life saver in trying to get my site set up
-
Much of what you want to do needs to be done by editing elgg/index.php . Of course that would be hacking the core. There is way to do this via the hooks system, but I don’t quite understand it yet. I will be reading up and experimenting. When I have it, I will blog about it. Meanwhile–mess around with index.php.
-
Hi Steve, thanks for your comment. I have been experimenting. Interestingly, it has something to do with Canvas/Layout view used via index. I have been playing around creating it as a mod plugin. I sort of have it working without modifying the core. Problem is, it keeps repeating the info all over the site, even when logged in
I am surprised there isn’t already built in a way to tell people coming to an Elgg site what it’s all about. . Lucky I am working on a small site for friends, but some people they might invite other who might want to know what it’s all about…Your thoughts would be appreciated. I will email wiggiwoo and see if they are willing to give some hints
-
Wow too early here and it shows. Sorry for the atrocious grammar. I think I am legible :p
-
I suspect that is because index.php handles the if/else for logged in and not logged in.
-
Hey Steve.
I see in your article you mention using the web developer toolbar to view the CSS styles.
A far better tool is FireBug for Firefox.
Not only can you hover over the elements on the page, FireBug also gives you the HTML view simultaneously, so you can select either the elements direct from the page or from the code and see the associated styles.
What is even more useful, is after you’ve selected the element, you can edit the style and instantly see the change on the page.
Couldn’t live without this tool in my day to day web development.
-
Steve:
Your articles have been very useful. I tried to send you a question through email but your CAPTCHA does not seem to be working.
Anyway, what is the area that you highlighted in red in your example above. Using the webmaster tool I could get every area but that one. My goal is just to resize it and add an image plus some text next to it.
Thanks.
–TIm
This work by Stephen J O’Connor is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
13 comments
Comments feed for this article
Trackback link: http://openedweb.com/blog/2008/08/18/hacking-an-elgg-10-theme/trackback/