Shifting logo in the header over

Community Forums Forums Design Tips and Tricks Shifting logo in the header over

This topic is: not resolved

This topic contains 14 replies, has 6 voices, and was last updated by  sam33joy 1 year, 4 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #27559

    kathiemt
    Participant
    Post count: 119

    I’m using the Outreach Theme. I can’t see in the css where the header logo is mentioned so I can shift it over. It’s right over to the left and I want it to line up with the start of the menu navbar.

    http://bsbc.org.au/

    Any help is greatly appreciated.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    #27617

    frobn
    Participant
    Post count: 18

    It appears you have the logo image in #header, take it out of #header and put it in the  #title-area

    #27929

    Pinky
    Participant
    Post count: 95

    @frobn – If she puts it in #title-area it will have to be put into style.css and I suspect (tho I could be wrong) that by doing so she will lose the responsive nature of the theme.

    There was just another question on here relating to the same problem with Outreach theme – I told them to make the header width 1080px – but again it wont be responsive (something i didn’t think about with my answer on that post either).

    The image is meant to be in the header. I’ve played with the code and compared it to the demo site – but can’t see where it’s going haywire… sorry Kathie – I so wanted to help another Aussie!


    cheers

    Pinky

    #28072

    bandj
    Participant
    Post count: 184

    multiple solutions and as far as responsive you can adjust them in the responsive section of the css.

    the problem is that your header image is in the #header div which is 100% wide.

    there isn’t such a thing as float: center so you need to change that in your .header-image #title-area

    You could:

    put a width on your #header div.
    take your image out of the #header div and put it in the #title area, maybe change the initial width of your title area or add background-size: contain to it. http://www.w3schools.com/cssref/css3_pr_background-size.asp

     


    #28331

    kathiemt
    Participant
    Post count: 119

    All I did was upload the header image in the control panel. I suppose if I add a blank piece to the left of it it will then move it across above the header. I just need to know specific pixel sizes to do it.

    I don’t want to play around with coding too much – I’m not a programmer and if I hand this site over to someone else at the church to do things with I don’t want to make the issue complicated. Was just hoping there would be a simple way of getting the logo to show where they wanted it to show.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    #28465

    Pinky
    Participant
    Post count: 95

    Kathie can you put the header image back in there for me please, then I’ll give you some code to use


    cheers

    Pinky

    #28489

    kathiemt
    Participant
    Post count: 119

    Thanks, I tried to put it in the header.png file and upload that but it wasn’t showing up at all.

    It’s back up there now. http://www.bsbc.org.au.

    Thank you.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    #28492

    Pinky
    Participant
    Post count: 95

    Kathie are you comfortable editing your style.css?


    cheers

    Pinky

    #28495

    Pinky
    Participant
    Post count: 95

    Kathie if you are happy giving me access to your site i should be able to fix it quick smart for you! I’m in Aust and have nothing better to do with my Sunday afternoon lol


    cheers

    Pinky

    #28501

    Pinky
    Participant
    Post count: 95

    alright – lets try this…

    on line 183 of your style.css change #header to this:

    [css]

    #header {
    background: #090909 url(http://bsbc.org.au/wp-content/uploads/2013/03/ChurchLogox120jpg.jpg) top no-repeat;
    margin: 0 auto;
    height: 120px;
    overflow: hidden;
    width: 1060px;
    }

    [/css]

    line 156 change to this:

    [css]
    body {
    background-color: #000;
    }
    [/css]

    then on line 216 change to:

    [css]

    #header .widget-area {
    float: right;
    width: 420px;
    margin-top: -120px;
    }

    [/css]

    I’d actually recommend installing the plugin My Custom CSS and put all that code in there instead… it will use that code over and above everything else.


    cheers

    Pinky

    #28508

    kathiemt
    Participant
    Post count: 119
    This reply has been marked as private.
    #28509

    kathiemt
    Participant
    Post count: 119

    Woo hoo! Thank you, it worked fine Pinky.


    Virtual Assistant & Nature Photographer
    Kathie Thomas: VADirectoryClick here for Australian images

    #28526

    Pinky
    Participant
    Post count: 95

    Oh sweeeeeet – glad I could help!


    cheers

    Pinky

    #31119

    Sean
    Participant
    Post count: 1

    Not sure if this will help in your situation but this is the way I put a logo to the left of the header and the text I just added some additional padding to give room for the logo.  I put the code in for the header and title area so you can see the whole code.

    #header {
    background: #090909 url(images/header.png) center repeat-y;
    margin: 0 auto;
    min-height: 120px;
    overflow: hidden;
    width: 100%;
    }

    #title-area {
    float: left;
    padding-left: 120px;
    overflow: hidden;
    width: 430px;
    background: url(images/Logo4.png) no-repeat;

    }


    #43212

    sam33joy
    Participant
    Post count: 25

    can you help me how can I add the logo outreach theme? what step I need follow

    sam33joy

    http://www.visioniglesia.com

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

You must be logged in to reply to this topic.