Logo on page header

• 

  lanason · Member · Jul 19, 2015 at 6:36 pm

  • Copy link
  • Add topic to favorites

  Is is possible in 20-12 to put a logo on the header in the top left hand corner of the screen – rather than the text?

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

• 

  ehtis · Staff · Jul 19, 2015 at 9:07 pm

  • Copy link

  Yep, a background image acting as logo can be placed in that area.

  Here I’m going to place the ‘Lanson’ logo (the one at your blog) in the header area. To use another image, upload it to media library (preferred due to being on WordPress.com servers) and replace the link in the following code:

  .site-header h1 a {
    color: transparent !important;
    width: 100%;
    height: 60px;
    background: url("http://lanason.files.wordpress.com/2015/07/cropped-lanasonlogov11-e1437324076975.jpg") left no-repeat;
    margin-left: -5px;
  }

  Adjust height as required.

• 

  lanason · Member · Jul 19, 2015 at 9:18 pm

  • Copy link

  wow thats fantastic – thank you

  is it possible to some text on the right hand side of the header

• 

  ehtis · Staff · Jul 19, 2015 at 9:42 pm

  • Copy link

  Possible, and you’re welcome!

  .site-header h1 a:after{
      padding-left: 70px;
      color: #5F5B10;
      content: "My Text"
  }

  The default site title (Lanason) can also be moved to the right, but I assumed you wanted custom text.

• 

  lanason · Member · Jul 19, 2015 at 9:57 pm

  • Copy link

  That again is spot on.
  Is there syntax to move it down and change font size of font type?

• 

  lanason · Member · Jul 19, 2015 at 10:00 pm

  • Copy link

  or font type

• 

  ehtis · Staff · Jul 19, 2015 at 10:09 pm

  • Copy link

  Here it is. Top adjusts height, change font-family for font type and follow the same for other properties:

  .site-header h1 a:after{
      position: relative;
      top: 50px;
      padding-left: 70px;
      color: #5F5B10;
      font-family: Arial;
      font-size: 16px;
      content: "My Text"
  }

  Replace the previous code for adding text with this one.

• 

  ehtis · Staff · Jul 19, 2015 at 10:11 pm

  • Copy link

  Forgot a semicolon at the last line, do add it after “My Text”;.

• 

  lanason · Member · Jul 19, 2015 at 10:21 pm

  • Copy link

  thanks again – its looking much better

  if you interest read my blog on Egypt
  wordpress.lanasonegypt

• 

  thesacredpath · Member · Jul 19, 2015 at 11:22 pm

  • Copy link

  Hi there, add the following, which builds on what @ehtis gave above and adds the ability to position the text vertically (top declaration) and change the font size.

  .site-header h1 a:after {
      content: "My text";
      padding-left: 70px;
      color: #5F5B10;
      position: relative;
      top: 30px;
      font-size: 40px;
  }

  On the font family, you can change it. Currently you have a font set for headings in Appearance > Customize > Fonts and the font stack looks like this
  calluna-sans-1,calluna-sans-2,"Open Sans",Helvetica,Arial,sans-serif
  The one thing to remember is that the first place a browser looks for a font is to see if it is a custom web font loaded with the page. The second place is to the fonts installed on the visitor’s computer. Since the fonts that are common to all computer operating systems is limited, if you are going to set a font other than the one set for headings in the Customizer, you would want to select one that is common to all operating systems so that the browser doesn’t substitute the standard serif or sans-serif font. This is a good resource for common fonts. The are assembled in font stacks, so you would select and copy one of them and then add a font-family declaration to the above CSS which would look something like this.
  font-family: Palatino Linotype, Book Antiqua3, Palatino6, serif;

• 

  thesacredpath · Member · Jul 19, 2015 at 11:22 pm

  • Copy link

  Oops, @ehtris, I should have refreshed.

• 

  lanason · Member · Jul 20, 2015 at 3:41 pm

  • Copy link

  Thanks – how do deal with text not wrapping when looked at on a mobile

• 

  thesacredpath · Member · Jul 21, 2015 at 5:14 pm

  • Copy link

  Are you talking about the telephone number? I see a couple of things. First, you have
  .site-header h1 a
  set at 300% width which means the right margin of that is 300% to the right of the right edge of a screen/browser window. Set that to 100%.

  Next, change the code you have to the following.

  .site-header h1 a::after {
      color: #5f5b10;
      content: "Tel:- 0044 (0)1684 893086";
      font-size: 16px;
      position: relative;
      top: 70px;
      float: right;
  }

• 

  lanason · Member · Jul 21, 2015 at 6:12 pm

  • Copy link

  i added
  padding-left: 500px;
  and it wraps the number on smart phone size – thanks again

• 

  thesacredpath · Member · Jul 22, 2015 at 12:44 am

  • Copy link

  Use the code I gave right above your reply instead of what you have and the number should not wrap.