WordPress.org

Support

Support » Themes and Templates » [Resolved] How transform the header image into a logo of 300×50

[Resolved] How transform the header image into a logo of 300×50

  • Chester

    @chester-hepburn

    I am using Twenty Thirteen child theme. I want to transform or replace the header image into a logo of 300×50. I am a newbie. I just switched from joomla because it is so much complicated. I really need some help here. Thanks

Viewing 15 replies - 1 through 15 (of 21 total)
  • Hi Chester, you can remove the Header Image from here:

    Go to Dashboard
    Under the ‘Appearance’ you will see ‘Header’
    Go to ‘Header’
    Remove the Header Image and upload your Logo accordingly.

    Chester

    @chester-hepburn

    There is a problem in that. It is up scaling the image to 1600 × 230 pixels and appearing in same size in front end. I want it to be appear in 300×50 pixel size in front end. How to do that?

    Okay. You need to make some changes in the Style sheet CSS file.

    But before that, please make sure you crate the Child Theme. Please follow the instruction very carefully:

    http://codex.wordpress.org/Child_Themes

    Chester

    @chester-hepburn

    I am already using Twenty Thirteen child theme as i have mentioned in my first post

    paulwpxp

    @paulwp

    Font hero

    It depends how you would position the site title/desc text along with the logo both in normal PC screen and small device screen.

    • Remove Header Image from the setting. Theme will automatically injects the CSS to not have a fixed min height for header area.
    • Keep the Site title/desc on.
    • If you only want the logo display and no text, use any of the CSS image replacement technique to put the logo in.
    • If you want both logo and site title/desc text, use CSS :before or :after to put that image in (as pseudo element).
    • Some adjustments in a few media queries.
    Chester

    @chester-hepburn

    Hey paul, thanks for your reply.

    I want the logo display and no text. After removing Header Image from the setting what should i do in css?

    Chester

    @chester-hepburn

    please check this site

    http://www.successstories.co.in/

    this site is not mine, but I would like my logo to be like that.

    paulwpxp

    @paulwp

    Font hero

    Correction: The first point in the list in my previous post is wrong. It will inject CSS to not have fixed min height when Header Image removed AND Text set to not display.

    paulwpxp

    @paulwp

    Font hero

    I want the logo display and no text. After removing Header Image from the setting what should i do in css?

    Make sure the Header Text checkbox is checked to show, and use this code in child theme stylesheet.

    /*_____ do logo _____*/
    
    .site-header { padding-top: 20px; }
    .site-description {
    	position: absolute;
    	clip: rect(1px 1px 1px 1px); /* IE7 */
    	clip: rect(1px, 1px, 1px, 1px);
    }
    .site-header .home-link {
    	min-height: 0;
    }
    .site-title {
    	text-indent: 120%;
    	white-space: nowrap;
    	overflow: hidden;
    	margin: 0 0 10px;
    	padding: 0;
    	width: 300px;
    	font-size: 50px;
    	background: url("http://dummyimage.com/300x50/ff0000/fff.png") no-repeat scroll 0 0 / cover  transparent;
    }
    @media (max-width: 800px) {
    	.site-title { width: 210px; font-size: 35px; margin: 0 auto 10px; }
    }
    
    /*_____ end logo _____*/

    Only change the image url to your logo.

    Chester

    @chester-hepburn

    Hey Paul as per your instruction I did everything

      Removed the header keeping header text checked
      Pasted the code in child theme style.css file pointing the image url to my logo.

    But i don’t know whats wrong there still its not working. I appreciate your time for me. A little bit more help here please. Thanks a ton.

    Chester

    @chester-hepburn

    No change in front-end appearance after pasting the code.

    paulwpxp

    @paulwp

    Font hero

    Did you clear browser cache ?

    Chester

    @chester-hepburn

    Ya i did. Still nothing.

    You may check this thread. Hope there you get some idea: change-cropping-size-in-twentythirteen

    paulwpxp

    @paulwp

    Font hero

    Please make sure your child theme works as it should. If the site is online, link it up so that we can help inspect, or at least see it better.

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘[Resolved] How transform the header image into a logo of 300×50’ is closed to new replies.