Context and Omega: User Zone

Thu, 06/16/2011 - 07:32 -- James Sinkiewicz

Screen ShotHaving made the commitment to use the Omega theme and Delta module, of course the Context module is the place to start when creating a new website. I've come to think of Context as a replacement for the Drupal Core Blocks system. Previously, when I wanted a block to show up on one page, but not one or two others, I had to create settings for the block's visibility to "Show block on specific pages ~ All pages except those listed" and then list the individual pages that I did not want the block to appear. If there was some kind of taxonomy or URL pattern that could be discerned, then I could use that, but mostly it came down to listing the individual page exceptions. The biggest problem with that was when you created a new page, you might forget to add that page to the list of exceptions.

Context handles this for you in a logical "Conditions - Reactions" format. You create a condition on which a particular context should come into effect and what reactions you wish to take place if that condition is met. For instance, you could say that if the page being requested is the "<frontpage>", then show particular blocks in particular regions of the page. Or perhaps you could create a context such that if a particular node was to be displayed, then replace one block with another in the same Region. This might be useful for showing a block containing a list of other articles or a profile of the author of the node.Toggle Display

Context as a concept was easy enough to grasp, but when used in combination with the Omega theme, became a mind exercise that one must be prepared for. Do not come to this fight tired, or worse yet, without a fast internet connection to http://www.w3schools.com for some CSS guidance. The first thing I noticed when using Context with the Omega theme was that placing a Drupal Core option, like the logo or site name into the "Branding" region did not override the Drupal placement of those objects. So, you get them twice, once in the Omega "Branding" region and again in the Drupal header area. I had to go to the Omega theme settings and un-check those Drupal objects that I was going to place on the page with the Context module; basically most of them!

That done, I was faced with he new realization that using this method to place these elements on the page made me responsible for their CSS styling! Case in point is the user login block. Now normally, one would just use Drupal's block system to place the login block on the page in some convenient region. Drupal thankfully provides some styling for this block and is satisfactory for most uses. The Omega theme has many regions to place the same login block, but also has a "User Bar First" and "User Bar Second" region in what is called the User Zone. Apparently this was a much requested feature that made it in to the Omega 3.x beta1 version. It is located at the very top of the list of zones and regions. I was not prepared for what I witnessed when I placed the login block in to the User Bar First region of the "site-wide" context I created.

User Login BlockClearly, this was not the in-line login block I was expecting when you see the grid block for the "User Zone" when Omega's debugging setting for "Enable the debugging (placeholder) blocks for the selected roles" is checked. The "User Zone" holds two "User Bar" Regions stretched across the top of the page. I wanted a friendly horizontal user login block in that space. So how do you accomplish that with Drupal 7 and the Omega Theme? With CSS of course!

I've seen CSS Masters style elements buried 30 DIV's deep with just a few magic clicks of the keyboard and some barely perceptible mouse movements. I am not one of those people. I have a clear understanding of what I want and how I want it to look when dealing with CSS styles. But unless the task is the most fundamental, its successful accomplishment is only achieved through several clearly thought out, but extremely flawed initial styling attempts.

For those interested in how I styled the horizontal login block for the "User Bar First" region, here is the CSS code:

#user-login-form div {
    margin: 0 5px 0 0;
    float: left;
}
#user-login-form label,  #user-login-form input {
    float: left;
    margin-right: 10px;
}
#user-login-form .form-required  {
    display: none;
}
#user-login-form .item-list ul li {
    float: left;
    margin: 0 15px 0.25em 0;
    margin-right: 15px;
    padding: 0;
}
#block-user-login {
    margin-top: 2px;
}
#block-user-login h2 {
    display: none;
}

I am absolutely positive there is a better way to do this and much cleaner CSS styling code, but hey, until I get more learned, this is how I role when I want to see this at the top of every page.

New Login block

Finally, you will notice that after a user logs in correctly, in the block disappears (by default). This will cause all the content on the page to jump up to fill in the empty space. So you will need a way to handle that. For now, I just set the Omega zone configuration for the "User Zone" to "Force this zone to be rendered" and used CSS to set the height of the "zone-user" as follows:

#zone-user {
    height: 27px;
}

This will force the "User Zone" to take up the same space as previous used with the login form, even when empty. You may need to play with your height setting. In the future, I will have a link to allow the user to logout, perhaps in this same zone, or as a link in the primary menu.

Share: 

Comments

Submitted by Jeno on

Nice write up James. Would like to see more of this on Omage theming.

Submitted by kevin-bcr on

Hi James. Thank you for the article.

re: the User Zone: Does it always only show up when a user is logged in. I was trying to place the Search block in the second User region, but it does not show up for anonymous users. The block settings do not restrict its visibility per user, so I'm wondering if I'm missing something basic about the visibility of the user zone. I do have my Logo in the first User region -- and it shows up for anonymous users.

Kevin

Submitted by James Sinkiewicz on

This blog is about my discoveries in dealing with the vagaries of the the Omega Theme. I do know that search visibility is a function of Permissions. If you are not seeing the search block, you should look at your permissions settings. Check to see if Anonymous Users have access to Search.

Submitted by Sevenoloap on

Hi James, very nice solution!
Can I ask you where have you insert this CSS code?
I'm trying to put the same login area in the "User Bar Second"!

Is this a separate CSS file to link with User region? Or can I insert in global.css? Or is there a login class style somewhere in the Drupal installation?

Thank you for your answer!

Submitted by James Sinkiewicz on

You can insert this code into any .css file that will be active. I put mine in the omega_subtheme/css/global.css file so it would always be active.

Submitted by ricardo on

Hi, I am new in drupal, I use the theme omega, I want to change de labels "username" and "password" for others words o delete, al the "create a new acccound" please tellme how, or what file for drupal 7 thank you for u answer.

Submitted by Alfonso on

Thanks youuuuuuuuuuuuuuuuuuuuu

Submitted by Olu on

Well done, James.
I searched for three weeks for anything to explain this and yours is the first that I've come across addressing this issue.
Thank you.

Add new comment