-
Posts
-
I’m trying to follow
but this does not seem to work. What I would have expected is that next to my logo a text appears, But is not true.
I have in my Enfold Child Theme:
<?php /* * Add your own functions here. You can also copy some of the theme functions into this file. * WordPress will use those functions instead of the original functions then. */ add_filter('avf_logo_subtext', 'kriesi_logo_addition'); function kriesi_logo_addition($sub) { $sub .= '<h1>Company Name</h1>'; return $sub; }Any hints what I’m missing? Does the hint still work with 4.1.2?
Hi kwanumzen!
You may need to add some additional custom CSS code. Can you please post a link to your website and a screenshot showing the changes you would like to make? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.
Cheers!
Yigitone thing among others is that you have to set the overflow visible rule for logo – because otherwise it may be in the correct position but it is not seen:
#top .logo, #top .logo a { overflow: visible; }the rest is positioning of the subtext. So it might be good to have the real sitze of you to give you an advice
@Guenni007: Thx for the tip cuz this was really my initial problem :-/
I placed some pics on Dropbox. The WebSite is currently under construction, ie. offline – but I think my pics give a quite reasonable idea what I wanna achieve.
I have a Logo and a Text (as a placeholder for company-name). Currently we merged them into on pic since we did not find a way to add the text right to the Logo (as HTML-text). And this I thought could be achieved by the Subtext. Seems like not – but perhaps there is a setting.
The other thing I wanna ask is – if I set it as a HTML-text – than i hope that I could manage the text-size (of the Logo-name & menu-items) depending on the screen-size. I.e. if the screen size is below a limit ==> set the font-size for these two items to e.g. 14 px instead of 18px. (to avoid overlapping as shown on the screenshots)
Anhand der bilder sehe ich, dass wir uns auch gerne deutsch unterhalten können.
Verstehe ich das richtig, dass du als Bildmarke (Logo) jetzt das Symbol und den Schriftzug Zen Mediation hochgeladen hast?
Und via functions.php dann Company Name als Zusatz lädst?Warum machst du es nicht so wie hier an Board mit dem Kriesi K. siehe oben – scroll mal ( das Verschwinden der Schriften muss nicht sein – ist aber auch elegant.
Ich mache das in dem Fall immer über den WordPress Titel und die WordPress Beschreibung:
add_filter('avf_logo_subtext', 'kriesi_logo_addition'); function kriesi_logo_addition($sub) { $sub .= "<span class='logo-title'>"; $sub .= get_bloginfo( 'name', 'display' ); $sub .= "</span>"; $sub .= "<span class='logo-title logo-subtitle'>"; $sub .= get_bloginfo( 'description', 'display' ); $sub .= "</span>"; return $sub; }zu dem Überlappungsproblem kannst du dich entscheiden:
Das Menu einstellen, dass es am richtigen Punkt überspringt. Heißt : messen wann es nötig ist und den Sprungpunkt danach einstellen.
Lösung wie oben – die Schriften langsam verschwinden zu lassen ( beim Scrollen – bei shrinking header) und bei kleineren Bildschirmen.Um die Menu-Schrift zu beeinflussen ( du kannst ja auch das padding was verändern) :
hier mit einem sogenannten Media Query bei einer Screenweite zwischen 768 und 990 :
btw. ich schreibe diese Media-Queries meist ans Ende meiner Quick css@media only screen and (min-width: 768px) and (max-width: 989px){ .av-main-nav > li > a { font-size: 12px; font-weight: 400; padding: 0 10px } }Danke für den Vorschlag (bzw. Vorschläge). Problem bleibt nach wie vor, dass der Titel (z.B. CompanyName) bzw. BlogInfo (oder was auch immer) unter dem Logo erscheinen – wie in den Screenshots – leider nicht rechts vom Logo. Ähhh…. wie ändere ich den Teil so, dass er rechts davon erscheint? Auch im Header von K. erscheint das Logo und rechts die Schrift… Hmmm… Irgendwie hat das Image (bzw. Logo) den Effekt, dass es zwei zeilig dargestellt wird :-/
Bzgl. Schrift-Größe muss ich noch testen (bzw. überlegen), was praktikabel erscheint. Danke trotzdem für den Hinweis.
ohne die Seite selbst zu sehen – fast unmöglich einen Vorschlag zu machen. Wenn du lieber auf einen Mod wartest – auch ok.
Kriesi oben hat eher meinen Code genutzt, dort sind zwei Zeilen eingefügt worden (logo-title und logo-subtitel) – deshalb meine Frage – dein logo ist Symbol + Zen Mediation als Bild und dann “Company Name” hinzugefügt ?
aha… ich schreibe mal weiter in Englisch – für den Fall der Fälle ;-)
After a brief discussion with Guenni007 I made little changes – but did not bring the desired result. I have uploaded more screenshots to the same folder which reflect the current situation. I tried to change the style directly within Chrome but the content remains as a two line display. Most likely some classes are… So I have no clue what to change that the title appears in one line :-( Hints?
see my solution : https://webers-testseite.de/
– but with your Text “Zen Meditation” as logo-title and the other is the logo-subtitle.
There are a lot of possibilities to not have the overlapping.
but as i said without a real page only with screenshots it is not possible. this is my code :add_filter('avf_logo_subtext', 'kriesi_logo_addition'); function kriesi_logo_addition($sub) { $sub .= "<span class='logo-title'>"; $sub .= get_bloginfo( 'name', 'display' ); $sub .= "</span>"; $sub .= "<span class='logo-title logo-subtitle'>"; $sub .= get_bloginfo( 'description', 'display' ); $sub .= "</span>"; return $sub; }so you only have to input via customizer the WordPress site name and the wordpress sloagan. These are then the headings
css for quick.css ( in case the logo is at 120px height):
.logo img{float: left} #top .logo, #top .logo a {overflow: visible } #top .subtext {float: left; position: relative} #top .logo-title { transition: opacity 0.4s ease-out 0s; -moz-transition: opacity 0.4s ease-out; -webkit-transition: opacity 0.4s ease-out; -o-transition: opacity 0.4s ease-out; color: #306066; font-size: 40px; font-family: "Caveat" !important; font-weight: bold !important; left: 7px; opacity: 1; position: absolute; top: -12px; white-space: nowrap; } #top .logo-subtitle { color: #888 !important; font-family: "Caveat" !important; font-size: 24px !important; left: 10px; top: 18px !important; font-weight: normal; } /** get rid of that if you don't like to get rid of logo headings by scrolling - Kriesi Solution */ #top .header-scrolled .logo-title {opacity: 0; filter: alpha(opacity=0)}and to get rid of text on very small screens:
@media only screen and (max-width: 520px){ #top .logo-title {opacity: 0; filter: alpha(opacity=0)} }if you get it – i will restore my old solution
if you don’t like the solution with blog info name and description you can use a bit shorter code than in your screenshot 4/7
add_filter('avf_logo_subtext', 'kriesi_logo_addition'); function kriesi_logo_addition($sub) { $sub .= "<span class='logo-title'>first line</span>"; $sub .= "<span class='logo-title logo-subtitle'>Another custom text line</span>"; return $sub; }Hi,
Please let us know if @guenni007‘s solution fixes the issue which I’m sure it will.
Best regards,
IsmaelHi,
thx to @guenni007 – the solution works – especially since I do NOT need subtext. The two liner does not work – but I do not need it (right now).
You could close this ticket and thx again to @guenni007
roland
Danke!
Hi Roland,
Great, glad you got it working and thanks @guenni007 for helping out as usual :-)
Please open a new thread if you should have any further questions or problems.
Best regards,
Rikard
- The topic ‘Add subtext to logo’ is closed to new replies.