Twenty Thirteen Custom CSS – Fonts, Blockquotes, Content Width

• 

  sarahmfrench · Member · Feb 27, 2014 at 9:09 pm

  • Copy link
  • Add topic to favorites

  I am trying to customize my blog that uses the twenty thirteen theme. I would like to change the font size of the blockquotes, have the header “Adventures of Our Own” be a different font that the other text and increase the width of the content pane to go out as far left as the menu. Here is what I have done to try to do it myself, but it doesn’t seem to change anything.

  An example of one of my posts with blockquotes is here: http://adventuresofourown.wordpress.com/2013/04/12/my-chains-are-gone-ive-been-set-free/

  // These are for general blockquotes inside posts and pages
  .entry-content blockquote {
  	font-size: 10px;
  }
  
  .entry-content blockquote cite,
  .entry-content blockquote small {
  	font-size: 10px;
  }
  
  // These are for blockquotes inside Quote post format
  .format-quote .entry-content blockquote {
  	font-size: 10px;
  }
  .format-quote blockquote small,
  .format-quote blockquote cite {
  	font-size: 10px;
  }
  
  // These stylings are for mobile and small screen devices
  @media (max-width: 643px) {
  	.format-quote blockquote,
  	.format-status .entry-content {
  		font-size: 10px;
  	}
  
  	.format-quote blockquote small,
  	.format-quote blockquote cite {
  		font-size: 10px;
  	}
  }
  
  .entry-header,
  .entry-content,
  .entry-summary,
  .entry-meta {
      margin: 0 auto;
  	max-width: 800px;
  	width: 100%;
  }

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

• 

  hfzrhmn · Member · Feb 28, 2014 at 12:47 am

  • Copy link

  Hi,

  Two alternatives are possible. You can try adding ‘.wf-active’ in front of each selector. For example change
  .entry-content blockquote

  to

  .wf-active .entry-content blockquote

  This is because there are other CSS that are given more preference to yours, and adding specificity like the above can add more priority to yours.

  If that still don’t work, then the second thing you can do is add ‘!important’ after every parameter. So, from

  .entry-content blockquote {
  	font-size: 10px;
  }

  change it to

  .wf-active .entry-content blockquote {
  	font-size: 10px !important;
  }

  ( note that the !important part comes before the ; )

  That will give even more priority to your CSS.