WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
[resolved] How transform the header image into a logo of 300x50 (22 posts)

  1. Chester
    Member
    Posted 1 year ago #

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

  2. mybdbis
    Member
    Posted 1 year ago #

    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.

  3. Chester
    Member
    Posted 1 year ago #

    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 300x50 pixel size in front end. How to do that?

  4. mybdbis
    Member
    Posted 1 year ago #

    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

  5. Chester
    Member
    Posted 1 year ago #

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

  6. paulwpxp
    Font hero
    Posted 1 year ago #

    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.
  7. Chester
    Member
    Posted 1 year ago #

    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?

  8. Chester
    Member
    Posted 1 year ago #

    please check this site

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

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

  9. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  10. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  11. Chester
    Member
    Posted 1 year ago #

    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.

  12. Chester
    Member
    Posted 1 year ago #

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

  13. paulwpxp
    Font hero
    Posted 1 year ago #

    Did you clear browser cache ?

  14. Chester
    Member
    Posted 1 year ago #

    Ya i did. Still nothing.

  15. mybdbis
    Member
    Posted 1 year ago #

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

  16. paulwpxp
    Font hero
    Posted 1 year ago #

    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.

  17. Chester
    Member
    Posted 1 year ago #

    It is a regional content based channel.
    Url here : http://www.papu-comedy.com/

    I am pretty sure that my child theme is working properly and i have created it through step by step instruction. If you need back-end login details for troubleshooting please let me know. Thanks for your time.

  18. Andrew
    Forum Moderator
    Posted 1 year ago #

    Please never give out your login credentials, even if you set up a dummy account it can lead to your installation being compromised. If it comes to a point where you need more support than this forum can provide then we encourage you to seek paid support services from WP Jobs and/or CodePoet.

  19. Andrew
    Forum Moderator
    Posted 1 year ago #

    Btw in your Child Theme style.css file you have this style:

    .entry-title a:hover {
    color: #0d970e;

    It needs to be this:

    .entry-title a:hover {
    color: #0d970e;
    }
  20. paulwpxp
    Font hero
    Posted 1 year ago #

    I see the logo displays as the CSS directed, so please clear browser cache. Also, use 300x50 image.

  21. Chester
    Member
    Posted 1 year ago #

    OMG it works like charm. Thank you so much for your time and the tip for login credentials.

  22. Chester
    Member
    Posted 1 year ago #

    And about the curly bracket thing, it is a human error.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic