Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #188600

    Hello,

    How can I accomplish creating a logo with subtext exactly like it’s done with the kriesi logo above? I basically would like my header menu to be exactly the same – with social buttons to righthand side (or anything I choose).

    I’ve created my own logo to be the exact same dimensions as yours (http://kriesi.at/wp-content/themes/kriesi/images/logo.png) and I would like the subtext to disappear when someone scrolls down so it only shows the logo image.

    Any CSS / PHP instructions would be GREATLY appreciated. I’ve tried to reverse engineer this by inspecting elements but have failed miserably to date.

    Thank you!
    Zach

    #188628

    Hey Zach!

    Altought Kriesi already made a statement about that, here’s a hint: this is the CSS that make that behavior:

    /*position logo text*/
    #top .subtext{float:left; position: relative;}
    #top .logo img{float:left;}
    .logo, .logo a{overflow: visible;}
    #top .logo-title{  
    transition: 		opacity 0.4s ease-out;
    -moz-transition: 	opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
    -o-transition: 		opacity 0.4s ease-out;
    font-size: 12px; color: #000; position: absolute; left:7px; top:-7px; opacity: 1; white-space: nowrap; } 
    #top .logo-subtitle{ color: #aaa; top:7px; }
    #top .header-scrolled .logo-title{ opacity: 0; filter: alpha(opacity=0); }

    You’ll also need to alter the HTML of the logo:
    <strong class="logo" style="max-width: 64px; width: auto;"><a href="http://kriesi.at"><img src="http://kriesi.at/wp-content/themes/kriesi/images/logo.png" alt="Support | Kriesi.at - Premium WordPress Themes" style="max-width: 64px; width: auto;"><span class="subtext"><strong class="logo-title">Kriesi.at</strong><strong class="logo-title logo-subtitle">Premium Themes</strong></span></a></strong>

    Regards,
    Josue

    #189086
    This reply has been marked as private.
    #189087
    This reply has been marked as private.
    #189089

    Hi!

    Not a secret, the files that makes most of the custom behavior in this website are JS and CSS, which everyone (with some coding skill) can inspect in the source, the HTML logo is built in the avia_logo function (/framework/php/function-set-avia-frontend.php, line 416), you can replace the avia_logo function in the header.php (line 153) and put the logo as static HTML.

    Regarding making the header smaller, this CSS will do it:

    #header_main .container, .main_menu ul:first-child > li a {
        height: 44px !important;
        line-height: 44px !important;
    }
    .logo img {
        max-height: 44px !important;
    }
    #main {
        padding-top: 44px !important;
    }

    Best regards,
    Josue

    #189091
    This reply has been marked as private.
    #189093
    This reply has been marked as private.
    #189094

    Add this too:

    .logo a {
        max-height: 44px !important;
    }

    Best regards,
    Josue

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Logo w subtext exactly like this page’ is closed to new replies.