- This topic has 11 replies, 3 voices, and was last updated 5 years ago by
.
-
Posts
-
Hi there
I am trying to build a right sidebar (default WP widegtized sidebar) with buttons, in order to achieve something as close as possible to this one built with Elements and Generate Blocks (Url1 sent in private)
(We can’t use GB on sidebar widgets, right?)
I manage to get something done, but I’m struggling to align the SVG icon. Please refer to the last button “Search flights” on the sidebar of this post in my testing site (Url2 sent in private).
This is the code I used to make this button:
<a class="button sidebar" href="https://google.com"><svg aria-hidden="true" role="img" height="1.2em" width="1.2em" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M480 192H365.71L260.61 8.06A16.014 16.014 0 00246.71 0h-65.5c-10.63 0-18.3 10.17-15.38 20.39L214.86 192H112l-43.2-57.6c-3.02-4.03-7.77-6.4-12.8-6.4H16.01C5.6 128-2.04 137.78.49 147.88L32 256 .49 364.12C-2.04 374.22 5.6 384 16.01 384H56c5.04 0 9.78-2.37 12.8-6.4L112 320h102.86l-49.03 171.6c-2.92 10.22 4.75 20.4 15.38 20.4h65.5c5.74 0 11.04-3.08 13.89-8.06L365.71 320H480c35.35 0 96-28.65 96-64s-60.65-64-96-64z"></path></svg> Search flights</a>I had set a CSS class for this button and already costumized it to full width and 35px height.
.button.sidebar { width: 100%; height: 35px; }Problems:
1. Text is not vertically centered within the button
2. Icon is not vertical aligned with text
3. I would like to give the icon some right padding/margin, to have some space between icon and textI am trying to avoid using Fontawesome icons and Dashicons dont have the ones I need.
Can you point me in the right direction (CSS?) to get that text and SVG icon properly aligned?Or… would you take a different aproach to this?
Thanks,
André
Customer Support
Hi Andre,
Is there any specific reason you have to build the content in a widget?
Block element can be hooked in
before_right_sidebar_content, so the element will appear before all the widgets.And we can use CSS to reorder the widgets and elements inside the sidebar.
Let me know 🙂
Hi,
Try to set the line-height of the font to 0. If this doesn’t work then it’s because all fonts come with their default line height which some adds additional space on the bottom. Not all fonts are suitable for interfaces. The only way to fix this is by re-centering the icon within its box in a tool like Illustrator or Affinity, use an appropriate font for Ui design, or wait for a new CSS feature (line-height-trim) that crops the line height from the font.
Hi Ying!
I’ve decided to build the sidebar content in a widget because what we have discussed in this topic https://generatepress.com/forums/topic/elements-custom-block-sidebars-override-rules/
I need a entire site sidebar + several category posts sidebars (that overrides the entire site sidebar). And after that discussion I figure that I have (or is simpler) to use the default WP widgets sidebar as my entire site sidebar, or else I would have to set exclusion rules one by one, so that this sidebar wont show in the category posts sidebar.
If I use the hook you suggested, I’ll the exact same problem… right?
Or am I missing something? 🙂
Thanks,
André
Ah right, sorry didn’t connect these two topics together, my bad 😛
So to align text/icons vertically to center, try this CSS:
.button.sidebar { display: flex; align-items: center; }For problem 3, currently, the icons are added in different ways, can you make sure they are all added in the same way, then we can offer CSS to that one.
Let me know 🙂
Hello Ying! No worries. I opened a different topic because, being a different issue, I though you guys prefer like this.
The CSS to align text/icons vertically to center worked well, thanks!
Meanwhile, I’ve deleted all other testing buttons (I was testing Font Awesome) and you can condider only the ones showing now. I’m not sure I’ve added the icons in the right way (it was trial an error), but it looks they are working well… 🙂
I guess I just need that right padding/margin now (Problem 3).
Thanks,
André
I guess I just need that right padding/margin now (Problem 3).
Yes, correct 🙂
Glad you figured it out!
Not yet… 🙂 I need the icon right padding/margin. Can you please provide that CSS for me, as you mentioned in your previous message?
ThanksHi Ying,
I have built the buttons in my live site (I was working in a testing site before).
https://www.tempodeviajar.com/revolut-n26-melhores-cartoes-bancarios-para-viajar/Same coding/CSS and buttons are looking good.
Button code:
<a class="button sidebar" href="https://www.tempodeviajar.com/go/pesquisar-voos/"><svg aria-hidden="true" role="img" height="1.2em" width="1.2em" viewbox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M480 192H365.71L260.61 8.06A16.014 16.014 0 00246.71 0h-65.5c-10.63 0-18.3 10.17-15.38 20.39L214.86 192H112l-43.2-57.6c-3.02-4.03-7.77-6.4-12.8-6.4H16.01C5.6 128-2.04 137.78.49 147.88L32 256 .49 364.12C-2.04 374.22 5.6 384 16.01 384H56c5.04 0 9.78-2.37 12.8-6.4L112 320h102.86l-49.03 171.6c-2.92 10.22 4.75 20.4 15.38 20.4h65.5c5.74 0 11.04-3.08 13.89-8.06L365.71 320H480c35.35 0 96-28.65 96-64s-60.65-64-96-64z"></path></svg> Pesquisar voos</a>CSS:
.button.sidebar { width: 100%; height: 55px; background-color: #00a9cf; display: flex; align-items: center; }Now, I believe I’m only missing some CSS to:
– Center align text/icon inside button (it’s left aligned now)
– Set some ight margin after the icons, to have some space between icon and text
– Change button hover background color to #F37044I’m trying to replicate these ones I made with GB in Elements https://www.tempodeviajar.com/clima-em-marrocos-e-quando-ir/
Can you help with that?
Thanks a lot!
– Center align text/icon inside button (it’s left aligned now)
I feel like left aligned looks better.. but here’s the CSS to align them to center.
.inside-right-sidebar .textwidget.custom-html-widget a { justify-content: center; }– Set some ight margin after the icons, to have some space between icon and text
.inside-right-sidebar .textwidget.custom-html-widget a svg { margin-right: 20px; }– Change button hover background color to #F37044
.button.sidebar:hover { background-color: #F37044; }Let me know 🙂
Thanks Ying, those CSS worked just fine!
I feel you about the left alignment. Actually, until now I had them aligned left. With this changes I’m making I saw them center aligned and I liked. But… I´ll ask a couple of more people and maybe I’ll keep them left! 🙂
Thanks for your help and opinion.
Cheers,
André
No problem 🙂
Glad to help!
- You must be logged in to reply to this topic.
