Elgg 1.0: Blue Gneiss Theme

I put together an Elgg 1.0 theme. Blue Gneiss (pronounced nice) represents modest changes from the default core theme. The main differences are the color scheme, an image in the header, and the use of Spotlight. Spotlight has been moved to the login page and does not appear once logged in. This can serve as a site introduction.

Blue Gneiss installs as a plugin and uses the override system. Any edits to the theme, including Spotlight contents, should be done in mod/blue_gneiss_theme/ directories. While I didn’t include all the core default view files, I included several that I had edited and yet others that I suspect some may want to edit. It also includes a full set of graphics from the core, allowing you to make changes to the theme while leaving the core intact.

This theme includes edits to:

views/default.css.php (several changes)
views/default/pageshell/pageshell.php (moved spotlight and made it load not logged in)
views/default/page_elements/footer.php
views/default/spotlight/default.php

In the graphics I added:

graphics/header.jpg

I also altered:

footer_back.gif
spotlight_back.gif
owner_block_back.gif

To install, download, unpack and upload to elgg/mod. Log in, go to Administration–>Tools Administration, then enable. The theme’s default spotlight has some customization hints,

I’m sure there are a few bugs and tweaks that I missed. I have not tested it with Internet Explorer. I would appreciate comments!

Update September 1, 2008:

This is a new version that eliminates the ability to collapse Spotlight and an error that occurred while trying to log on with Spotlight collapsed.

You can preview here. Download here.

Hints for hacking Elgg Themes.

Explanation of theme overrides in Elgg.

Related Posts

Tags: ,

  1. Steve’s avatar

    A brighter variation that I considered can be had by changing blue_gneiss_theme/views/default/css.php:

    /* ***************************************
    PAGE LAYOUT – MAIN STRUCTURE
    *************************************** */
    #page_container {
    margin:0;
    padding:0;
    background: #6fa1b2;

    to:

    /* ***************************************
    PAGE LAYOUT – MAIN STRUCTURE
    *************************************** */
    #page_container {
    margin:0;
    padding:0;
    background: #0588BC;

    Reply

  2. Jade Dominguez’s avatar

    Hey that’s pretty cool! Just wanted to let you know I tested it out and everything seemed to work. As stated before I’m not big on design until AFTER I’ve programmed the functionality, so I’m glad someone is working on theming! Just a quick observation: don’t you think width’s should be relative as much as possible? In other words use percentages. The reason I say this is because on a quick glance of the css files, I notice some views like the register box being absolute values.

    Reply

  3. Steve’s avatar

    It’s great to see that it works. You give me too much credit though. I just edited the existing css.

    I understand what you mean about relative vs absolute. That is a direction that I will explore as it makes sense.

    Reply

  4. Diane Swift’s avatar

    Thanks for the theme Steve, I have tested in both firefox and IE 7 and it seems to be working great in both.

    I installed Elgg three days ago and it has been working great so far, quite an easy set up once I got my head around the htaccess file. I have not really done much work on web development before so this is a new and exciting concept for me.

    I had managed to make a few changes to the spotlight, but I hope to do lots more with Elgg, and your tutorials have been a great help, as I really did not have a clue where to start and what to files to edit.

    Well, I am now going to play around with some of the files and see what I can edit. I like that you have made the spotlight show when not logged in, I was wondering if that would be possible and now I know :) I wonder if it is possible to show spotlight for both logged in, and not logged in users?

    Again, Many thanks

    Diane

    Reply

  5. Manish Mohan’s avatar

    This is great. The theme worked just fine. It was easy to install and customize.

    One question:
    I need to change the text color in the layout header. I tried modifying the layout_header in css.php. I tried to add color and font-color to this.

    color:#FFFFFF

    But it doesn’t seem to work. I am new to PHP so it might just be that I am using the wrong construct. What and where do I need to change to change to font color of the header text?

    #layout_header {
    text-align:left;
    color:#FFFFFF;
    width:100%;
    height:67px;
    border-bottom:0px solid #00578A;
    background-image: url(mod/blue_gneiss_theme/graphics/header.jpg);
    }

    Reply

  6. Steve’s avatar

    @ Diane go to blue_gneiss_theme/views/default/pageshells/pageshell.php. Look for:

    < ?php
    if(!isloggedin())
    {
    ?>

    < ?php echo elgg_view('page_elements/spotlight', $vars); ?>
    < ?php
    }
    ?>

    If you always want Spotlight on delete:

    if(!isloggedin())

    If you want it logged in only replace:

    if(!isloggedin())

    with:

    if(isloggedin())

    @ Manish I don’t have time to test it, but for a quick fix, you might try adding a color attribute to h1. That will change all h1 text.

    Reply

  7. Diane Swift’s avatar

    Thank you for your reply Steve

    I have managed to get the spotlight to show constantly.

    However, doing this has created a problem when logging in. When a user logs in, instead of being taken to the dashboard, they are taken to a blank page which is being called from

    /action/user/spotlight?closed=true

    I have taken a look at the code from /action/user/spotlight (which I have pasted below) and will try to edit the file for a fix

    spotlightclosed = $closed;
    exit;

    ?>

    Reply

  8. Diane Swift’s avatar

    I think I have fixed the above issue by replacing

    $closed = get_input(’closed’,'true’);

    with

    $closed = get_input(’closed’,'false’);

    Reply

  9. Diane Swift’s avatar

    nope scrap that, its still directing to /action/user/spotlight?closed=true when logging in.

    Reply

  10. Steve’s avatar

    I am not able to replicate your problem. In

    blue_gneiss_theme/views/default/pageshells/pageshell.php

    I eliminated:

    if(!isloggedin())

    from:

    < ?php
    if(!isloggedin())
    {
    ?>

    < ?php echo elgg_view('page_elements/spotlight', $vars); ?>
    < ?php
    }
    ?>

    All works fine on this end. Nothing else needed to change.

    Reply

  11. Diane Swift’s avatar

    Everything works fine if spotlight is open when logging in, but if spotlight is closed when logging in that is when I get the error /action/user/spotlight?closed=true

    I will see what I can come up with to fix this

    Thanks for your help :)

    Reply

  12. Diane Swift’s avatar

    Hi Steve

    I have noticed the same error with the spotlight when trying to log into your web site http://openedweb.com/elgg1

    If I close the spotlight before clicking “log in” i am taken to http://openedweb.com/elgg1/action/user/spotlight?closed=true

    This happens in both the latest firefox and internet explorer 7

    Pressing the back button on the browser redirects to the dashboard.

    Diane

    Reply

  13. Steve’s avatar

    Ah–now it is clear what you mean. I see it too.

    I believe it is also may be responsible for some of the mysterious mod_secure messages I am getting.

    No promises (school starts tomorrow), but I’ll look into it!

    Reply

  14. Diane Swift’s avatar

    Im glad im not the only one seeing it :)

    Sorry I did not explain myself properly before, it is something I have trouble doing… even the most simplest things i seem to over complicate them lol

    I shall have another look at it again tomorrow, and get back to you if I find a fix.

    Reply

  15. Steve’s avatar

    One solution is to eliminate the option to collapse Spotlight:

    In mod/blue_gneiss_theme/views/default/page_elements/spotlight.php

    Delete:

    < ?php

    $closed = false;
    if ($_SESSION['user'] instanceof ElggUser) {
    if ($_SESSION['user']->spotlightclosed) {

    $closed = false;

    }
    }
    if ($closed) {
    ?>
    action/user/spotlight?closed=false’)”>+
    < ?php
    } else {
    ?>
    action/user/spotlight?closed=true’)”>-
    < ?php

    }

    ?>

    I don’t think that a collapsible spotlight for non users is important.

    Still, I would like a more elegant solution.

    It will be distributed this way the next time I pack it up unless somebody finds something better.

    Reply

  16. rbryn’s avatar

    Hi and thanks for the blue gneiss theme.

    Unfortunately, I ended up with a site crash and an error message: blue_gneiss_theme is a misconfigured plugin.

    I followed the instructions: To install, download, unpack and upload to ellg/mod. Log in, go to Administration–>Tools Administration, then enable.

    Did i miss something? Are there any other changes that are required?

    Thanks,

    Rbryn

    Reply

  17. Steve’s avatar

    @ rbryn Sorry about the frustration that must have caused. I encountered the same thing with another plugin yesterday. The only thing that brought the site back was manually delete the plugin via file transfer protocol.

    If you have not done so yet, deleting the theme should bring your site back.

    It is most likely an incompatibility with your server settings (as was the case with me). Rather puzzling though as this theme represents so little departure for the core theme. It’s not like it introduces anything new to the mix other than a few hacks to the css, 3 images, and small changes to the footer, spotlight, and pageshells.

    The only thing I can think that may cause this are the changes to:

    blue_gneiss_theme/views/default/pageshells/pageshell.php

    or to:

    mod/blue_gneiss_theme/views/default/page_elements/spotlight.php

    If you like, you could replace those with copies from the core and see if that fixes things using a process of elimination.

    Ultimately though, it is fairly likely that real culprit are server settings outside of the recommended configuration.

    I know mine is outside of recommendations as it is a suPHP server. With the exception of one plugin–everything has worked fine, although I will not be shocked if I see more glitches in the future.

    If you need more assistance, let me know.

    Reply

  18. Steve’s avatar

    rbryn fixed his problem. It was an .htaccess & directory issue. He is now running the theme. The problem was not related to the theme.

    Reply

  19. pete’s avatar

    Thanks for the theme,can you put a feature in the plugin thereby a user can customize their profile background image like myspace or hi5?

    Reply

  20. Steve’s avatar

    Thanks. As much as I’d like, I do not currently have the skill set to implement such. I know that it is being discussed in the Google Elgg Developer group.

    I too would love to see that. Meanwhile, the best I can do is make more themes.

    Reply

  21. pete’s avatar

    I’ve installed the theme,but the latest activity on the main page don’t work.
    why?

    Reply

  22. Steve’s avatar

    Hi Pete–

    I am not able to reproduce this and looking at other sites using the theme indicates that it is working for others.

    You might try substituting the core elgg/views/default/pageshells/pageshell.php for the one in the theme. It will alter the way spotlight is displayed, but otherwise, all the rest of the theme should remain intact.

    Let me know if that impacts anything.

    Reply

  23. Diane’s avatar

    @ steve I have found a solution to the spotlight problem…

    In /actions/user/spotlight.php comment out the ‘exit’

    Thanks to Andrew with help with this – view thread http://groups.google.com/group/elgg-development/browse_thread/thread/e445cdff65c297fc#

    Reply

  24. Clinton Walker III’s avatar

    Hi steve, when I install the theme I am getting an error that it is not configured. What can I do about this problem?

    Reply

  25. Steve’s avatar

    It is difficult to test because I no longer have version 1.0 kicking around. Are you sure you are using version 1.0? Check you file: version.php in your Elgg root.

    Are you running any other extensions? There may be a conflict.

    If your site is locked up over this, rename the theme. That will disable it.

    Reply

  26. Clinton Walker III’s avatar

    I uninstalled it and I am sure it is Elgg 1.0. The only things I am running is the plug ins that came with the install on go daddy. I have wordpress installed but I guess that does not make a difference. Should I disable the other plug in first.?

    Reply

  27. Steve’s avatar

    Enter via ftp to your elgg root and check version.php and it will tell your version number.

    WordPress will not have anything to do with it.

    Reply

  28. IT Buzz’s avatar

    Thanks for sharing an awesome theme i ‘ll surely apply it to my elgg powered site.

    Reply

  29. Vantel’s avatar

    I like the theme. Is there a way to have the spotlight at the bottom instead of the top?

    Reply

By submitting a comment you agree to license your comment under the following terms: Creative Commons License


This comment will be licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.