-
AuthorPosts
-
June 27, 2017 at 5:15 pm #813519
Hi Kriesi – Team,
I’d like to use two different header pictures – one on the left and one on the right side. How can i realize that?
Thanks in advice
RSJune 27, 2017 at 5:35 pm #813534Hey led-consult,
Please, may you provide to us your website link?
Best regards,
John TorvikJune 27, 2017 at 5:37 pm #813537This is not really available…the side is under construction.But you can take a look. At the moment i have a pdf from a designer.
BR
RaphaelJune 27, 2017 at 7:25 pm #813574well there is for example the opportunity to insert two images with logo function – each with a different link.
you can see here a Quick solution: https://webers-testseite.de/
not optimized for responsive case : because — sorry no time now.June 28, 2017 at 10:02 am #813724That looks not so bad. How can i implement it into the Enfold theme? header.php?
BR
June 28, 2017 at 11:47 am #813762it is more or less only functions.php of child-theme and a bit css.
if you like to insert an svg or png/jpg it is a bit different:
/** for svgs only ******/ function first_logo($logo) { $logo .= '<span class="logo first-logo"><a href="path to an url1">' ; $logo .= file_get_contents("/wp-content/uploads/logo1.svg"); $logo .= '</a></span>'; return $logo; } add_filter('avf_logo_final_output', 'first_logo'); /** for the normal case of a png or jpgs ******/ function second_logo($logo) { $logo .= '<span class="logo second-logo"><a href="url2" target="_blank">' ; $logo .= '<img src="/wp-content/uploads/logo2.png"/>'; $logo .= '</a></span>'; return $logo; } add_filter('avf_logo_final_output', 'second_logo');
Comment: You see that these images stay a “logo” only a second class (fist-logo, second-logo, etc.) is given to them.
on some reasons it is better to get rid of the logo inserted by enfold options dialog. (z-index, positioning etc.)
if you will place a svg Graphic than a bit more is to be done in quick css!
the width an heights are dependent on your graphics – so you have to play with it.
div .logo { float: none} .logo:first-child img { display: none} .logo img {max-width: 320px} .logo.first-logo {z-index: 3} .logo.second-logo {z-index: 2} .logo.second-logo {width: 100%} .logo.second-logo a {float: right} .logo.first-logo a, .logo.second-logo a {display: inline-block}
and in responsive case (play with the 768px concerning to your logo-images) :
@media only screen and (max-width: 768px) { .logo.second-logo a { float: left } .responsive #top .logo { height: auto } .responsive #top .logo:first-child { display: none } }
June 29, 2017 at 10:24 am #814328Thanks,
i tried this, but now i have the problem the first logo is not visible yet and the menutext is in the picture…
June 29, 2017 at 9:44 pm #814694Hi,
Yea, that is happening because of the modifications amount.
If you need to keep going with those, please consider to hire a freelancer who will be able to help you with all the process.Let us know if there is anything else we can do for oyu.
Best regards,
BasilisJune 30, 2017 at 7:37 am #814836if i could see your site i will do my best.
but with menu on left or right (only if it has 1 or 2 listpoints) this will not work. Only with menu down or over the menu it will be meaningful.the first logo is not visible. Did you insert 2 logos this way or do you have the one by enfold options and added another one by this code?
The css above concerns to my advice that you input 2 Graphics this way and ( .logo:first-child img { display: none} ) displayes the enfold-logo not !- This reply was modified 7 years, 4 months ago by Guenni007.
July 3, 2017 at 9:59 am #815771I did it with you code, but saw an option with enfold too…(in the php)
www1.dr-preissl.at -> this is the sidethank you very much
July 3, 2017 at 12:22 pm #815831hm there must be something going wrong – or you mixed something in addition to my code see your source code:
Click to enlarge images
you see there are some “logos” as child in logo container ( the one of enfold too) and than – i guess from my code an adjacent to logo container.
so please only use one of the methods and than i’ll come back and try to solve the issue.
PS: this is the way my source code looks like with code above:
- This reply was modified 7 years, 4 months ago by Guenni007.
July 3, 2017 at 12:24 pm #815834btw – please tell me the code how you get it in logo container.
July 3, 2017 at 12:26 pm #815838and did you read my comment on header styling. With a navigation right – where should an extra image positioned on the right ?
i think it is only meaningfull with navigation over or under LogoJuly 3, 2017 at 9:08 pm #816056July 4, 2017 at 10:25 am #816229please take my code because it is much easier to handle the positioning of the two images.
Get rid of the code with sub and insert this :function first_logo($logo) { $logo .= '<span class="logo first-logo"><a href="http://www1.dr-preissl.at" >' ; $logo .= '<img src="/wp-content/uploads/2017/06/PRE_Logo_RGB_150_RZ-161x300.png"/>'; $logo .= '</a></span>'; return $logo; } add_filter('avf_logo_final_output', 'first_logo'); function second_logo($logo) { $logo .= '<span class="logo second-logo"><a href="http://www1.dr-preissl.at" >' ; $logo .= '<img src="/wp-content/uploads/2017/06/cropped-PRE_Logo_RGB_150_RZ.png"/>'; $logo .= '</a></span>'; return $logo; } add_filter('avf_logo_final_output', 'second_logo');
- This reply was modified 7 years, 4 months ago by Guenni007.
July 5, 2017 at 8:37 am #816660you can see here a page with that construct and your logo (btw i take the one logo twice – i do not see any difference)
https://webers-testseite.de/kokon/pages/meet-the-team/
(btw.: this is with logo left menu below – it is easier to find the css rules for that )so that is the reason why i have to ask you for the deeper sense behind that – only symetrical reasons?
look to the responsive case if you shrink your browser window to something smaller than 500px .
A construct with two different logos with different links like here : https://webers-testseite.de/
the one link goes to root the other to a new site on a blank target. That makes sense.July 5, 2017 at 12:10 pm #816710Yea thats it – but how i can modify my menu like yours. I must say yours looks much much better ;) Is it possible in the front end or need i modify the css?
Thank you.BR
- This reply was modified 7 years, 4 months ago by led-consult.
July 6, 2017 at 4:53 pm #817352Also – anhand deiner Seite sehe ich ja, dass wir uns wohl auch auf deutsch unterhalten können.
Du musst noch einige Einstellungen verändert haben, was das responsive Verhalten betrifft. Denn wenn du mein Browserfenster verkleinerst, siehst du keinerlei Sprünge bezüglich der Größe.
Das Menu kannst du platzieren wo du willst, links mittig oder rechts. via Quick css – sag wie du es willst. ausserdem hast du in den Enfold Einstellungen wohl die Variante mit den kleinen Separatoren gewählt. – Bei mir jetzt mal nicht – ist Geschmackssache.
Welchen Grund hat es , dass du einmal das eine dann das andere Logo einsetzt? ich sehe keinen Unterschied – ausser dem Größenunterschied !
Weshalb dann auch im Frontend die Logos unterschiedlich groß sind !Du kannst in beide Codes die gleiche Bilddatei setzen
July 6, 2017 at 4:56 pm #817355wenn du auf dem mobilen Menu dein Logo haben möchtest setze mal das hier in Quick css ein:
#mobile-advanced { background-image: url("/wp-content/uploads/2017/06/cropped-PRE_Logo_RGB_150_RZ.png"); background-position: left top; background-repeat: no-repeat; background-size: 10% auto; padding: 15% 0 !important ; }
July 6, 2017 at 6:04 pm #817413mit dem shrinking header könntest Du auch folgendes machen:
bitte scrollen und oder browserwindow verkleinern
July 7, 2017 at 8:41 am #817668Ja deutsch ist auch ok! danke nochmal für die tolle Hilfe, jetzt hab ich eigentlich so ziemlich den dreh raus, wo ich wie was machen muss. Bei der Mobile-Ansicht ist das zweite Bild leider noch nicht sichtbar, muss ich mal schauen… Nur in php bin ich nicht so vertraut muss ich leider gestehen. Der Schrinking header ist cool – wie würde das funktionieren?
BTW: habe das CSS nun ein wenig weiter adaptiert – please take a look :-)
div .logo { float: none}
.logo:first-child img { display: none}
.logo img {max-width: 320px}
.logo.first-logo {z-index: 3}
.logo.second-logo {z-index: 2}
.logo.second-logo {width: 100%}
.logo.second-logo a {float: right}
.logo.second-logo a {padding-top: 40px}
.logo.first-logo a, .logo.second-logo a {display: inline-block}@media only screen and (max-width: 768px) {
.logo.second-logo a { float: left }
.responsive #top .logo { height: auto }
.responsive #top .logo:first-child { display: none }
}#header_main_alternate { border : medium none; }
#header_main_alternate {float: right}
#mobile-advanced {
background-image: url(“/wp-content/uploads/2017/06/cropped-PRE_Logo_RGB_150_RZ.png”);
background-position: left top;
background-repeat: no-repeat;
background-size: 10% auto;
padding: 15% 0 !important ;
}- This reply was modified 7 years, 4 months ago by led-consult.
July 7, 2017 at 9:21 am #817679bitte nimms mir nicht übel – aber es wäre schön, wenn Du dir erstmal mit dir selbst einig bist, was du möchtest – heißt wie dein Header aussehen soll, und wie er reagieren soll, wenn geshrinkt wird bzw . auf kleinen Screens aussehen soll.
Momentan sieht der Header wieder ganz anders auf deiner Seite aus, also – gerne steige ich hier wieder ein, wenn es klar ist wo es hingehen soll.
July 7, 2017 at 9:29 am #817685nehme ich nicht, ist vollkommen legitim. Hab eben auch gestern erst das neue Bild bekommen. Habe dir das layout welches mir zur Verfügung steht in die Mediathek eingefügt – link, hier ist anstatt der “Schlange” das P – es wird aber in Zukunft die Schlange verwendet.
Danke… und sry für die Umstände.
- This reply was modified 7 years, 4 months ago by led-consult.
July 21, 2017 at 6:59 pm #825206Hi,
I will close the topic feel free to create a new one if you need anything else.
Best regards,
Basilis -
AuthorPosts
- The topic ‘Two Header Pictures’ is closed to new replies.