EE’s {weblog_short_name} and CSS
Sometimes CSS can be used in very creative ways, especially when there’s dynamic content.
In a current project, I needed to display the owner’s blog entries intersperced in the same listing as her craft projects. The craft project container contains a custom field group, so I couldn’t simply loop through both containers.
CSS was the solution.
Using EE’s {weblog_short_name} as trigger, I created a different CSS rule for each container. Next, I added the necessary page elements and EE tags to display the two continers. I then wrapped the containers in their own <div> element to bring in the appropriate CSS rules. Finally, I used the CSS rule “display:none;” to control whether or not to display the container based upon the value of {weblog_short_name}.
Below is a rough approximation of what was needed:
Markup
<div class="{weblog_short_name}">
<div class="weblog">
// elements and EE tags
</div>
<div class="projects">
// elements and EE tags
</div>
</div>
CSS
/* The names of the two containers are "main" and "blog" */
.blog .projects{
display:none;
}
.main .weblog {
display:none;
}
This works well. I would rather see EE have a built in switch or a conditional statement which checks the name of the container, but in lieu of that, this methods works just fine.
Comments
No one's commented yet. Add yours!
Add Comment