narrowing the boarder

• 

  2rods · Member · Jan 1, 2015 at 9:34 pm

  • Copy link
  • Add topic to favorites

  Hi, how can I narrow the page boarder to approximately 1/4 inch and widen the text body on all pages.
  thank you

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 1, 2015 at 11:42 pm

  • Copy link

  Hi there, with Adventure Journal, widening the theme is a considerable project. This theme’s visual elements are mostly images, so you would need to use something like Photoshop to either edit those images, or create new images at the width you wanted your site to be, including the background image of the content area (with the wavy vertical sides.

  Adventure Journal is a fixed-width theme, so how much background would show to the left and right of the main content area depends on the width of the browser window on the viewer’s computer. It cannot easily be made into a responsive width theme that adjusts for all browser window and/or screen sizes.

  If you don’t want to switch themes, what we can do is to get rid of at least some of the images and instead assign a color to those divs. If we do that, they will have straight sides instead of the wavy sides on the main content area. If that is ok with you, let me know and I can work out the CSS for you to give a try.

• 

  designsimply · Member · Jan 18, 2015 at 6:05 pm

  • Copy link

  There is a workaround to adjusting widths for the Adventure Journal theme, but it is pretty tricky as thesacredpath mentioned. To do it without having to recreate a bunch of images, you can remove the main content container background image. Here is a past reply that talks about the idea in a little more detail:
  https://en.forums.wordpress.com/topic/too-much-space?replies=7#post-897184

  Building on that example, here is one that changes the main container element from 980px to 1200px as an example:

  #wrapper-content,
  #wrapper-top {
  	background: #fcf5f5;
  
  }
  
  #page-curl {
  	display: none;
  }
  
  #banner {
  	width: 95%;
  }
  
  #container2 {
  	width: 1200px;
  }
  
  .col-2-left #main-content {
  	width: 70%;
  }
  
  .col-2-left #secondary, .col-2-left #tertiary {
  	width: 28%
  }

  Using this workaround means that you lose some of the right/left shadows and the page curl from the main content container. I tested the home page, so if you end up going in this direction, you should do a little more testing.

  Note that, if you made this adjustment, you would also need to manually upload and replace the header image with a wider one that is sized proportionately correctly before it is added to your media library. If you end up liking the direction the example above moves in, I can help you with a header image CSS example as well. Just let me know.