Is it possible to add a new Section?

What is the advantages to have a new Section?

I am asking this because I would like to create a new section to place absolute positioned zone and regions.

I tried and added my absolute section template, section--absolute.tpl.php in my theme and didn't work.

Thanks allot in advance.
Any suggestion for documentation on sections it would be really appreciated.

Manolis

Members fund testing for the Drupal project. Drupal Association Learn more

Comments

habyb’s picture

Assigned: Unassigned » habyb

Hi manos_ws,

I have tried a lot of things, but only I found this solution below.

Step 1
------
\sites\all\themes\omega\alpha\includes\base.inc line 158

Add 1 Array item: "'slider' => t('Slider'),".

function sections() {
    if (!isset($this->sections)) {
      $this->sections = array(
        'header' => t('Header'),
        'slider' => t('Slider'),
        'content' => t('Content'),
        'footer' => t('Footer'),
      );
    }
    
    return $this->sections;
  }

Step 2
------
Setting your Omega Theme.

/admin/appearance/settings/[your custom omega theme]

Go to Menu > Zone and region configuration and configure your section added, this case "slider" section.

Step 3
------
Render your added section in page.tpl.php

Call print render($page["slider"]);

Optionally you can to add a new section tpl.php file in templates directory.

Ie: section--slider.tpl.php

I hope I've helped.

sicklittlefox’s picture

Is there a cleaner way of doing this? ie. overriding in the subtheme rather than hacking omega?

abdelatifs’s picture

Cellar Door’s picture

Why not just create absolute positioned zones/regions? I use absolute positioning in Omega and find that on the region/block level it works just fine for me. If you want to add a section I think hacking the core is the only way at the current time, but would recommend just creating zones/regions and using those instead.

paolomainardi’s picture

Status: Active » Needs review
FileSize
457 bytes

I've just created a very simple patch to have an "alpha_sections_alter" as "zones" and "regions" have.

Now, why the sections has been implemented as non-alterable items ?

Thanks!

paolomainardi’s picture

Up

paolomainardi’s picture

Anyone is reviewing this patch ?

Cellar Door’s picture

Assigned: habyb » Cellar Door

I'm looking into it paolomarnardi - I'll let you know what I find

Cellar Door’s picture

I'm looking into it now. Thanks for submitting the patch!

Cellar Door’s picture

Assigned: Cellar Door » himerus

I'm not sure I see the use for new "sections" just to keep things simple but this may open up some possibility for more advanced theming.

paolomainardi’s picture

Thanks @Cellar Door for reviewing the patch :)

himerus’s picture

Assigned: himerus » Unassigned
Status: Needs review » Closed (won't fix)

The fact is... and believe me a LOT of discussion went into how to implement sections between fubhy and I during development of 3.x...

As this issue relates to how to absolutely position a zone/region/block/etc. it is in fact completely outside the real issue here. Any item on the page can be absolutely positioned (or fixed position) via the proper CSS. I use absolute/fixed positioning many times to accomplish something custom via functionality or design in order to place an item outside the grid, etc.

The concept of sections was determined (originally) to need absolutely ZERO additional flexibility based on all our potential use cases. The fact that the 3 current sections (in an HTML5 subtheme) provide the <header>, <section> and <footer> semantic elements, the only item that could possibly make sense is adding in additional top level <section> elements.

However, through a structured implementation of regions and zones, there is NOTHING I have encountered yet in ANY design, simple or complex that can't be accomplished with the current page sections.

As Cellar Door mentions in #10, if there is in fact a logical reason that flexible sections SHOULD be implemented for some sort of advanced theming, then I'm all ears for the true use case and will reconsider this for a future release. But until then, the core of this issue was for placing fixed sections of content, which can be done with CSS without any new sections. Marking as "wont fix" until someone has a use case that makes it a viable addition to 3.x or 4.x.

Katrina B’s picture

Here's a use case: What if you need to be able to create a layout with a section that runs not horizontally (like the header and footer) but vertically (a sidebar that runs from the top to the bottom of the page, displaying next to the header, content, and footer sections)?

I can't find a way to accomplish this in Omega or an Omega subtheme.

(I'm using 7.x-3.0, by the way -- I forgot to change the version on this issue when I first posted this comment.)

Cellar Door’s picture

Katrina -

I was just playing around with this use-case on a test site of mine and think I came up with a solution for you. Create a new region and place it in your header/footer region. This region will then allow you to put blocks in it as if it were your sidebar. Then in your css use position absolute and it will remove it from the grid allowing you to position: absolute; and height: 100%. This will achieve the same effect for your sidebar section. On your regions within the grid still you'll want to add a prefix in order to space the content correctly. So for instance if you have a 4 column sidebar region just give each region on your page a 4 column prefix. This should fix that use case and still keep you from having to create a new section.

Katrina B’s picture

Thanks! I'll try that.

andypanix’s picture

In an ideal world I think that the three standard regions may be enough for building every layout. But when you work with external designer that gives you HTML code, this may not be true.
I'm working with paolomainardi to a project for which an external agency (which doesn't know Drupal very well) is giving us designs and markups (HTML JS and CSS).

We tried to tell them how Drupal works, but they don't care too much and they give us an HTML markup that wasn't so Drupal friendly.

We had two options: writing a theme from scratch, or to use Omega.

We choosen the Omega theme since we used it in other projects with full satisfaction. But when we saw the HTML, we understood that we needed an extra custom section, penalty to rewrite a lot of code or to use other bad solutions (as injecting a region directly into the template, regardless of its position in the theme settings UI).

So, even if this may be an edge case, I think that the "custom section feature" may be a nice plus for Omega theme.

Cellar Door’s picture

Not seeing the design I'm not sure what specifically would be required in order to make it work as the system lies now. What I do like about the three section models is that in running with the semantic markup it also allows you to keep your content where it belongs for screenreaders, search engine crawlers etc.. I'm still not convinced that extra sections are needed, most often it's a new zone/region and some CSS that can do the trick. Non-drupal html markup is going to be difficult to adapt into any theme really, but I'm sure there's a way to make it happen w/o a new section.

Katrina B’s picture

What I ended up doing was using two sections: one for the sidebar (so it would extend along the entire left side of the page) and one for everything else (to stack zones and regions on top of each other, next to the sidebar).

Not nearly as elegant as I'd like (I'd still welcome the ability to have sections/zones as vertical elements, not just horizontal), but it gets the job done.

michaek’s picture

I think it's shortsighted to say that 3 top level sections represent all possible use cases. I'm glad you've covered your own use cases well, but I'd think it wouldn't take too much imagining to see that a 4th top level section is not (always) frivolous.

One (simplified) use case:

header: ad block and main menu
content: content
footer: footer

The parent of these three sections has a background image, meant to display behind the main menu and the content. The ad block is only there on some pages, and its height may be variable. That means the background image is sometimes partially obscured by the ad block.

The correct approach to handling the markup would be to move the ad block outside the parent element of the three default sections. Any other approach is likely to have a bad smell, and probably involve some trickery.

This isn't really about positioning, though I'm phrasing it in terms of the display, but about semantics. I'd suggest that not every site is correctly modeled by three top level sections.

michaek’s picture

In the meantime, I suppose I'll just be patching Alpha, following from #1.

michaek’s picture

Scratch that: I'm just going to render the appropriate part of the $page['header'] content array. I'm not sure if that's more or less appropriate than having another section, but it does have the advantage of being available now and not being an explicit hack.

Technikal’s picture

gee @himerus, could we give us a quick guide how wto setup slideshow that goes outside of d 960, flush left and right, thank you in advance

adaddinsane’s picture

FileSize
140.39 KB

Well I had a use case - the design provided by the agency I'm working for meant I had to have two sections on the front page with colour that bled to the edges. It was okay in the header because it was *all* the items in the header that needed a background. But I needed another fill width strip near the bottom but above the footer. (See image.)

There may be some complex CSS workaround that might have done the trick, but it was vastly simpler and more elegant to have a new section with its wrapper going to the edge. Much as I hate to do it, I added one.

The real world often fails to intersect with the ideal world. Especially when a website is created by designers who not only don't know but don't care what's going to be easiest in Drupal.

I've attached the sample just so you can see what I mean - where it's got the Deevl block at the bottom is where the main footer will be going.

Cellar Door’s picture

You can get full size wrappers on your zones so adding a new zone would allow you to have a full width section of the site. This is why the need for new sections is redundant as your layout should still keep to a header/content/footer sections but within you can define zones that have full wrappers to do what you'll need there. Looking at the image you've uploaded a new zone would work just fine for it.

adaddinsane’s picture

I should have noticed, somehow it passed me by - yep that's fine, got rid of the hacks which makes me feel much better anyway.

mustardman’s picture

Ok here is a use case that I think is not that uncommon. It happens to be a problem I have just ran into which is what brought me to this discussion.

I am creating a standard width 960grid site. However, it has a horizontal background image going across the entire width of the header. It's exactly like this drupal site has at the top of this page. You cannot put that in any header zone or region because they are bound by the 960 width. You could probaby use a special zone then make it go the entire width with by overriding Omega css but that doesn't seem like a very good solution to me. The best solution imho is to put the background image into the header section.

Not a problem if your header zones/regions will be within that header section as this Drupal site is (or would be if it were using Omega). However, my design adds another header zone below the background image/menu and therefore below the header section which the background image is bound to. I designed it that way on the front page and everything is fine so far. But now that I am adding additional pages their margins are off because I was forced to do all my vertical margining with zones instead of sections.

I hope you can visualize that. Just imagine this drupal site but with an additional header zone below the tabs/menu at the top of this page. It's a fairly common design imho. If Omega had the ability to add sections it would definitely solve my problem. As of now instead of hacking up Omega I am forced to add additional zones for different content so I can customize vertical margins for each custom zone to get around this problem. All just because I want a horizontal background image going the entire width of the top of my website like this Drupal site has.

xamount’s picture

I have a use case similar to #26. I have an openx ad that stretches the full width and length of the entire site (not just the header or content or footer section). Think of it like a wallpaper ad.

I can probably do this with css using a background image, except that this is an openx ad which comes from a drupal block (provided by the openx module) which I have to place in a region and then in a zone....which would then go into a section.

I set position to absolute and height to 100% for the region but this only stretches as far down as the height of the header section.

Setting position to fixed seems to kinda work but i also had to explicitly set the width to auto on both the zone and region. My final css code looks like this:

#zone-wallpaper,
#region-openxouterad {
    width: auto !important;    
}
#region-openxouterad {
    position: fixed;
    height: 100%;    
}

I think this might be a somewhat common case...at least for people using openx and the Omega theme.

kenp’s picture

why are there all these directing to this empty page?

mzwyssig’s picture

Same issue than mustardman (#26). But instead of a image, a have full screen and dynamic map (mapbox). This works fine with a bit of CSS hacking, by placing the new "background" zone in the header section and using "position:absolute" with a low z-index on the header section, but as soon as I want to use a superfish menu, the menu, when it opens, goes under the content section.

Having configurable sections would be awesome.

Thanks

fchandler’s picture

FileSize
54.82 KB

Here is a use case http://brhepa.com/. The shadow beyond the blue border is set with css3pie box shadow. That was a D6 Fusion sub-theme. In trying to upgrade the site to D7, I was trying to do the same thing in Omega but get the areas outlined in black in the example.png. Hoping to add a section or zone in the manner as adding the div in Fusion sub-theme, I came across this page.

Don Robertson’s picture

#3 Page not found.

Cellar Door’s picture

Alright all -

What you're wanting to do is create a div that encompasses an entire area right? Or in some cases encompass the entire page?

To do this you can customize the .tpl files found in omega core by copying them to your templates folder and adding in divs as necessary. Rather than creating new Sections the use cases you mention with a full page background would be best solved by this.

@Mustardman - If you're wanting a full width full height header wrapper you need to select that in the zone configuration on your settings. Either the .section-header selector or the .region-header-wrapper will get you exactly what's above.

To date I have yet to run across a site that needed a new section. Many times a quick edit to a .tpl or configuring the zones with wrappers will do the trick

Marrbacca’s picture

Hello,
I've got a usecase for you, where adding new section is required in order to work with site. Here: http://api.jquerymobile.com/panel/ the panel widget must be sebling to content, header and footer elements, placed before header or after footer. It is impossible to do without adding new sections, because all regions can be placed only in designated sections which of course doesn't match required placing.
So - what I can do with this?

Cellar Door’s picture

Marrbacca - To do this I would still use the html.tpl.php and add the div after the page element. This tpl still has access to all the region data etc. so you can customize it to display the regions in your new div. This is a good custom option but to modify the entire project to add sections still doesn't seem necessary as these are the exception and not the norm.

In 4.x this will be irrelevant though as you have full control again of all sections/zones/regions int the .tpl files to customize your layouts in any way necessary.

ibit’s picture

FileSize
59.13 KB

If you need a wide area, it is enough to set the checkbox in the settings and add a class for the zone. There is no need to go into the kernel!

drewbolles’s picture

I actually have an interesting use case that I would like to add another section for.

In this particular design, the mobile header and the tablet/desktop header are structured radically different. In the mobile, we're utilizing a two 'zones' let's say, the top one holds the hamburger menu (with social media residing below the menu that drops down), a user account menu and a search icon, all which expand sections below the icon with the proper items. Think facebook.com on your phone's mobile browser. The zone below will be used for the logo.

On the tablet/desktop version, there are social media links, user account dropdown and search bar in the 'top' zone. The 'bottom' zone of the header houses the logo and menu in a 3/9 grid div respectively. Now, based on the design and desired functionality b/w the mobile & tablet header, it is much, much cleaner to separate these headers and display: none the appropriate one. I generally avoid 'display: none' on elements in responsive design like the plague, but in this particular case, it just makes more sense to have two different headers.

Maybe this would call for 'sub-sections' rather than whole sections.

<header id="section-header">
<div id="mobile-header"><!--zones for mobile --></div>
<div id="header"><!-- zones for desktop/tablet --></div>
</div>

I understand wanting to keep the '3 sections' layout sacred, but it would be nice in my situation to be able to add another. Or be able to group zones within a section. I may hack core, but I also avoid this like the plague. I usually try to do positioning tricks to accomplish my mobile and desktop menu effects, but in this case, with complicated z-index requirements, and multiple 'menus' it has become rather messy.

impleri’s picture

No need to hack Alpha/Omega: just look at alpha_get_theme().
All you need to do is add a {template}_theme_container class which extends alpha_theme_container and change the $sections property (or sections() method). If you want to follow Alpha's file structure, it would go in path/to/{template}/includes/base.inc and be included in your template.php file (e.g. require_once dirname(__FILE__) . '/includes/base.inc';)

All you need is something like:

class TEMPLATE_theme_container  extends alpha_theme_container {
  public $sections  = array(
    'new_section' => 'New Section', 
    'header' => 'Header',
    'content' => 'Content',
    'footer' => 'Footer',
  );
}