Home
About
Contact
Subscribe
Blogs
Drupal area
Theming
I just created a customized 404 'file-not-found' page for this blog of mine, but realized in the process that my custom Omega 7.x-4.x sub-theme doesn't have a ' Content - after ' region. This was a problem, because I wanted my new page to have some content on top, and for me to place my term lists as blocks in a ' Content - after ' region!
So here is how I solved my problem, and how you can easily add any number of custom regions to your sub-themes to make them more flexible.
I'm tagging this as an Omega-4.x related tutorial, since in the Omega 3.x branch, you create regions the old way (via declaring them in your subtheme's .info file) and can then drag and drop unassigned regions into zones via an admin interface. The 4.x branch has taken this type of functionality out of the admin interface and put it into the actual code, so this is very 4.x branch specific.
Copy the entire layout folder for the simple layout included in the parent Omega theme found in /omega/layouts/ and paste into your subtheme's layouts/ directory
Rename the layout's folder you just copied with whatever you want to name your new layout. Also rename all the remaining reference to the layout's name in the following places (in my examples below I've named my new layout ' bd_custom '): the layout's file names simple.layout.inc --> becomes 'bd_custom.layout.inc' simple-layout.tpl.php --> becomes 'bd_custom-layout.tpl.php' I want to make a special note, based on some of the confusion in the comments after the publishing of this post: the name of this tpl.php file is coming from the template name you've declared in your .layout.inc file. Make sure they match! Otherwise, it won't find and load the correct template file! Text in bd_custom.layout.inc file Edit the name, description, and template fields to your liking. My example below (**note the change to the final line at the bottom name = BD Custom Layout description = Customized 3 column layout with before-content and after-content regions. preview = preview.png (<-- didn't change this) template = bd_custom-layout ... ; Stylesheets stylesheets[all][] = css/layouts/bd_custom/bd_custom.layout.css
the layout's file names simple.layout.inc --> becomes 'bd_custom.layout.inc' simple-layout.tpl.php --> becomes 'bd_custom-layout.tpl.php' I want to make a special note, based on some of the confusion in the comments after the publishing of this post: the name of this tpl.php file is coming from the template name you've declared in your .layout.inc file. Make sure they match! Otherwise, it won't find and load the correct template file!
I want to make a special note, based on some of the confusion in the comments after the publishing of this post: the name of this tpl.php file is coming from the template name you've declared in your .layout.inc file. Make sure they match! Otherwise, it won't find and load the correct template file!
Text in bd_custom.layout.inc file Edit the name, description, and template fields to your liking. My example below (**note the change to the final line at the bottom name = BD Custom Layout description = Customized 3 column layout with before-content and after-content regions. preview = preview.png (<-- didn't change this) template = bd_custom-layout ... ; Stylesheets stylesheets[all][] = css/layouts/bd_custom/bd_custom.layout.css
Copy the omega/sass/layouts/simple folder and paste it into your custom theme directory's sass/layouts/ folder Rename file names layouts/simple --> becomes layouts/bd_custom layouts/simple/simple.layout.scss --> becomes layouts/bd_custom/bd_custom.layout.scss Note : Make sure your sass layout file above is successfully compiled into a corresponding .css file. If it isn't, another thing you can do is copy and paste the corresponding css/layouts/simple folder and rename those files too....
Rename file names layouts/simple --> becomes layouts/bd_custom layouts/simple/simple.layout.scss --> becomes layouts/bd_custom/bd_custom.layout.scss Note : Make sure your sass layout file above is successfully compiled into a corresponding .css file. If it isn't, another thing you can do is copy and paste the corresponding css/layouts/simple folder and rename those files too....
Note : Make sure your sass layout file above is successfully compiled into a corresponding .css file. If it isn't, another thing you can do is copy and paste the corresponding css/layouts/simple folder and rename those files too....
Declare your new regions in your custom layout's .layout.inc file and in your custom theme's .info file .
In my case, I added the below to <subtheme>/layouts/bd_custom/bd_custom.layout.inc and to <subtheme>/<subtheme>.info , and now both the theme and the layout will be aware of the new region!:
Now that the new region is available, we need to edit our layouts template file to output it in the correct place! Edit your regions tpl.php file (in my case <subtheme>/layouts/bd_custom/bd_custom-layout.tpl.php ) for this purpose. In my case, I just found where the template spits out the "content" region's contents and output the new "content_after" region directly after it. Your case may be slightly different depending on where you envision your region, so modify your template file accordingly.
Here, you can see that I added my new content right after the rendering of the existing "content" region.
Note that you may want to do something more elaborate than what I'm describing above. For example, you may want to enclose your new region in specific divs to allow for greater styling opportunities later, or something like that
My example above is very minimal, but feel free to add whatever html you need in the template file to make your new region work!
For my use-case, I'm not making any edits to my layout's sass (and thus css), but feel free to edit the new sass file you placed under your sass/layouts directory to correspond with this new layout.
Clear your cache
Go to your subtheme's admin page to make sure your new layout is available: admin/appearance/settings/<subtheme> Select your new layout and Save.
Now if you go to your blocks admin screen, and hit the ' Demonstrate block regions ' link at the top, you should see a demo of where your template file is placing the content in those regions. Mine are just where I want them:
Put some blocks in the new region - you should see the new region in both your block admin page, and as you create or edit your site's contexts!
Add new comment
I also have to have the region declared in my sub-theme's .info file to get this to work (ie add the line, regions[content_after] = Content - After, to .info), otherwise Content - After is not picked up when the layout is enabled.
reply
Mark, you're absolutely right! Thank you for pointing that out. I had missed it in my steps, and probably caused more than one person to scratch their head in confusion. :-) I've updated my tutorial to reflect the edits needed in the .info file!
I followed this guide and the new regions I added appear in /admin/structure/block so I can add blocks there. I noticed there is a direct correlation to <theme>/theme.info file where regions are defined and the admin/structure/block section.
They don't appear in my rendered page source code though.
I added the correctly named <div class="l-footer-column1"><?php print render($page['footercolumn1']); ?></div> to my <layouts>/file-layout.tpl.php file. and added the region definitions (copy from theme.info file) to <layouts>file.layout.inc.
Any help appreciated.
I did all the steps and my new region appears in the administration screen, but never renders on the page. I asure you I followed all the steps, doublechecked the .info files, but still it's not rendering
Hmm, mine is working, and I can't figure out whether I missed a step or whether there's something different in your setup. Does it work when you click the " Demonstrate block regions " link on the Blocks admin page? That should use the rendering mechanism...
The thing I was missing was the name in the Name_of_my_layout.layout.inc file(template = Name_of_my_layout). It was not taking the right tpl.php !!!
Good investigative work! And thanks for reporting back - may help someone else too.
Thanks Anelia. The name of the template did the trick.
how can i add a box around the region .? iam not able to get a box . the block is rendered properly,.
Do you mean that you want to do something visually with CSS? I'm not sure what you're asking exactly :(
Your block may look different based on the *Theme* you're using.
Is it really necessary create new layout to add a new region ??
More information about text formats
No HTML tags allowed.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
RT @thereaIbanksy : Experience is not what happens to you; it is what you do with what happens to you. — 17 hours 37 min ago
RT @ValaAfshar : Vedic math multiplication method https://t.co/fiBZgUxW50 — 17 hours 39 min ago
A favorite place is one that makes the freckles come out. ☀️☀️☀️ https://t.co/vkd5pMfOjx — 20 hours 28 min ago
Interesting: Bloomberg’s Next Anti-Washington Move: $200 Million Program for Mayors https://t.co/G2Ei9E3F8W — 3 days 20 hours ago
Subscribe to newsletter Privacy Policy
Privacy Policy
Let's connect: Twitter | LinkedIn
© 2017 Boriana Ditcheva