-
AuthorPosts
-
November 14, 2013 at 11:16 pm #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!
ZachNovember 15, 2013 at 12:56 am #188628Hey 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,
JosueNovember 15, 2013 at 1:36 am #189086This reply has been marked as private.November 15, 2013 at 1:38 am #189087This reply has been marked as private.November 15, 2013 at 1:53 am #189089Hi!
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,
JosueNovember 15, 2013 at 1:56 am #189091This reply has been marked as private.November 15, 2013 at 1:59 am #189093This reply has been marked as private.November 15, 2013 at 2:07 am #189094Add this too:
.logo a { max-height: 44px !important; }
Best regards,
Josue -
AuthorPosts
- The topic ‘Logo w subtext exactly like this page’ is closed to new replies.