Centering site title type styling

• 

  rustycook · Member · Dec 26, 2013 at 10:59 pm

  • Copy link
  • Add topic to favorites

  Hia,

  I’m using the Kiore Moana theme and having a hard time with a couple issues and would love any suggestions.

  1. How can I center my site title? I had some success moving it by playing with the following code, but it is not actually centered.

  #site-title {
  	position: relative;
  	margin-left: auto;
  	margin-right: auto;
  	width: 50%;
  	text-align: center;
  	bottom: 15px;
  }

  2. I modified some of the fonts using the a selector to be Futura Bold. However, I’m having trouble making changes to individual styles. I would like to make the menu a bit larger, and the footer a bit smaller though. I would also like the footer to be all one font (Museo Slab ideally) and a lighter color so that it stands out less. Can this be done?

  Thanks!

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

• 

  justpi · Member · Dec 27, 2013 at 12:31 am

  • Copy link

  To center the title, remove your code and paste this instead:

  #site-title {
  text-align: center;
  }
  #site-title h1 {
  float: none;
  }

  To make the menu items larger, paste this and increase the value:

  #colophon .footer-nav ul.menu li a {
  font-size: 10px;
  }

  To make the credits smaller and change their color, add this and change the values:

  #colophon #site-info ul.credit li, #colophon #site-info ul.credit li a, #colophon p.credittext {
  font-size: 0.84rem;
  color: #607070;
  }

  (We’ll see about the font family issue after you make these changes.)

• 

  rustycook · Member · Dec 27, 2013 at 3:51 am

  • Copy link

  Thank you! That fixed the site title, and I was able to change the menu and links in the credits, but if you take a look, the “HEME: KIOREMOANA BY” copy is still in a different font, and i’d like for the whole line to be the same font. Any tips?

  Another issue I’m encountering is the formatting of the Comments section. I’d love it if this section could be centered, instead of having such a large left margin.

  I’d also like to style the fonts so that:

  – “1 Comments So Far” is smaller and centered
  – The author name and “says” are the same size and font
  – The comment text is larger and is museo-slab

  Any help you can offer is much appreciated!

• 

  justpi · Member · Dec 27, 2013 at 11:31 am

  • Copy link

  You’re welcome.

  1.
  I had already written that “we’ll see about the font family issue after you make these changes”. You have added this:

  #colophon #site-info ul.credit li, #colophon #site-info ul.credit li a, #colophon p.credittext {
  color: #BBBBBB;
  font-size: 8px;
  }

  Turn it to this:

  #colophon #site-info ul.credit li, #colophon #site-info ul.credit li a, #colophon p.credittext {
  color: #BBBBBB;
  font-family: museo-slab-1,museo-slab-2,Georgia,"Times New Roman",Times,serif;
  font-size: 8px !important;
  }

  2.
  Add this:

  #comments h3.comments-title, #comments .comment-content, #comments #respond {
  padding-left: 0;
  }

  3a.
  Add this and decrease the value:

  #comments h3.comments-title {
  font-size: 1.5rem;
  text-align: center;
  }

  3b.
  Add this, replace SPECIFY with the font you prefer, change the size value:

  #comments li.comment-author, #comments li.comment-author a {
  font-family: SPECIFY !important;
  font-size: 1.26rem !important;
  }

  3c.
  Add this and change the value:

  #comments .comment-text p {
  font-family: museo-slab-1,museo-slab-2,Georgia,"Times New Roman",Times,serif;
  font-size: 1.125rem;
  }

• 

  rustycook · Member · Dec 28, 2013 at 3:33 am

  • Copy link

  That did the trick. Thanks so much for all of your help!