Rocked vs. West Pro (Live Composer, White header bar, stretched content)


I am currently on a developer version and I am really happy with athemes! Thank you for you great work.

I am using several different themes. My personal webpage uses West Pro, and I really enjoyed the “Live Composer” Editor, which was recommended by this theme. For my next page I would love to use that Editor too. However, my next pages needs a header like Rocked Pro (or also Perth pro) - Meaning the logo and menu not inline in the header image like with West Pro, but the logo and menu in a white bar.
Additionally I like to to have stretched areas (over the whole screen) of content on the start page. This works very well with Live Composer on West Pro - But not with Live Composer with Rocked Pro.

So there are 2 options:

  • Use West Pro - But how do a get a header like Rocked Pro - to have the logo and menu in a with bar, and not inline in the header image?
  • Use Rocked Pro, but find out how to be able to have stretched content with Live Composer?

Thank you very much,

Hello there,

> Use Rocked Pro, but find out how to be able to have stretched content with Live Composer?

  1. Create a Rocket Pro child theme
  2. Create a new page template file with the following content:
Template Name: Composer

get_header(); ?>

	<div id="primary" class="fullwidth">
		<main id="main" class="site-main" role="main">

			<?php while ( have_posts() ) : the_post(); ?>
				<?php the_content(); ?>
			<?php endwhile; ?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_footer(); ?>

Save it in the rockedpro-child > page-templates folder and name it as page_composer.php.

  1. In the child theme’s style.css add the following:
  overflow-x: hidden;

.page-template-page_composer .main-content{
  padding: 0;
  1. To have a stretched page, add a new page, then in the “Page Attributes” box select “Composer” template


Thank you!
Unfortunatelly this does not work.
The content is still not stretched over 100% of the screen. All content is in the .container of 1170px (from bootstrap.min.css)
If I change this to 100% instead of 1170px, it works - But then on other sides the content is also strechted over 100% and not centered anymore.

Used this and works:
@media (min-width: 1200px) {
.page-template-page_composer .site .main-content .container{
width: 100%;

Thanks a lot for pointing me in the right direction!