center content Zuki

• 

  innovate · Member · Mar 19, 2015 at 7:06 pm

  • Copy link
  • Add topic to favorites

  Hello, I have the design upgrade and need CSS code for centering all content on my blog, run on the Zuki theme. I already have the CSS for centering the header image, but I want to center everything on the static Front Page, and also all blog posts in Blog view, and the individual post pages. Thanks!

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

• 

  thesacredpath · Member · Mar 19, 2015 at 8:27 pm

  • Copy link

  Hi there, I think this catches it all on the main page and on the blog page.

  #front-content-one.widget-area, #front-content-two.widget-area, .blog #primary {
      float: none;
      margin-left: auto;
      margin-right: auto;
  }

• 

  innovate · Member · Mar 20, 2015 at 6:47 pm

  • Copy link

  That code worked for everything on the static front page, but didn’t work to center the individual posts–those are still left aligned. However, I think what I actually want is to get rid of the padding on the right sidebar area, on all pages… that is, I want the content to fill the width of the entire given content area. Exactly like this website (which is also on Zuki theme): http://www.themuckyroot.com

  Thanks for the help! :)

• 

  thesacredpath · Member · Mar 20, 2015 at 8:15 pm

  • Copy link

  Are you wanting the text itself center aligned within the post content? If so, add the following.

  .blog #primary {
      text-align: center;
  }
  .blog .entry-meta, .blog .entry-content {
      max-width: 100%;
  }

• 

  innovate · Member · Mar 21, 2015 at 3:33 am

  • Copy link

  No, that’s not it. Sorry– I don’t know CSS at all, so I don’t know proper terms… (I am trying to learn though!) What I want is for the front static page content to be able to fill the entire front page, without being pushed to the left. There is a right sidebar widget area from top to bottom, but I have no widgets there– it’s just empty space. I want all the content to fill the page from left to right. The other blog that I linked to in my previous comment has done exactly this, I want to do the same thing.

• 

  thesacredpath · Member · Mar 23, 2015 at 4:48 pm

  • Copy link

  Ah, sorry for not understanding before. The area for the content is full width, but your image is being restrained to the original width. We can easily fix that. Go to Appearance > Customize > CSS, scroll down to the Media Width field and enter 1200 and save your changes.

  See what you think with that change.

• 

  innovate · Member · Mar 24, 2015 at 9:42 pm

  • Copy link

  Thank you, that did work to expand my “home” page image to full width, but it didn’t affect my “static front page” images. Zuki comes with custom widgets for its static front page, and I have mine set to show an image + text excerpt of each individual post in a two-column layout. What I want is for these “widget posts” to span the width of the page, and extend to a 3-column view. Essentially, to fill the same width space as the “featured post” image, which I believe is 1200px.

• 

  thesacredpath · Member · Mar 25, 2015 at 2:06 pm

  • Copy link

  The code I have given was only for the blog page. If you want everything to expand to full width, give the following a try.

  .blog #primary, .attachment #primary, .single-post #primary, .page #primary, .search-no-results #primary, .archive #primary, .search-results #primary, #front-content-one, #front-content-two {
      width: 100%;
  }

• 

  innovate · Member · Mar 25, 2015 at 8:03 pm

  • Copy link

  You are AMAZING!!! It worked! Thanks for getting me there. Yay!! Just a note, there are still only 2 columns, and not 3, but perhaps that is a totally different CSS thing or is hard-coded into the theme? Anyway I like it with 2 columns.
  Best -Tara :)

• 

  thesacredpath · Member · Mar 26, 2015 at 3:32 pm

  • Copy link

  Hooray, and you are welcome!