- This topic has 17 replies, 3 voices, and was last updated 3 years, 1 month ago by
.
-
Posts
-
Hello guys how are you? I wanted to make the Youzer widgets windows and the theme one match perfectly. As you can see from the picture they’re a bit different. I would like the Gwangi one to be the same as the Youzer one.
How can I change the style to properly match the Youzer one? The border and the shadow of the widgets are identical but the Gwangi version doens’t have the icon, the font size is different and the line under the text is different too…
Please help me <3!
Very great, thank you! I hope you’re doing well too.
The apparence of widget title is standard design with our theme and as this is not breaking the page, changing this is usually considered customization work.
But as your request seems justified to us, we have decided to include this change in our todo-list. Youzer and Gwangi widgets should share the same appearance!While waiting for a next update, simply add the following code snippet to your website:
/* Basic widget title style */ #secondary-left .widget .widget-title, #secondary-right .widget .widget-title { border-bottom: 1px solid rgba(0, 0, 15, 0.05); font-size: .9rem; position: relative; width: auto; margin: -35px -35px 35px -35px; padding: 20px 35px; display: block; line-height: 1em; } #secondary-left .widget, #secondary-right .widget { padding: 35px; } /* Remove default widget title separator */ #secondary-left .widget .widget-title:after, #secondary-right .widget .widget-title:after { content: none; } /* Style icon in widget title */ #secondary-left .widget .widget-title i, #secondary-right .widget .widget-title i { width: 35px; height: 35px; line-height: 35px; margin-right: 10px; text-align: center; background-color: rgba(0, 0, 15, 0.05); border-radius: 100%; display: inline-block; -webkit-font-smoothing: antialiased; }To add this CSS code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer.
Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”. Pasting your code snippet there should do the trick for you.Please take into account that this is not possible to add an icon in the title of WP widgets (WordPress removes any html code that could be placed in this field). So you can’t include a custom icon like Youzer does. Nevertheless, after a quick search we found an article explaining how to achieve this: https://addicted2web.zendesk.com/hc/en-us/articles/360028814751-Adding-icons-to-widget-titles
To add this PHP code snippet to your site, we recommend that you use the Code Snippets plugin (https://wordpress.org/plugins/code-snippets/).
If you have never activated this plugin, please read the following post:As we have never tested this solution, please bear in mind that that we cannot be held responsible if it doesn’t work :).
I hope this helps you!
Cheers,
Hi thank you very much for taking my comment as an advice to improve your theme. I really like it and I’m glad I am contributing for improving.
Anyway I tried the code straight away but apparently it doesn’t work. I put it in the additional css field but nothing changes. Any ideas?
After checking your site, It seems that there is a typo in your custom style (cf. screenshot).
Could you try to remove the line you write before the snippet I gave you yesterday?
Somewhere along the line “.nav li ul {…”Thank you in advance.
Regards,
Oh yeah I used this code:
.nav li ul { width: 280px !important; /* Width of the dropdown menu */to make the witdh of my navigation bar submenu larger. (this is something you should consider adding as customizable too imo)
Anyway I made all the changes you suggested and I can confirm that the snippet plugin seems to be working perfectly as you can see from the picture. <3
The only problem now it’s that the 2 widget titles are still not perfect. I put them together in Photoshop and I noticed the following differences:
> The gwangi widget font is not as thin as the original youzer
> The space between the icon and the border of the window is 5 pixels off
> The line under the text and the icon is off by 10px
> The margin from the left of the border is also 10px offI reckon we should change something in the code?
You’re right!
Here is the updated code snippet :
/* Basic widget title style */ #secondary-left .widget .widget-title, #secondary-right .widget .widget-title { border-bottom: 1px solid rgba(0, 0, 15, 0.05); position: relative; width: auto; margin: -25px -25px 25px -25px; padding: 15px 25px; display: block; font-size: 13px; font-weight: 400; line-height: 22px; letter-spacing: initial; } #secondary-left .widget, #secondary-right .widget { padding: 25px; } /* Remove default widget title separator */ #secondary-left .widget .widget-title:after, #secondary-right .widget .widget-title:after { content: none; } /* Style icon in widget title */ #secondary-left .widget .widget-title i, #secondary-right .widget .widget-title i { width: 35px; height: 35px; line-height: 35px; margin-right: 10px; text-align: center; background-color: rgba(0, 0, 15, 0.05); border-radius: 100%; display: inline-block; -webkit-font-smoothing: antialiased; font-size: 13px; }Regards,
Thank you very much, now everything is perfect except 2 things:
the font weight was slightly thinner than the youzer so I set font-weight: 400; to 600 and matches perfectly.Now the last problem is that the Gwangi title is 1 pixel off compared to the Youzer one (I double checked on Photoshop as you can see from the picture)
I didn’t know what to change in the code (cause I am not really a code expert) so help please. <3 We’re gonna make it perfect!!
To slightly update the text line spacing, you can change the value of the “line-height” (22px to 37px-38px maybe?).
Cheers,
ok I set the line height to 37px and the placement of the text is perfect but now the line under the text has moved down by 2 pixels and the icon has moved down by 1 pixel.
If I am not making this perfect my soul is never gonna be at ease lol
Here is the updated code snippet to get rid of this 1px from hell 😉 :
/* Basic widget title style */ .yz-widget .yz-widget-title, #secondary-left .widget .widget-title, #secondary-right .widget .widget-title { border-bottom: 1px solid rgba(0, 0, 15, 0.05); position: relative; width: auto; padding: 15px 25px; display: block; font-size: 13px; font-weight: 600; line-height: 22px; letter-spacing: initial; } #secondary-left .widget .widget-title, #secondary-right .widget .widget-title { margin: -25px -25px 25px -25px; } #secondary-left .widget, #secondary-right .widget { padding: 25px; } /* Remove default widget title separator */ #secondary-left .widget .widget-title:after, #secondary-right .widget .widget-title:after { content: none; } /* Remove default Youzer widget border */ .yz-widget .yz-widget-head { border-bottom: none; } /* Style icon in widget title */ #secondary-left .widget .widget-title i, #secondary-right .widget .widget-title i, .yz-widget .yz-widget-title i { width: 35px; height: 35px; line-height: 35px; margin-right: 10px; text-align: center; background-color: rgba(0, 0, 15, 0.05); border-radius: 100%; display: inline-block; -webkit-font-smoothing: antialiased; font-size: 13px; }Cheers,
I was about to give you guys an applause but then…
Everything is perfect now but the text is 1px off site upwards.
Thank you for your patience. I really want to make this perfect to improve your theme as well. <3
Honestly I don’t know where this 1 pixel of difference can come from as the code that is applied to both titles is identical.
It can come from several external sources such as the typography chosen or the font smoothing applied by your browser and/or your OS.If it makes you feel any better, the perfect pixel hasn’t been really been a priority and that’s almost impossible with all types of devices, displays and browser/webviews on the market.
What matters most is the visual consistency and now this is the case!Regards,
Thank you for reassurance on the fact both codes are identical. You’re right though about the visual consistency. That’s why I was keen on making this perfect. Cheers <3
<3 no worries
Hello guys how you doing? I am replying to this topic because I am still building my website (if it’s not perfect I am not releasing it lol)
Anyway I am still having the width problem I was talking about in this topic:
https://support.themosaurus.com/forums/topic/how-to-edit-widgets-width-to-match-the-youzer-plugin-ones/Everything is obviously updated at the latest version and I tried to remove the code you guys given me in this topic but with no luck.
The widgets style still look different compared to the Youzer one.
How can I fix this?
PS: Before you ask, it’s not a cache problem. The width of both Youzer and the theme are still different.
Thank you for bring these issues to our attention. We’re glad to answer any question related with the setup of our theme.
However, it very difficult for us to provide the best support possible and to keep track of issues and their resolution if you so many questions are asked in the same topic.
Moreover, it’s easier for us to share the resolution for a single issue with other members of our community facing the same problem.So, could you move your questions into a different topic, please?
By doing this, you will be making a great contribution to this forum, and we thank you very much for that! 🙂Thank you.
We have just released a new update of Grimlock fo BuddyPress. Updating this plugin to the latest version should fix this issue.
After the update, the problem should now be fixed. However, you might still be seeing the issue because your browser cache is showing you an older version of the page (browsers do that to load pages faster). To see that the issue is resolved you will need to empty your browser cache and reload the page. If you want to read more on what browser cache is and how to clear it, here is an article that might help you:
https://www.lifewire.com/how-to-clear-cache-2617980Kindest regards,
The topic ‘Youzer widgets and Gwangi (youzer version) widgets don’t match exactly’ is closed to new replies.
