Community Forums › Forums › Archived Forums › Design Tips and Tricks › how to remove the title in the header
- This topic has 7 replies, 3 voices, and was last updated 10 years, 4 months ago by nutsandbolts.
-
AuthorPosts
-
December 9, 2013 at 9:25 am #77832SabineMember
Hi,
I'm using the Modern-Portfolio theme and want to use an image instead of text in the header.
Question 1: What do I have to do, to get rid of the title in the header? I switched it off in the settings, but it still appears. So now I see the logo, which I definied as background image and the blogtitle. I tried it with the logo, as my blogname consists of three words. Those one in the middle has a different color.
Question 2: Besides the header without title is not linked to get back to the Homepage. How do I have to write the code, that the header is linked to the Homepage?
Here is what I have now:
#title-area { background-image: url('images/Header_273_37.png'); background-repeat: no-repeat; background-size: 80%; display: block; float: left; height: 28px; padding: 0.75rem 0; margin-bottom: 0rem; margin-top: 1rem; margin-left: 0rem; overflow: hidden; text-indent: 64px; width: 280px; vertical-align: baseline; } .header-image #header, .header-image #title-area { padding: 0; } #title, #title a { cursor: pointer; display: block; line-height: 1; margin-top: 6px; margin-left: 1px; font-size: 19px; font-family: Verdana; color: #666666; } #title a::before { background-color: #CC0000; color: #fff; cursor: pointer; display: inline-block; float: left; height: 18px; margin-bottom: 0rem; margin-top: 2.6rem; overflow: hidden; } #title a:hover::before { background-color: #CC0000; } .header-full-width #title, .header-full-width #title a, .header-full-width #title-area { width: 100%; } .header-image #title, .header-image #title a, .header-image #title-area { display: block; float: left; min-height: 120px; overflow: hidden; text-indent: -9999px; } .header-image #title, .header-image #title a { width: 100%; }
Thanks in advance for your help!
December 9, 2013 at 11:13 pm #77973Sridhar KatakamParticipantDecember 10, 2013 at 2:19 am #78008SabineMemberThanks for your description. Unfortunatly it does not work. The logo does not show up, only the text.
December 10, 2013 at 2:41 am #78009Sridhar KatakamParticipantDecember 10, 2013 at 3:24 am #78010SabineMemberIt's a test-site with no public access. So I cannot put the URL here.
Maybe I put the logo.png in the wrong folder? I named my Image to logo.png and filed it under modern-Portfolio/Images. So I did not change any code in the filter, but maybe I have to change something? The modern-portfolio child theme has an own homepage.php too, maybe that's the reason?
Thanks for your help.
December 13, 2013 at 11:20 am #78831nutsandboltsMemberLooking at the live site, it was hard for me to tell how you added the logo and what CSS rules had been changed. However, I was able to get the logo showing (and clickable) on a test site using Modern Portfolio by doing the following:
(1) In functions.php, I changed the custom header function to use a 273x37 image.
(2) I uploaded your logo file in Appearance > Header.
(3) In the stylesheet, I changed the width of.header-image #title, .header-image #title a
from 100% to 273px.It would still need some work as far as responsive CSS, but hopefully that helps a little - you know what's in place on the live site better than I do, so maybe you can implement something similar depending on what you've already changed in the stylesheet.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+December 14, 2013 at 2:02 am #79000SabineMemberThanks Andrea!
I tried your approach and the header-image appears, but in WordPress it cuts off the last 5 letters. Even if it is written that the image will be taken 273 x 37 px and the image in Adobe is exactly 273 x 37 px, it cuts off.
What you see on the live-site:
I put the image in the
#title-area
and did not upload the Header image under Apperance > Header. I made no changes in the functions.php file#title-area { background-image: url('images/Header_273_37.png'); background-repeat: no-repeat; background-size: 80%; display: block; float: left; height: 28px; padding: 0.75rem 0; margin-bottom: 0rem; margin-top: 1rem; margin-left: 0rem; overflow: hidden; text-indent: 64px; width: 280px; vertical-align: baseline; } .header-image #header, .header-image #title-area { padding: 0; }
Thanks for your help
December 14, 2013 at 1:21 pm #79096nutsandboltsMemberIt needs to be the background for
.header-image #title a
instead of#title-area
- that's why it's not a link. However, just moving the CSS rule doesn't solve the issue. If the other way cuts off the image, that can be fixed with CSS but I'd have to be able to see it to tell you what to change.
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+ -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.