How can my theme allow users to take advantage of advanced html tags in posts

Question

Not sure how to phrase this question. Let me paint a simple Wordpress setup for single.php:

<div id="container">
   <?php the_content(); ?>
</div>

But what if, inside the_content(), I want the users to be able to use more advanced page layouts that break outside of the #container? For example, let's say the #container is 1140px wide but I want a blockquote on a page to be 100% width (of the browser)?

Here's a theme that does what I want to do: http://cedarwp.ecko.me/design-patterns-introduction/

Notice how the black bar is full width and would have required html tags to achieve the look.

I think I can do this with shortcodes but that doesn't sound very flexible. Please advise!

Answer 1

About the link you provided

The black bar is part of the .pagewrapper but there is no width specified for pagewrapper.

.pagewrapper {
  left: 0;
  position: relative;
  transition: left 500ms ease-in-out 0s;
}

The post content is set a max-width: 700px, it will not extend the boundary.

.wrapper {
  margin: 0 auto;
  max-width: 700px;
  width: 90%;
}

The black bar is entirely new section which has this code, no width set for it:

.postcontents.dark {
  background: none repeat scroll 0 0 #2c2e32;
  color: #e2e2e2 !important;
  padding: 90px 0;
}

There is a CSS specific solution.

If you need to use the block quote which is 100% of the width, you need to make it come out of the normal flow of the #container.

.blockquote {
  position: absolute;
  width: 100%;
  left: 0;
}

Blockquote within container

Blockquote outside the flow

A better solution will be to create a custom class called blockquote-full-width and allow the users to use it.