Hemingway Rewritten Header Box CSS Edits

• 

  jaclynmuns · Member · Apr 3, 2014 at 7:08 pm

  • Copy link
  • Add topic to favorites

  I just changed over my theme to Hemingway Rewritten – I’d like to now how I can customize the box within the header to be smaller or transparent? I’d like to have the images rotate through and not have them blocked out by the black box, but want to keep the page title. Any advice? Thank you!

  Blog is: http://www.marketingfemaleathletes.com

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

• 

  designsimply · Member · Apr 3, 2014 at 10:32 pm

  • Copy link

  I checked out a few of the pages on http://marketingfemaleathletes.com/ and I see that you were able to block out the black background from behind the site title on the Hemingway Rewritten theme using the following CSS:

  .site-branding {
  	background: none repeat scroll;
  	display:inline-block;
  	padding:.5em
  }

  Looks great! Do you need any additional help with that?

• 

  jaclynmuns · Member · Apr 4, 2014 at 4:25 pm

  • Copy link

  Thanks for looking. Yes, I was messing around with the code and was able to figure it out. But, I’m curious how I can adjust just the font within the heading? Make it larger and make the two lines of text closer together? Possibly even orient it to the left of the header? Thanks so much for your help as I try to navigate through CSS!

• 

  designsimply · Member · Apr 4, 2014 at 4:56 pm

  • Copy link

  For the title and description font size and spacing, here is an example to get you started. You should experiment with the numbers and try different length titles (i.e. make sure it looks good with long titles) and adjust the CSS until you get the final look you want. Personally, I like the titles centered because I think it looks better on larger screen sizes, but it’s up to you. The text-align properties in the example below adjusts that part.

  .site-branding .site-title {
  	font-size: 36px;
  	line-height: 1.2em;
  	text-align: left;
  }
  .site-branding .site-description {
  	font-size: 20px;
  	line-height: 1.4em;
  	margin-top: -1em;
  	padding-top: 0;
  	text-align: left;
  }

• 

  jaclynmuns · Member · Apr 4, 2014 at 8:47 pm

  • Copy link

  Ah, perfect – thank you!

  And for the menu titles and sizes – am I able to change those colors and sizes as well?

• 

  designsimply · Member · Apr 4, 2014 at 11:20 pm

  • Copy link

  To change the main menu colors in the Hemingway Rewritten theme, add the following to your Appearance > Customize > CSS editor:

  .main-navigation,
  .main-navigation .children li {
  	background: #fff;
  }
  .main-navigation li:before {
  	color: #eee;
  }
  .main-navigation ul ul li {
  	background: #1d1d1d;
  }
  .main-navigation li:hover > a {
  	color: #000;
  }
  .main-navigation .current_page_item a,
  .main-navigation .current-menu-item a {
  	color: #000;
  }
  .main-navigation a,
  .main-navigation a:visited {
  	color: rgba(0,0,0,0.6);
  }
  .main-navigation ul > li.has-children:after,
  .main-navigation ul > li.page_item_has_children:after {
  	border-top-color: rgba(0,0,0,0.6);
  }
  .main-navigation ul ul > li.has-children:after,
  .main-navigation ul ul > li.page_item_has_children:after {
  	border-left-color: rgba(0,0,0,0.6);
  }
  .main-navigation ul ul a,
  .main-navigation ul ul a:visited {
  	border-bottom: 1px solid rgba(0,0,0,0.1);
  }
  .main-navigation ul ul {
  	box-shadow: 0 3px 3px rgba(255,255,255,0.2);
  }

  I reversed the colors, but you can change to different color codes as needed.

  To change the menu font size, add the following and adjust the percentage value as needed:

  #page .main-navigation a,
  #page .main-navigation a:visited {
  	font-size: 100%;
  }

• 

  jaclynmuns · Member · Apr 10, 2014 at 1:24 am

  • Copy link

  Thank you so very much!! Sorry for all the questions, but one more.

  On the home page, the header images rotate through the ones I upload on the refresh. Can this be done on all the pages – not just the homepage? Even if they’re all the same images?

• 

  designsimply · Member · Apr 10, 2014 at 12:58 pm

  • Copy link

  That is a function that depends on whether the theme supports it or not. I checked the Appearance > Customize > Headers settings, and I see that you have already selected the option to randomize headers. Past that, the theme decides which headers rotate, and it looks like Hemingway Rewritten doesn’t support randomizing headers on single pages. Sorry about that!

• 

  designsimply · Member · Apr 10, 2014 at 8:48 pm

  • Copy link

  Hi again! I was wrong about the randomized headers on the Hemingway Rewritten theme — I checked one page on your site and assumed, when I really should have tested it myself.

  This is the page I checked: http://marketingfemaleathletes.com/current-activities/

  The reason the header image isn’t random there is that the featured image you attached to that page is overriding the random headers. Try removing the featured image.

• 

  jaclynmuns · Member · Apr 15, 2014 at 2:33 am

  • Copy link

  Oh, wonderful – thanks so much!!