Full width page

Shapely
1

Hi!

How can I create a full width page other than the Homepage? I’ve managed to remove the sidebars and tried increasing the margins using CSS but there’s still plenty of space on the sides as you can see on the screenshots.

Thanks again for the theme and your help, still loving Shapely!

2

Hi @1010r,

I hope you are well today and thank you for your question.

Do you mean the space marked as 1 or space marked as 2 which is shown in my attached screenshot?

Could you please share me the page URL from your site where it’s displaying so that i can help you?

Kind Regards,
Movin

3

Hi Movin,

Thanks for your quick reply! I mean being able to use the space marked as 1 on your screenshot so I can fit the green squares you can see on the my new attached screenshot.

The page’s url is new.osunaart.com/index.php/test

Thanks again, have a great day!

4

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

@media (min-width: 1200px){
 body.page-template-template-full-width #main {
    width: 1270px;
}
body.page-template-template-full-width #main .col-md-12{
  padding: 0;
}
}
5

Great, that custom code worked perfectly!

Thanks for your help Movin!

6

You are most welcome here :slight_smile:

7

How did you manage to remove the sidebar from every page other than the homepage? I’m looking to do this too as I’d like the homepage to have a sidebar, but all other pages to be full width.

Thanks,

Alice

8

Hi Alice,

Option 1: To remove the sidebar, make sure you have “Default Template” selected on the Page Attributes menu on the right side of the screen, then go to the “Select layout for this specific page” dropdown menu at the bottom of the screen and select “Full Width”.

Option 2: That works for removing the sidebar but it won’t give you a 100% full width page, so I created a fullwidth page template (which you can apply from the Page Atributes menu I mentioned before) and added Movin’s custom CSS to the Theme options. I suggest you use a child theme if you use this option.

Check out the screenshot to see the difference between Option 1 and 2.

Here’s my fullwidth page template code:

<?php
/*
Template Name: Full Width
*/
get_header(); ?>
      
         </div>
         <!--Start Page Content -->
         <div class="col-md-12">
                  <div class="col-md-12">
                     <div class="col-md-12">
                        <div class="col-md-12">
			<?php if (have_posts()) : the_post(); ?>
                <?php the_content(); ?>
				<div class="col-md-12"></div>
				<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'black-bird' ) . '</span>', 'after' => '</div>' ) ); ?>
            <?php endif; ?>

    <!--Start Comment box-->
		<?php comments_template(); ?>
            <!--End Comment box-->

          </div>
    </div>
	</div>
	 </div>
      </div>
   </div>
</div>
<?php get_footer(); ?>

Hope that helps!

9

Hi Movin

Hope your fine. Struggling here trying to get a full width page working.
So heres my page:

I’m using a shapey thema and already got rid of the side bar on this page. Still I have the problem that the pictures do not expand. I added the CSS code you sugested in the Custom CSS option but didn’t seem to work.

so i’d like to have the tree pics in one line in full page with. Any suggestion?

10

@mundobabushka To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

11

Hi,
i chose to use Shapely as base for one of my new websites because it is quite pretty, tough needs some modifications to fit my needs.
One is the max-width, which doesn’t work with the supplied css-code from above on fosternet.de.
I’m curious that people state that it works, because i’d think it is “col-md-9” rather than “col-md-12” that needs to be modified.
I already tried a lot of combinations, but with no luck.

12

@thefoster As said previously to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.