Home Forums Xi Theme Discussion & Support Logo and header – using a banner image

This topic is: resolved

This topic contains 6 replies, has 2 voices, and was last updated by  David Green 4 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #3398

    David Green
    Participant
    Post count: 6

    First of all, thanks so much for Xi and for all you continue to do.
    Second, please assume that you are speaking to an idiot when replying. I kind of know my way around WP and HTML but I’m no expert and I tend to make things work by a process of trial and error.

    Xi is perfect for the church website that I’ve been trying (and failing) to build for the last twelve months. However, the logo thing doesn’t really work for us because the site is for three churches in a team and we don’t really have different logos.

    I’d like to put a banner image in there instead with the menu items underneath and I’ve seen other church websites using Xi achieve it.

    I just can’t work out how.

    The site at the moment has the banner in the logo spot but it’s reduced its size and doesn’t have it centred and full size and the menu tabs aren’t underneath it.

    I know it probably means doing something clever with a child theme, but I’ve never done one of those before either so any and all help would be much appreciated.

    The site is http://www.stmaryswestmalling.org.uk
    You can see it with “themeloom” as both username and password.

    #3399

    David Green
    Participant
    Post count: 6

    I should add that I’m concerned not to mess about in your code as I’ve done that before with other sites and then found myself branching off from the main as the theme continued to develop and I wasn’t able to keep up.

    #3400

    themeweaver
    Keymaster
    Post count: 730

    OK, first re your last comment. Simple CSS edits can be achieved in the Theme Options page where you can add custom CSS.

    More significant edits are best done using a child theme. See http://themeloom.com/support/framework-codex/developers/creating-a-child-theme/

    HEADER IMAGES

    Yes others have added some custom css. You still need to use the logo but you can create a larger one and customise the css to make fill space and drop menu below.

    See this thread, where someone else has done the same thing: http://themeloom.com/forums/topic/header-images/

    NOTE: this is a responsive theme so images must scale, the theme makes sure they do. So traditional header type images will not work too well. The above thread highlights this issue.

    You are probably best doing this in a child theme.

    #3401

    David Green
    Participant
    Post count: 6

    Thank you so much for the swift response. I really appreciate the help.

    CHILD THEMES

    Okay, I think I’m getting the hang of this. With the link, I created a child theme and (miracle of miracles) worked out how to ensure WP was using it rather than the original LivingOS Xi.

    HEADER IMAGES

    I’m less sure about this one. I did find that previous thread about Header Images (and as a side-point, you might want to think about a search facility on the forum threads… I scrolled through nine pages looking for relevant threads before I posted).

    Two questions really… where am I looking in the CSS for the right bit to make this kind of change and what kind of change do I make? And i I can be cheeky and ask a third question – how do I make an image scale? The banner I’m intending to use is a PNG with a transparent background which I noted was important from some of the other threads but I don’t know if that makes it scalable or not.

    Sorry. I did say you were speaking to an idiot.

    #3402

    David Green
    Participant
    Post count: 6

    I’m getting there… (and probably turning into your least favourite customer)

    I’ve worked out that if I amend #logo and #dropdown-menu in the responsive-1 part of the css, making the width in both cases 100% then that does the basic job.

    My question about making an image scale remains open. 🙂

    #3403

    themeweaver
    Keymaster
    Post count: 730

    You don’t need top make the image scale, the theme does that. As the browser window reduces in size the image with scale down to fit the space available.

    And yes, #logo #dropdown-menu width 100% should do it. You may need to adjust margins/padding too depending on what it looks like with your image.

    But do not edit responsive-1.css. Because when you update your theme you will loose the changes.

    If you add css for #logo and #dropdown in a child theme’s styles.css or in the custom css field in theme options, the default styles will be overridden.

    #3404

    David Green
    Participant
    Post count: 6

    Sorry, yes. I meant that I was putting some of the responsive-1.css in the Child theme’s styles.css and was thus getting the over-ride that we needed.

    It’s getting there now, I think. Thanks – very much appreciate the help.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.