Change position of title image

• 

  leoceasar18 · Member · May 31, 2017 at 12:45 pm

  • Copy link
  • Add topic to favorites

  Hello. One last question for the month haha!

  I just changed my homepage to a full-screen image view and I think this is more beautiful and pleasing for my website. So it currently looks like this:
  https://blaineislostph.files.wordpress.com/2017/05/from-this.jpg

  I want to change the position of that title and use an image instead.
  I will use this image as my title: https://blaineislostph.files.wordpress.com/2017/05/blaineislostwhite-logo.png

  and I need it to look like this:
  https://blaineislostph.files.wordpress.com/2017/05/to-this1.jpg

  same thing for tablet view and mobile, everything will be responsive and resize should be automatic.
  mobile view sample:
  https://blaineislostph.files.wordpress.com/2017/05/to-this-mobile.jpg

  Also, I would like the “full-screen” mode to be maintained on my posts and pages view:
  https://blaineislostph.files.wordpress.com/2017/05/postview2.jpg
  https://blaineislostph.files.wordpress.com/2017/05/post-view.jpg

  Is this possible through CSS? Thank you in advance :)

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

• 

  thesacredpath · Member · Jun 1, 2017 at 2:46 am

  • Copy link

  I had this almost entirely worked out and then my browser went walkabout and I lost it. I’m recreating it all now. Just wanted to let you know.

• 

  leoceasar18 · Member · Jun 1, 2017 at 2:52 am

  • Copy link

  I appreciated your help man! I think my request is too complicated. Haha.

• 

  thesacredpath · Member · Jun 1, 2017 at 9:51 pm

  • Copy link

  Ok, made it through without issues on the third try. Add this to your custom CSS.

  .site-title {
  	background: url('https://blaineislostph.files.wordpress.com/2017/05/blaineislostwhite-logo.png') no-repeat scroll left top / auto;
  	display: block;
  	max-width: 350px;
  	height: 70px;
  	background-color: #eee;
  }
  .site-title a {
  	color: transparent !important;
  	font-size: 20px;
  	vertical-align: top;
  	display: block;
  }
  .site-description {
  	display: none !important;
  }
  @media screen and (min-width: 1060px) {
  	.site-title {
  		position: relative;
  		top: 25px;
  		left: 100px;
  	}
  }
  #site-branding {
  	padding-top: 0;
  }
  @media screen and (max-width: 1059px) {
  	.site-title {
  		background-position: left center;
  	}
  	.site-title a {
  		position: relative;
  		top: 20px;
  	}
  }

  Note that I added a background color to the .site-title (first rule). That is so that you can see it on static pages and posts, since the header on those is white and so is your logo image.

• 

  leoceasar18 · Member · Jun 2, 2017 at 9:45 am

  • Copy link

  Thanks man! Yup you’re correct, the header on pages and posts are in white, is there a way to make it transparent similar to the homepage so we can view the white logo provided? Thanks

• 

  thesacredpath · Member · Jun 5, 2017 at 6:36 pm

  • Copy link

  The white at the top is actually the top level body color showing through. The header area has not color assigned. If we change the color of the body section, then it also changes the color of the content section, which also does not have a color assigned.

  We could do something like this which changes the color of the top area and sets a color for the content area and excludes the home page.

  body.custom-background:not(.home) {
  	background-color: #000
  }
  body:not(.home) .content-wrap {
  	background-color: #fff;
  }
  body:not(.home) .desktop-navigation {
  	background-color: #fff;
  }