Arcade Theme: Adding my own header icon

  • freckleduckcafe · Member ·

    Hi all.
    I need some help. I am very new to CSS customization and have no idea what i’m doing. I want to add my own logo in as a header icon. From reader i know i do this through header.php but that really means nothing to me. Any assistance would be greatly appreciated!!
    Cheers

  • thesacredpath · Member ·

    Hi there, are you talking about this site: http://freckleduckcafe.wordpress.com/ ? If not, can we have a link to that site please?

    At WordPress.com we cannot edit the theme PHP script files, but we can help add a logo to a WordPress.com site using CSS. Do you have the logo uploaded to your media library? If so, can you give us the URL for that image?

  • freckleduckcafe · Member ·

    Hi. Yes that is the site.
    The logo is in my media library and the URL is https://freckleduckcafe.wordpress.com/wp-admin/upload.php?item=16

  • thesacredpath · Member ·

    Hi there, I’ve assumed you wish to replace the main site title. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think. Your logo as is, is quite large, so I sized it down with CSS to about half the size it was. 

    #site-title {
    background: url("http://freckleduckcafe.files.wordpress.com/2014/09/cropped-fd-logo-sample-12.jpg") no-repeat scroll top center transparent;
    max-width: 250px;
    height: 250 !important;
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
}
#site-title a {
    text-indent: -9999px;
    text-shadow: none;
    display: block;
    max-width: 530px;
    margin-left: auto;
    margin-right: auto;
    line-height: 250px;
}
  • freckleduckcafe · Member ·

    Thanks very much for the help!
    What i was actually wanting to do is keep the site title as ‘Freckleduck’ and then have the logo under this where the wine glass icon currently is. Is that possible?

  • thesacredpath · Member ·

    Oh yeah, sure thing. Instead of the above, add the following. 

    .fa-glass:before {
    content: "";
}
.fa-glass {
    height: 150px;
    width: 150px;
    background: url("http://freckleduckcafe.files.wordpress.com/2014/09/cropped-fd-logo-sample-12.jpg") no-repeat scroll top center /contain transparent;
}

    You can adjust the size if the logo by changing the width and heights. I would keep height and width the same values.

  • freckleduckcafe · Member ·

    Perfect. Thanks again!!

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘Arcade Theme: Adding my own header icon’ is closed to new replies.