Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #21613

    How can I make a text logo instead of an image? Thanks

    #112455

    Open up header.php and replace:

    echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png');

    with:

    echo "<h3 class='logo'><a href='".home_url('/')."'>My Logo Text</a></h3>";

    and instead of “My Logo Text” use your text.

    #112456

    Hello, changed this and it works well, but the alignment is off, so in the layout.css, I change

    .logo, .logo a{

    float:left;

    padding: 0px;

    position: relative;

    margin: 0px;

    display: block;

    } to

    .logo, .logo a{

    float:left;

    padding: 0px;

    padding-top: 14px;

    position: relative;

    margin: 0px;

    display: block;

    }

    #112457

    It then causes issues in IE, but works well in Chrome. Is there another way I should be tackling this issue? Thanks.

    #112458

    Hey!

    Can you post a link to your website please. I’ll check it with the IE dev console.

    Regards,

    Peter

    #112459
    #112460

    Personally I can’t reproduce this issue – it seems to work on IE8,9 (emulated with the dev console) and 10 just fine. You can try to use conditionals: http://www.quirksmode.org/css/condcom.html to add CSS code to the website which just affects IE browsers. I’d insert it in header.php before the closing head tag. I tagged this thread for the other support staff members – maybe they can reproduce the issue.

    #112461

    Alright. So, I’ve just taken a photo of the text and made that the logo with width of 200px, but now the alignment is all off – and I didn’t adjust any code whatsoever, completely stock.

    http://www.kennethhavinga.com , and ideas?

    #112462

    Hi samforan,

    The space for the logo is about 100px high. So with a 25px high image it sits at the top. You can do something like:

    .logo, .logo a {
    padding-top: 19px;
    }

    Or use a taller image to move it around a bit.

    Regards,

    Devin

    #112463

    Hi,

    One thing I can add is that you can use this instead, but doubt its needed.

    h1.logo {
    float: left;
    padding: 0;
    position: relative;
    margin: 0;
    display: block;
    }

    And from all that , there is not one thing that is actually affecting the logo, except perhaps the float:left, though its affecting things under the logo by a few pixels.

    instead remove your old css (.logo,.logo a) and the one i posted, and use this: (if you can;t remove old css, try leaving it in, though IE is cranky sometimes)

    h1.logo{
    position:absolute;
    right:20px;
    }

    or if that too radical of a look you can try this more conservative approach. Make sure to change the browser size to see how it moves in smaller screen sizes.

    h1.logo{
    position:absolute;
    left: -1px;
    top: 15px;
    }

    Just please add the css to /css/custom.css to the bottom, and there is no need to take anything out of what was there before. I can’t test it on IE unfortunately but if you need to tweak it up or down just change the ‘top:15px’ line.

    Please let us know how it went.

    Thanks,

    Nick

    #112464

    Thanks, used the first approach with the image. Appreciate the help guys!

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

The topic ‘Change Image to Text Logo’ is closed to new replies.