Buttons

• 

  marshallcweber · Member · Apr 3, 2014 at 10:29 pm

  • Copy link

  Is there a way to make the reader more narrow? And a little more centered?

• 

  thesacredpath · Member · Apr 10, 2014 at 2:42 pm

  • Copy link

  When you say “reader” what are you referring to?

• 

  marshallcweber · Member · Apr 10, 2014 at 3:03 pm

  • Copy link

  the space where the content is

• 

  marshallcweber · Member · Apr 10, 2014 at 3:03 pm

  • Copy link

  the space where the content is

• 

  thesacredpath · Member · Apr 10, 2014 at 3:22 pm

  • Copy link

  The posts area between the sidebars can be made narrower, but does that mean you wish to widen the sidebars or what exactly? Are you talking about on the main page, or perhaps on categories pages such as On the Field: Sports or on static pages such as YHTS TEAM?

• 

  marshallcweber · Member · Apr 12, 2014 at 7:02 pm

  • Copy link

  say make the margins look like this

  http://fivethirtyeight.com/datalab/how-to-predict-mlb-records-from-early-results/

• 

  thesacredpath · Member · Apr 12, 2014 at 10:51 pm

  • Copy link

  The site you reference does not have the left sidebar in the content area on the main page. This will remove your left sidebar and widen the content so that it looks similar to the site you reference.

  .home #featured-cats {
      display: none;
  }
  
  .home .row #recent-posts.ninecol {
      width: 100%
  }

• 

  marshallcweber · Member · Apr 12, 2014 at 11:57 pm

  • Copy link

  Thanks as always. Also, the mobile version doesn’t have any of the settings. Best way to fix?

• 

  marshallcweber · Member · Apr 13, 2014 at 12:05 am

  • Copy link

  This also may be a better example of the width I’m going for

  NBA Mailbag: This Is the End

• 

  thesacredpath · Member · Apr 13, 2014 at 1:01 am

  • Copy link

  If you want to have the wide white space to the right of the content (my first thought was there is a mistake in their CSS) then use the following instead.

  .home #featured-cats {
      display: none;
  }
  
  .home .row #recent-posts.ninecol {
      width: 80%;
      float: left;
  }

  You can adjust the width to whatever value you want.

  If you want to get rid of the text beside your top featured image, add the following at the very bottom of your custom CSS.

  #lead-story .posttitle, #lead-story .postmetadata, #lead-story p {
      display: none;
  }

  And then modify the first rule in the @media section (at the top) so that it looks like this:

  #lead-story .item img,#lead-story a.lead-image {
  	height:auto;
  	max-width: 770px !important;
  	width:770px
  }

• 

  thesacredpath · Member · Apr 13, 2014 at 1:04 am

  • Copy link

  On what is seen on a mobile, what I see on your site is very similar to what I see on the site you referenced.

  The theme you are using is a responsive design, which does not have a “mobile” version really, what happens is that the CSS and the theme is designed so that it presents the content in the best way possible no matter what the screen or browser window width is.

• 

  thesacredpath · Member · Apr 13, 2014 at 1:08 am

  • Copy link

  Ah, forgot one other thing to add. This gets rid of the grey background on the lead story when on smaller devices:

  #lead-story {
  background: transparent;
  min-height: 190px;
  }

• 

  marshallcweber · Member · Apr 13, 2014 at 1:31 am

  • Copy link

  The front page and lead story are good. Just wondering how to do it, so when you click on it, it has those dimensions. Just makes for a clearer read in my opinion.

• 

  thesacredpath · Member · Apr 13, 2014 at 3:17 am

  • Copy link

  Ah, now I understand. Give this a try. The original width of the content area was 64%. Add the following and you can play with the % maximum width.

  .single .row .eightcol {
      max-width: 55%
  }

• 

  thesacredpath · Member · Apr 13, 2014 at 3:19 am

  • Copy link

  Scratch that. Let’s do a media query and limit it to 768px in width or wider since that is where the sidebar moves to the bottom.

  @media screen and (min-width: 768px) {
  .single .row .eightcol {
      max-width: 55%
  }
  }

• 

  marshallcweber · Member · Apr 16, 2014 at 12:01 am

  • Copy link

  Is there a way to change to widget font? Would like it to be white.

• 

  thesacredpath · Member · Apr 16, 2014 at 12:06 am

  • Copy link

  Certainly, add the following to change the widget title text to white.

  .widgettitle {
      color: #FFFFFF;
  }

• 

  marshallcweber · Member · Apr 16, 2014 at 2:13 am

  • Copy link

  awesome two more questions:

  a) is there way to make the font larger
  b) (unrelated to this widgets) is there a way to put a Facebook page and Twitter icon in the header?

• 

  thesacredpath · Member · Apr 16, 2014 at 3:33 am

  • Copy link

  a) assuming you are talking about widget titles, change the .widgettitle bit I gave above to this, with the new selector, and adjust the font size as desired. It was 1em originally.

  .wf-active aside h3.widgettitle {
      color: #FFFFFF;
      font-size: 1.1em;
  }

  b) Give your theme is a responsive design, I would suggest putting them into the top navigation. You would create links in a custom menu for the two, and the look at the source code and find those two menu items and get the unique menu class id, which would look something like this

  menu-item-1115

  You would then do something like this

  #menu-item-1115 {
      background: url("URL_OF_IMAGE") no-repeat scroll center center rgba(0, 0, 0, 0);
  }
  #menu-item-1115 a {
  color: rgba(0, 0, 0, 0);
  }

  You would create the two sets of rules (like above) with the the correct ID number and then upload your images to your media library and put the URLs of the images into the appropriated background declaration.