- This topic has 18 replies, 2 voices, and was last updated 7 years, 1 month ago by Leo.
-
AuthorPosts
-
February 10, 2017 at 2:22 pm #277132Alessia
Hello,
I want to add some text with icons in my header area like on this site (which also uses GP):
http://www.bilder-upload.eu/show.php?file=00423e-1486765245.pngI tried to add this with widget, but it looks different.
How can I do this?
Thank you very much
February 10, 2017 at 2:31 pm #277134LeoStaffCustomer SupportHi Alessia,
The site you linked is not using GP and I don’t see any icons in the header?
I think what you are looking for is Font Awesome icons. Some related info here:
https://docs.generatepress.com/article/adding-icons-to-menu-items/Let me know if this helps.
February 10, 2017 at 2:34 pm #277137AlessiaHi Leo,
the site which I linked is a image uploader. The screenshot is in the middle (it is grey and not so good to see).
This text area with icons is placed above the menue, on the right side.
I hope you can understand what I mean. 🙂February 10, 2017 at 2:49 pm #277141LeoStaffCustomer SupportAhh I see.
Can you link me to the actual site with that header?
February 10, 2017 at 3:16 pm #277146AlessiaSure, here is the site: http://bit.ly/2lthpUX
Thank you!
February 10, 2017 at 3:48 pm #277155LeoStaffCustomer SupportYup the icons are just using font awesome like I mentioned above.
The header is built with the before header content hook and the three items are entered as a list with some additional CSS style.
Let me know if you need more info.
February 10, 2017 at 4:07 pm #277168AlessiaOk, thank you. I’m not so fit with this.
What do you mean with “before header content hook”?
And what should I add as additional CSS Style?
I found this code with my firebug:
.header-info li {
display: inline-block;
letter-spacing: normal;
margin-right: 35px;
text-align: left;
vertical-align: top;
width: 210px;
}It would be very great, if you can help me a little bit.
Thank you!
February 10, 2017 at 5:38 pm #277218LeoStaffCustomer SupportGP Hooks is an awesome feature: https://docs.generatepress.com/article/hooks-overview/
If you want the same thing that site has, then try adding something like this in the before header content hook
<div class="grid-33"> Site logo image here </div> <div class="grid-66"> <ul class="header-info list-unstyled"> <li> <div class="header-info-icon"> <i class="fa fa-check-square fa-2x"></i> </div> <div class="header-info-text"> header info text #1 </div> </li> <li> <div class="header-info-icon"> <i class="fa fa-check-square fa-2x"></i> </div> <div class="header-info-text"> header info text #2 </div> </li> <li class="no-margin"> <div class="header-info-icon"> <i class="fa fa-check-square fa-2x"></i> </div> <div class="header-info-text"> header info text #3 </div> </li> </ul> </div>
Then you can use firebug to find the CSS for each class.
Let me know if you need more help 🙂
February 11, 2017 at 4:56 am #277317AlessiaHi Leo,
thank you for your help! 🙂
I tried to make it what you said.
Here is the result at now: http://www.lottodeal.net/Now I need to place the third part to the right place and to place the icons to left side.
How can i make it?Could you please look at this?
Here is also the code that I put to the GP hook:
<div class="grid-33"> <img class="alignnone size-full wp-image-106" src="http://www.lottodeal.net/wp-content/uploads/2017/02/lottodeal_d00b_02a-1-e1486438667937.png" alt="" width="270" height="103" /> </div> <div class="grid-66"> <ul class="header-info list-unstyled"> <li> <div class="header-info-icon"> <i class="fa fa-check-square fa-2x"></i> </div> <div class="header-info-text"> <span>Geprüfte Anbieter</span> <p> Alle Anbieter auf Sicherheit <br> und Seriosität geprüft </p> </div> </li> <li> <div class="header-info-icon"> <i class="fa fa-trophy fa-2x"></i> </div> <div class="header-info-text"> <span>Unabhängiger Vergleich</span> <p>Objektive und ausführliche Testberichte von Experten</p> </div> </li> <li class="no-margin"> <div class="header-info-icon"> <i class="fa fa-users fa-2x"></i> </div> <div class="header-info-text"> <span>Kundenmeinungen</span> <p>Erfahrungsberichte und Bewertungen echter Kunden</p> </div> </li> </ul> </div>
And this I put as additional CSS:
.header-info li { display: inline-block; letter-spacing: normal; margin-right: 35px; text-align: left; vertical-align: top; width: 210px; } .no-margin { margin: 0 !important; } .list-unstyled { list-style: outside none none; padding-left: 0; text-align: left; } .header-info { font-size: 12px; line-height: 16px; margin: 0 -35px 0 0; padding-top: 10px; } .header-info-text span { font-size: 14px; font-weight: 700; } .fa-check-square::before { content: "ï…Š"; } .header-info-icon i { color: #ef4836; } .fa-2x { font-size: 2em; } .fa { display: inline-block; font-family: FontAwesome; font-feature-settings: normal; font-kerning: auto; font-language-override: normal; font-size-adjust: none; font-stretch: normal; font-style: normal; font-synthesis: weight style; font-variant: normal; font-weight: normal; line-height: 1; text-rendering: auto; } .header-info-text p { margin-bottom: 0; }
February 11, 2017 at 5:13 am #277319AlessiaAs I see, I added the logo in the wrong way… Maybe we can do this 3 things at first. Then I will insert the logo.
Thank you very much for your help!!
February 11, 2017 at 6:41 am #277351LeoStaffCustomer SupportLooks like you are missing these two classes:
.header-info-icon { float: left: margin: 0 14px 0 0; } .header-info-text { overflow: hidden; }
and you shouldn’t need any of classes that start with
.fa
as those are from the font awesome style sheet.Seems that you are getting a hang of using Firebug so you really just need to make sure both sites look identical from Firebug 🙂
February 11, 2017 at 6:54 am #277356AlessiaHi Leo,
thank you, I insert these two classes, but it looks like bevore.
I have now this code in the GP Hook:
.header-info li { display: inline-block; letter-spacing: normal; margin-right: 35px; text-align: left; vertical-align: top; width: 210px; } .no-margin { margin: 0 !important; } .list-unstyled { list-style: outside none none; padding-left: 0; text-align: left; } .header-info { font-size: 12px; line-height: 16px; margin: 0 -35px 0 0; padding-top: 10px; } .header-info-text span { font-size: 14px; font-weight: 700; } .header-info-icon i { color: #ef4836; } .header-info-text p { margin-bottom: 0; } .header-info-icon { float: left: margin: 0 14px 0 0; } .header-info-text { overflow: hidden; }
February 11, 2017 at 7:06 am #277358LeoStaffCustomer SupportThose codes are CSS and shouldn’t be added in hooks.
Adding CSS: https://docs.generatepress.com/article/adding-css/February 11, 2017 at 7:09 am #277360LeoStaffCustomer SupportAlso there is a syntax error in
.header-info-icon
class. Should be a semicolon afterleft
February 11, 2017 at 7:41 am #277372AlessiaSorry, it was my mistake 🙂 I added the code not in GP Hooks, but in Additional CSS. 🙂
And it looks now good. 🙂 The issue for the position of the third customer value was the header space right of 220px in the customizer. So I changed it to 5px and the third value is now in the right position. 🙂And how can I disable this three customer value for the mobile version? Because it tooks there a lot of space.
Thank you very much for your help, Leo! You are my hero!!
-
AuthorPosts
- You must be logged in to reply to this topic.