In regards to the COVID-19 situation

Your support team is currently doing their best to offer the best support possible despite the current COVID-19 situation. However during these exceptional circumstances, please note that you should expect a response time of 2-3 business days, until further notice.Rest assured that we will still do our best to handle your requests as soon as possible! Everyone stay safe and healthy! 😷

Youzer widgets and Gwangi (youzer version) widgets don’t match exactly

Find Answers and Get Support Forums Gwangi – PRO Multi-Purpose Membership, Social Network & BuddyPress Community Theme Theme Customizer Widgets Youzer widgets and Gwangi (youzer version) widgets don’t match exactly

Waiting for Themosaurus team
Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • SEATSforDEPARTURE
    Participant
    • 10 Topics
    • 40 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!

    Jean-Pascal
    Moderator
    Themosaurus Support
    • 0 Topics
    • 614 Posts

    Hi @seatsfordeparture,

    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:

    Adding Custom PHP Without Changing Your Child Theme

    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,

    SEATSforDEPARTURE
    Participant
    • 10 Topics
    • 40 Posts

    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?

    Jean-Pascal
    Moderator
    Themosaurus Support
    • 0 Topics
    • 614 Posts

    Hi @seatsfordeparture,

    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,

    SEATSforDEPARTURE
    Participant
    • 10 Topics
    • 40 Posts

    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 off

    I reckon we should change something in the code?

    Jean-Pascal
    Moderator
    Themosaurus Support
    • 0 Topics
    • 614 Posts

    Hi @seatsfordeparture,

    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,

    SEATSforDEPARTURE
    Participant
    • 10 Topics
    • 40 Posts

    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!!

    Jean-Pascal
    Moderator
    Themosaurus Support
    • 0 Topics
    • 614 Posts

    Hi @seatsfordeparture,

    To slightly update the text line spacing, you can change the value of the “line-height” (22px to 37px-38px maybe?).

    Cheers,

    SEATSforDEPARTURE
    Participant
    • 10 Topics
    • 40 Posts

    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

    Jean-Pascal
    Moderator
    Themosaurus Support
    • 0 Topics
    • 614 Posts

    Hi @seatsfordeparture,

    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,

    SEATSforDEPARTURE
    Participant
    • 10 Topics
    • 40 Posts

    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

    Jean-Pascal
    Moderator
    Themosaurus Support
    • 0 Topics
    • 614 Posts

    Hi @seatsfordeparture,

    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,

    SEATSforDEPARTURE
    Participant
    • 10 Topics
    • 40 Posts

    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

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 1746 Posts

    Hi @seatsfordeparture,

    I’m glad to read that @themopteryx has been able to help you! 🙂

    Best,

    SEATSforDEPARTURE
    Participant
    • 10 Topics
    • 40 Posts

    <3 no worries

    SEATSforDEPARTURE
    Participant
    • 10 Topics
    • 40 Posts

    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.

    Manathan
    Keymaster
    Themosaurus Support
    • 0 Topics
    • 1746 Posts

    Hi @seatsfordeparture,

    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.

Viewing 17 posts - 1 through 17 (of 17 total)

You must be logged in to reply to this topic.

Troubleshooting Demo Imports

You're trying to setup your theme but you're experiencing errors when importing the demo content? Or you've just followed the setup guide but your website doesn't look exactly like our demo? These are common issues for which you can find easy and quick fixes.

Happy With our Support So Far?

Feel free to review our theme on Themeforest! It helps us making our products more known to new potential customers, which allow us more time to improve the quality and develop new features. #SharingIsCaring ❤️