Motif Theme: Changing the header

  • I have installed the Motif theme since it looks the best for my blog style but I am trying to add colour to the simple layout.

    If I add a header, it sits above the Site name and Logo and is quite big.

    Instead of the site name and logo, I would like to add a header image, which is the same width and height as the amount of space the site name and logo takes, that sits right on the top menu. I am not sure how to achieve this though.

    I would appreciate, please, any help.

    PS I have a clean install of the theme so it is exactly like the demo. My site is in maintenance so cannot link.

Viewing 6 replies - 1 through 6 (of 6 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi there, this is sort of a general take on things since I don’t have your image to work with. The following adds the logo image to the site-title div and then sets the site title text to transparent by using RGB color with an alpha transparency of 0 (fully transparent). I’ve also set the background image for site-title to “contain” so that it will stay within the bounds of the site title div (height will likely be the controlling dimension). Upload your image to the media library, get the URL of that image and then replace URL_OF_IMAGE between the quotes with that image URL.

    .site-title {
    background: url("URL_OF_IMAGE") no-repeat scroll 0 0 /contain transparent;
}
.site-title a {
    color: rgba(0, 0, 0, 0);
}
    Thread Starter daddya

    (@daddya)

    Hello sacred path. Thank you very much for this code. It’s been a long time since I have done coding. I am not a expert but I can follow instructs. Would you kindly tell me where to add this please?

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    Thread Starter daddya

    (@daddya)

    Thanks a bunch for the plugin recommendation ??

    Thread Starter daddya

    (@daddya)

    Okay so after adding that code, what it has done is replace the site title text with the title being transparent, and left the tagline underneath. So it is more like a logo than what I intended i.e. a image that goes across the whole menu bar from left to right where I can write my site name on that header image I add,

    daddya – if you’d like us to help further with this, could you please provide a link to your site so we can take a look directly at what you have so far? Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Motif Theme: Changing the header’ is closed to new replies.