Drupal 7: Fancy up Omega
The Omega theme for Drupal 7 is pretty awesome, the theme options are sick, and allow you to easily customize the layout with very little effort. However, as always there are some things that I like to do to improve user experience, and even make development a little easier. Here are two tweaks that I like to do first and foremost on new D7 sites using the Omega Starter Theme.
Both of these changes are fairly simple, and we will not change any markup to accomplish them. You can easily adapt them to other themes as well, just verify the id of the wrapper elements.
First, let’s make our status messages pretty. I hate status messages that are glued to the top of the page template. They push the content down, and that irks me something fierce. Instead, lets have them pop up from the bottom left corner, then slide out of view after a few seconds.
Open up your child themes css file and add this line.
#message-container {background: transparent; position: fixed; bottom: 0; width: 90%; z-index: 9998;}
Great, now we have positioned our messages at the bottom of the screen, lets throw in the jQuery.
Open your child-themes js file and add the following lines inside of a dom function.
$('#message-container').hide();
$('#message-container').slideToggle('slow').delay('5000').slideToggle('slow');
Such a simple addition really improves our experience doesn’t it? Now lets continue, with those damn primary tabs.
I love being able to edit, clone, whatever from the node view,, but I loathe that it again alters my layout to accomplish it. So lets get thoe tabs out of our content zone.
Back in your css file
#content-tabs {background: transparent; position: fixed; bottom: 0; right: 0; width: auto; z-index: 9998; border: 0; margin: 0; padding: 0;}
#content-tabs ul {margin: 0; padding: 0;}
#content-tabs ul li {margin: 0; padding: 0;}
Style them to your hearts content. The overall effect here is really great, because as an administrator or individual with permissions, your tabs will not change the position of the content on the page.
Enjoy!
Posted in: Drupal
Leave a Comment (5) →
Thanks for the useful post.
Can you please explain more about how to “Open your child-themes js file and add the following lines inside of a dom function”.
I created my subtheme manually from the starterkit and there is no js file. So I added a new script file, and specified it in my .info file, but what’s the syntax for adding/modifying a dom function?
Thanks!
I’ve solved my question, and included it below in case it helps anyone else:
(function ($) {
Drupal.fix_error_messages = function (context) {
$(‘#message-container’).hide();
$(‘#message-container’).slideToggle(‘slow’).delay(’5000′).slideToggle(‘slow’);
}
$(document).ready(function(){
var debug = new Drupal.fix_error_messages();
});
})(jQuery);
Thanks for that, I should have been more precise.
After rolling out my site, users commented that they liked the idea of moving messages out of the way, but couldn’t agree on how long to delay the animation. Also, sometimes the messages require a bit longer to read, or have links in them, in which case the wanted to be able to control the animation.
I’ve modified my script to prevent messages from hiding when the user hovers over them with their mouse pointer. Hope someone finds it useful.
(function ($) {
Drupal.fix_error_messages = function (context) {
$(‘#message-container’)
.delay(’5000′)
.slideToggle(‘slow’)
.hover(
function () { $(this).stop(true); },
function () { $(this).slideToggle(‘slow’); }
);
}
$(document).ready(function(){
var debug = new Drupal.fix_error_messages();
});
})(jQuery);
I ended up doing the same thing after a while
My script looks a little different, but has the same functionality.
(function($) {
$('#messages').slideToggle('slow').delay('5000').slideToggle('slow');
$('#messages').hover(function() {
$(this).stop('true','true');
}, function() {
$(this).slideToggle('slow');
});
});
Thanks for sharing!