The legendary Paul Boag gives us a reality check. While it’s hard to believe, I think I agree with all of them.
";s:10:"bodyBlocks";a:0:{}}i:1;a:6:{s:5:"title";s:45:"42 Web Design Companies: Designs That Move Me";s:4:"slug";s:44:"42-web-design-companies-designs-that-move-me";s:2:"id";s:3:"140";s:10:"typeHandle";s:4:"blog";s:4:"body";s:223:"There are so many web design companies that have amazing websites. I felt inspired after looking through these. Now it’s just a matter of execution…
";s:10:"bodyBlocks";a:0:{}}i:2;a:6:{s:5:"title";s:37:"Setting Body Ids in Expression Engine";s:4:"slug";s:37:"setting-body-ids-in-expression-engine";s:2:"id";s:3:"141";s:10:"typeHandle";s:4:"blog";s:4:"body";s:8001:"Expression Engine has become a popular choice to power many sites. I have just begun experimenting with it, and I have been very impressed. One thing that I have been interested in determining was to figure out if I could set an id on the body like I do when building other sites. I have already written one article showing how to do this in PHP and WordPress, but this will show how to do it dynamically in Expression Engine.
Body ids can be useful for styling sections differently, displaying certain parts of a dynamic template, displaying current navigation states, and many other things.
Let’s say that I want to have my font size be 14 pixels, except on the homepage. It would be as easy as this:
body { font-size: 14px; }
body#home { font-size: 12px; }
Pretty useful. By using body ids, we now have a unique hook for each section of the website.
I do utilize body classes as well. I typically use the body id to indicate the section, then other various items for the body classes.
For my own blog, I have some pages that I want to have a left gutter on it so that I can push images, quotes, etc. into the column. I also have another class that indicates when it is a blog article page. So, I can just continue to use multiple classes on the body to help me control the width and layout of the page.
Here is what the body element looks like on a blog article on my site:
<body id="blog" class="subpage leftGutter article">
The subpage class just indicates that it is not the homepage. Not completely necessary since I already have a specific id on the homepage, but it can sometimes become useful.
The leftGutter class is used to push the content area to the right and make it narrower. Then, I can pull elements into the left-hand gutter as well.
The article class is useful because some of the markup for the blog entry information is the same as the homepage and archive pages. Using this class, I can be more specific with my styles to change the way that these elements are displayed on the blog article page.
I always try and add classes and id attributes as high up in the tree as possible. This let’s me utilize descendant selectors in the CSS without having to add additional classes and ids lower down.
I want to have complete control over the body id, so I want to be able to have it set dynamically and also be able to set it statically.
So my thought behind this is that first, I want to check to see if the body id was set statically. When I say statically, I mean passing the variable in as an attribute on my embed statement. Next, I will then set the body id dynamically.
In order to make changes to the overall website structure simpler, I have a header template the sits in the includes template group. So in all of the other template groups, I embed the header on the page:
{embed="includes/header"}
Then, if for some reason I want to specifically pass in a body id, I can just change it to this:
{embed="includes/header" body_id="contact-us"}So the first step in the header is to check to see if the embed:body_id variable is set:
<body
{if embed:body_id}
id="{embed:body_id}"
{/if}
>
Note: Line wrapping added for readability.
If we are not statically setting the body id, we want to then do it dynamically. My thinking is that I will take advantage of Expression Engine’s URL segments to determine which section we are in.
Here is an example of URL segments using the following URL:
http://ee.trevor-davis.com/index.php/about/me/education/
Then, we can reference each segment like so:
So basically what we want to do is assign the body id the value of {segment_1} if it is not empty. So continuing on our example:
<body
{if embed:body_id}
id="{embed:body_id}"
{if:elseif segment_1}
id="{segment_1}"
{/if}
>
Note: Line wrapping added for readability.
But wait, what about the homepage? The homepage will have nothing for the value of {segment_1}, so we can just put in an else statement:
<body
{if embed:body_id}
id="{embed:body_id}"
{if:elseif segment_1}
id="{segment_1}"
{if:else}
id="home"
{/if}
>
Note: Line wrapping added for readability.
Here is the line of code without any line wrapping:
<body{if embed:body_id} id="{embed:body_id}"{if:elseif segment_1} id="{segment_1}"{if:else} id="home"{/if}>
I created a demo Expression Engine site to test this functionality.
Since we have body ids for each section and an id on each list item in the navigation, I have created the current state for the navigation with a few simple line of CSS:
body#home ul#primaryNav li#homeNav a,
body#about ul#primaryNav li#aboutNav a,
body#services ul#primaryNav li#servicesNav a,
body#contact-us ul#primaryNav li#contactNav a {
background: #B3602D;
border-top-color: #B3602D;
color: #fff;
}
Note: Line wrapping added for readability.
I also want to show the sidebar on all of the subpages, so I just need 1 more conditional:
{if embed:body_id || segment_1}
<div id="sidebar">
</div>
{/if}
This is checking to see if {embed:body_id} or {segment_1} are not empty, and displaying the sidebar if one or both are set.
These are just a few examples of using a body id in Expression Engine, but the possibilities are endless.
Another thing that I was trying to figure out was how to create a variable that I could reuse in multiple embed files. So what I want to do is in my conditional statement, determine that the body id should be and assign it to a variable. Then, I want to be able to access that variable in the footer without have to use the same conditional statement.
Is this possible? I was messing around with the {assign_variable} tag, but that didn’t seem to do the job because it can only be used in the same template. Anyone know how to do this? I’m relatively new to Expression Engine, so I am still learning.
";s:10:"bodyBlocks";a:0:{}}i:3;a:6:{s:5:"title";s:29:"I’m a Weekly NETTUTS Writer";s:4:"slug";s:26:"im-a-weekly-nettuts-writer";s:2:"id";s:3:"142";s:10:"typeHandle";s:4:"blog";s:4:"body";s:999:"As I noted in my last post, I submitted a tutorial to NETTUTS to be considered as a weekly writer. I am very happy to announce that they chose me!
In my second article, Creating a “Filterable” Portfolio with jQuery, I take a look at creating a portfolio that can be filtered by category.
This tutorial was kind of inspired by the effect that I created on my company’s portfolio.
Yes, I am not going to be able to write articles as frequently on my blog, but I am still going to be posting some articles. I will also post a note each week discussing my weekly NETTUTS article.
I hope you all enjoy the articles.
";s:10:"bodyBlocks";a:0:{}}i:4;a:6:{s:5:"title";s:37:"Twitter Chatter During the Super Bowl";s:4:"slug";s:37:"twitter-chatter-during-the-super-bowl";s:2:"id";s:3:"143";s:10:"typeHandle";s:4:"blog";s:4:"body";s:268:"The New York Times created an interactive information graph of tweets during the super bowl. I love how at halftime, there was an explosion of Springsteen tweets.
";s:10:"bodyBlocks";a:0:{}}i:5;a:6:{s:5:"title";s:49:"Creating a “Filterable” Portfolio with jQuery";s:4:"slug";s:43:"creating-a-filterable-portfolio-with-jquery";s:2:"id";s:3:"789";s:10:"typeHandle";s:15:"externalArticle";s:4:"body";s:366:"If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make "filtering by category" a little more interesting with just a little bit of jQuery.
";s:7:"website";s:94:"http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/";}i:6;a:6:{s:5:"title";s:47:"WebAIM screenreader survey…the results are in";s:4:"slug";s:44:"webaim-screenreader-surveythe-results-are-in";s:2:"id";s:3:"144";s:10:"typeHandle";s:4:"blog";s:4:"body";s:291:"The WebAIM screenreader survey results are in. Not surprisingly: 76% of users always or often navigating by headings; 72% of screen reader users reported that Flash is very or somewhat difficult.
";s:10:"bodyBlocks";a:0:{}}i:7;a:6:{s:5:"title";s:33:"How we reduced chargebacks by 30%";s:4:"slug";s:32:"how-we-reduced-chargebacks-by-30";s:2:"id";s:3:"145";s:10:"typeHandle";s:4:"blog";s:4:"body";s:287:"Jason Fried discusses how they reduced chargebacks by 30%. My favorite part of this is how 37Signals determines the problem and quickly finds the simple solution to it.
";s:10:"bodyBlocks";a:0:{}}i:8;a:6:{s:5:"title";s:19:"Sprite Optimization";s:4:"slug";s:19:"sprite-optimization";s:2:"id";s:3:"146";s:10:"typeHandle";s:4:"blog";s:4:"body";s:261:"Dave Shea is starting to notice the use of huge CSS Sprites. I think I am in his state of mind: optimize when possible, but I’m not too interested in making one of those huge sprites.
";s:10:"bodyBlocks";a:0:{}}i:9;a:6:{s:5:"title";s:25:"My First WordPress Plugin";s:4:"slug";s:25:"my-first-wordpress-plugin";s:2:"id";s:3:"147";s:10:"typeHandle";s:4:"blog";s:4:"body";s:285:"In a recent project at work, I had to integrate WordPress and bbPress. It proved to be a little more difficult than I anticipated, and I had to write my first WordPress plugin: Add bbPress Default Role.
";s:10:"bodyBlocks";a:0:{}}}s:5:"total";i:270;}}i:1;O:25:"yii\caching\TagDependency":3:{s:4:"tags";a:4:{i:0;s:7:"element";i:1;s:29:"element::craft\elements\Entry";i:2;s:40:"element::craft\elements\Entry::section:4";i:3;s:7:"graphql";}s:4:"data";a:4:{s:40:"CraftCMSce35088bdfe0816226cd17fd051a4803";s:21:"0.70573500 1736501960";s:40:"CraftCMS2743a789e8993267a348eee1ee7e4450";s:21:"0.67537500 1713205687";s:40:"CraftCMS2ac34726f299f7e18e449d8e536c67f8";s:21:"0.84529700 1741778847";s:40:"CraftCMS3817d4a648fcfac939af46605323feb0";s:21:"0.36746500 1735923287";}s:8:"reusable";b:0;}}