font size/centering/spacing/background image

• 

  jackmarsauthor · Member · Nov 16, 2015 at 1:34 am

  • Copy link
  • Add topic to favorites

  –how do i change the font size of the page titles and of the banner links?

  –how do i center the page titles?

  –how do i use extended spacing for text in a page title or banner (or the body), i.e. H E L L O H O W A R E Y O U

  –how do i change the background image for the page and banner itself? (not just for the exterior border)

  thanks much

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

• 

  chrisrudzki · Member · Nov 16, 2015 at 9:20 pm

  • Copy link

  Hi Jack,

  Just so I’m clear, do you want to change the font size, alignment, and spacing of only page titles, or the titles for pages and posts?

  Let me know, and I’ll write up the CSS that’ll help you make all the changes you mention.

• 

  jackmarsauthor · Member · Nov 17, 2015 at 8:36 pm

  • Copy link

  thank you. i want to change the font size, alignment and spacing of only page titles.

  thanks

• 

  chrisrudzki · Member · Nov 17, 2015 at 10:49 pm

  • Copy link

  The following should give you a good start. You can change the values, of course:

  .page .entry-header {
      text-align: center;
      letter-spacing: 1px;
  }
  
  .page .entry-title {
      font-size: 150%;
  }
  
  #page {
     background-image: url('http://my_image_url/image.jpg');
  }

  As for “banner links”, can you give me an example of what you mean exactly?

• 

  jackmarsauthor · Member · Nov 18, 2015 at 2:41 am

  • Copy link

  thank you.

  how do i make a page title ALL CAPS?

  also, how do i alter the appearance of the text of the title and subtitle of the site itself, and of the links in the banner below it?

• 

  chrisrudzki · Member · Nov 18, 2015 at 6:17 pm

  • Copy link

  Try updating your CSS as such:

  .page .entry-title {
      font-size: 150%;
      text-transform: uppercase;
  }

  As for altering the site title, tagline, and navigation, you can use something like this:

  .site-title,
  .site-description,
  .main-navigation {
      font-size: 150%;
      text-transform: uppercase;
  }

  Let me know if you need further and specific help with this!

• 

  jackmarsauthor · Member · Nov 19, 2015 at 3:25 am

  • Copy link

  thank you. i still don’t know how to change the font size/spacing of the actual title of the overall site.–and the subtitle beneath it

• 

  chrisrudzki · Member · Nov 19, 2015 at 3:46 pm

  • Copy link

  i still don’t know how to change the font size/spacing of the actual title of the overall site.–and the subtitle beneath it

  The snippets I provided should work.

  For site title and description (or tagline):

  .site-title,
  .site-description {
      font-size: 150%;
      letter-spacing: 1px;
      text-transform: uppercase;
  }

  As with the other changes, you can add these to your CSS by following this guide:
  https://en.support.wordpress.com/custom-design/editing-css/

  If you’re still running into issues, can you give me a specific example of what you want to change, and specifically what changes should be made?

• 

  jackmarsauthor · Member · Nov 22, 2015 at 1:39 am

  • Copy link

  thanks. but this changes the title and the banner links. any way to just isolate the title?

• 

  chrisrudzki · Member · Nov 23, 2015 at 3:17 pm

  • Copy link

  You’re currently using the following CSS:

  .site-title,
  .main-navigation {
  	font-size: 80%;
  	letter-spacing: 2px;
  	text-transform: uppercase;
  }
  
  .entry-content {
  	font-size: 120%;
  }
  
  .page .entry-header {
  	text-align: center;
  	letter-spacing: 3px;
  }
  
  .page .entry-title {
  	font-size: 200%;
  	text-transform: uppercase;
  }

  If you don’t want any styles to apply to the navigation menu, then you’d simply use:

  .site-title {
  	font-size: 80%;
  	letter-spacing: 2px;
  	text-transform: uppercase;
  }
  
  .entry-content {
  	font-size: 120%;
  }
  
  .page .entry-header {
  	text-align: center;
  	letter-spacing: 3px;
  }
  
  .page .entry-title {
  	font-size: 200%;
  	text-transform: uppercase;
  }

  You might like this guide, which helps you with CSS basics.
  https://en.support.wordpress.com/custom-design/css-basics/