Adding logo to site title – Able Them
-
Hello. I’ve read many posts on this topic, but none seem to work for me. I’m using the Able theme and want to add my logo to the left of the site title. It doesn’t work as the header image because that makes the image huge.
I’m using a child theme. The image I want to insert is in my media library and called GM-LTBlue-WEB.gif.
My latest attempt is using this code in the the header.php. It shows a little icon that looks like a torn picture where the image should be, but not the image itself.
<h1 class=”site-title”>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img id=”GM-LTBlue-WEB.gif” src=”<?php echo get_stylesheet_directory_uri(); ?>/images/GM-LTBlue-WEB.gif” alt=”” /><?php bloginfo( ‘name’ ); ?></h1>
I added this to the stylesheet after seeing a post and thinking it might help, but no change.
.site-header hgroup { display: none; }
.site-logo { max-width: 100%; height:auto; }I would really appreciate some help. I am not a coder – just a small business person trying to create my website with a logo who took a WordPress class online which did not include doing any editing like this, so I’m sure I’ve mucked something up.
Thanks.
Jaime
The blog I need help with is: (visible only to logged in users)
-
The web site I need help with is http://www.gandmconsult.com.
Hello. I’ve read many posts on this topic, but none seem to work for me. I’m using the Able theme and want to add my logo to the left of the site title. It doesn’t work as the header image because that makes the image huge.
I’m using a child theme. The image I want to insert is in my media library and called GM-LTBlue-WEB.gif.
My latest attempt is using this code in the the header.php. It shows a little icon that looks like a torn picture where the image should be, but not the image itself.
<h1 class=”site-title”>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><img id=”GM-LTBlue-WEB.gif” src=”<?php echo get_stylesheet_directory_uri(); ?>/images/GM-LTBlue-WEB.gif” alt=”” /><?php bloginfo( ‘name’ ); ?></h1>
I added this to the stylesheet after seeing a post and thinking it might help, but no change.
.site-header hgroup { display: none; }
.site-logo { max-width: 100%; height:auto; }I would really appreciate some help. I am not a coder – just a small business person trying to create my website with a logo who took a WordPress class online which did not include doing any editing like this, so I’m sure I’ve mucked something up.
Thanks.
Jaime
The web site I need help with is http://www.gandmconsult.com.
-
OMG – I can’t seem to get the web site that I need help with correct.
It’s dev.gandmconsult.com.
Thanks!
-
Jaime, I can’t help with the PHP solution, but I can give you a quick and easy CSS solution as outlined below. Upload your logo to your media library, get the URL of that image and replace “URL OF IMAGE” in the code below with the full URL of your uploaded image (starting with http://). You can then adjust the location of the text with the text indent in the second rule below.
#site-introduction { background: url("URL OF IMAGE") no-repeat scroll left top transparent; } .site-title, .site-description { text-indent: 120px; }Here is a screenshot with a 100 x 150 red square image using the above code: http://flippintestblog.files.wordpress.com/2013/08/g-m.png
-
Thanks so much! Now for the really stupid question. My image is uploaded to WordPress already. How do I find it’s URL?
-
I found the image’s url and inserted it in the lines of code you sent me on the style sheet, but I still don’t see the image. Just an icon of a torn picture where the image should be.
Do you have any ideas on why the image itself is not displaying?
Thanks very much for your help.
Jaime
-
@Jaime, I’m not seeing the Able theme anymore on http://www.gandmconsult.com/ , I’m seeing something else I’m not familiar with, with some complex CSS. That one you will likely have to talk with the theme designer on. With Able, that is a theme we made, so we support that theme.
-
It’s on dev.gandmconsult.com – which is what I’m working on developing now in wordpress. the other site is in production using website tonight from godadaddy. as soon as i can get the wordpress site ready, it will replace the other one.
-
Ah yes, the dev site. I forgot that.
This is based on the image that I saw in the background, which was showing at the top right when I visited your site (200px square). I used Firebug in Firefox to do this which typically works pretty well, but it can sometimes trip one up. Since I had an image to work with, I was also able to make a few other adjustments to work with your specific image.
Since I can’t work directly in your CSS, I can’t make sure all the following will work seamlessly. It might be that an !important attribute or two may be needed
Add the following to the very bottom of your main theme CSS stylesheet, which you can edit at Appearance > editor.
#site-introduction { background: url("http://dev.gandmconsult.com/wp-content/uploads/2013/08/GM-LTBlue-WEB1.gif") no-repeat scroll left top transparent; margin-left: auto; margin-right: auto; max-width: 1280px; min-height: 200px; } .site-title, .site-description { margin-left: 170px !important; } .site-title { padding-top: 40px; }With a self-hosted installation, I would recommend either creating a child theme, or using the Custom CSS editor that is part of the Jetpack plugin created by WordPress.com. This will prevent any future updates to the theme from overwriting your CSS customizations.
-
Thank you! It worked. I thought I had created a child theme from Able and was making the changes there, but I realized later I wasn’t. Thanks for the tip on the Custom CSS editor – that’s what I used to paste in the code you gave me.
Of course, it brings up one more question – I can’t seem to figure out how to indent my site title and description more to the right to allow room for the logo. Can you tell me how to do that?
Thanks very much!
-
Never mind – it fixed itself when I removed the right-justified background image of the logo that I was playing around with!
It looks great – I really appreciate your assistance.
-
- The topic ‘Adding logo to site title – Able Them’ is closed to new replies.
WordPress.com Forums 
