Adding an image instead of text to header in Intergalactic theme.

  • Unknown's avatar
    rapidinternational · Member ·

    Hi

    The Intergalactic theme currently has ‘Intergalactic’ text as the header, however, I would like to change this to our company logo instead. I contacted WordPress and they told me to ask this question on the forums to get the code I would need for this. Can anyone shed any light on this?

    Many thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    I’m sorry but we are unable to provide support for any sites that are not hosted here at WordPress.COM and our support docs do not apply to your site.

    WordPress.COM and WordPress.ORG are completely separate and have different logins, features, run different versions of some themes with the same names, and have separate support forums. http://en.support.wordpress.com/com-vs-org/

    If you don’t have a username account at WordPress.ORG click http://wordpress.org/support/ and register one on the top right hand corner of the page that opens, so you can post to the support forums there.

    Resetting your WordPress.ORG password http://codex.wordpress.org/Resetting_Your_Password

    WordPress.org support docs are at https://codex.wordpress.org/Main_Page

  • Unknown's avatar
    designsimply · Member ·

    I can help you with your question about changing the site title into a logo on the Intergalactic theme using CSS.

    Let’s look at the theme’s demo page as an example:
    http://intergalacticdemo.wordpress.com/

    Here is a CSS example that will replace the site title with a logo:

    .site-title a {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url(http://i2.wp.com/s.w.org/about/images/logos/wordpress-logo-notext-rgb.png?w=150) center no-repeat;
	display: block;
	margin: 0 auto;
	width: 150px;
	height: 150px;
}

    To use your own image, replace the link in url() with your own image link and adjust the width and height values as needed.

  • Unknown's avatar
    ianfisher15 · Member ·

    The above code works to put in the logo, but how do you make it retina ready?

    Also I noticed on some blog posts after adding in the logo, the menu on the side doesn’t appear.

    In addition, the on certain posts the logo overlaps on top of the featured image and looks awkward.

    When I resize the window to portrait tablet size and smaller, both the menu and logo work perfectly.

  • Unknown's avatar
    designsimply · Member ·

    how do you make it retina ready?

    Good question. How about this?

    .site-title a {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url(http://i2.wp.com/s.w.org/about/images/logos/wordpress-logo-notext-rgb.png?w=300) center no-repeat;
	background-size: 100%;
	display: block;
	margin: 0 auto;
	width: 150px;
	height: 150px;
}

    Also I noticed on some blog posts after adding in the logo, the menu on the side doesn’t appear.

    In addition, the on certain posts the logo overlaps on top of the featured image and looks awkward.

    Good points. My example really should have been limited to the home page only, which can be achieved by adding “.home” in front of “.site-title” in the example. If you wanted to add a logo to other types of pages, then specific CSS would need to be written for those scenarios separately.

  • The topic ‘Adding an image instead of text to header in Intergalactic theme.’ is closed to new replies.