WordPress.org

Forums

[resolved] How to make two widgets look like one (25 posts)

  1. thefreelancetranslators
    Member
    Posted 2 years ago #

    This is my first web so I'm quite lost. I'm trying to "merge" the widget titled "Find a Translator" with the one bellow (the one with the scroll bar).

    How can I do it?

    Thanks.

  2. michael.mariart
    Member
    Posted 2 years ago #

    It can be done with some CSS work. You'll need to modify the rules for the two elements (as they have ID's that should be easy to do) so that you can remove the bottom line from the top one and the top line from the bototm one, then remove the spacing between them and you'll be set.

  3. thefreelancetranslators
    Member
    Posted 2 years ago #

    Thanks for answering. I have tried this for the widget on top

    #black-studio-tinymce-3 {
    border-bottom: none;
    }

    ... it doesn't work, any suggestion?

  4. Andrew
    Forum moderator
    Posted 2 years ago #

    Where are you entering the CSS?

  5. thefreelancetranslators
    Member
    Posted 2 years ago #

    In the custom CSS styles.

  6. Andrew
    Forum moderator
    Posted 2 years ago #

    Spot the syntax error ;)

    #black-studio-tinymce-3 {
     padding-top: 0;
     padding-bottom: 0
     border-bottom: none;
    }
  7. thefreelancetranslators
    Member
    Posted 2 years ago #

    I have changed it to:

    #black-studio-tinymce-3 {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    }

    Is that what you meant? I'm hopeless... still doesn't work.

  8. Andrew
    Forum moderator
    Posted 2 years ago #

    Add that style right at the bottom of your other styles, it looks like it's being overridden because it's too high up in the Custom CSS.

  9. thefreelancetranslators
    Member
    Posted 2 years ago #

    Sorry for being such a pain, but it didn't work...

  10. Andrew
    Forum moderator
    Posted 2 years ago #

    Are you using a Child Theme as well as Custom CSS?

  11. thefreelancetranslators
    Member
    Posted 2 years ago #

    I'm not sure about that (actually, I have no idea about that) How can I know?

  12. Andrew
    Forum moderator
    Posted 2 years ago #

    Look in your /wp-content/themes/ directory for a theme named responsive-labvidz-free. You ought to be adding styles in the Child Theme's stylesheet.

  13. thefreelancetranslators
    Member
    Posted 2 years ago #

    Probably this is not what you meant, but I have now added styles in the labvidz-custom.css and it remains the same.

  14. Andrew
    Forum moderator
    Posted 2 years ago #

  15. thefreelancetranslators
    Member
    Posted 2 years ago #

    I know you're about to tell to get to ####, and I would understand, but how do I do that?

  16. Andrew
    Forum moderator
    Posted 2 years ago #

    Have you access to the files and folders of your website?

    By the way, don't let your presuppositions of how volunteers will react stop you from asking questions. It's in the interest of all volunteers to keep this forum friendly.

  17. thefreelancetranslators
    Member
    Posted 2 years ago #

    No (that I know...) would you be so kind to tell me how to do it, please?

  18. Andrew
    Forum moderator
    Posted 2 years ago #

    Sure, ask your hosts for your FTP (File Transfer Protocol) credentials.
    Then use FTP software like FileZilla, enter your credentials in the software and you should then have access to the files and folders of your website.

  19. paulwpxp
    Font hero
    Posted 2 years ago #

    What's the point of making 2 widgets and try to make them look like one ?

    If you need 1 widget, then go make 1 widget.

    Go to Appearance > widgets and find widget with title "Find A Translater" then copy everything inside, then open another widget (right below the first one) and paste what copied earlier on the top of what's already there, on this widget give it a title "Find A Translater", save this widget, and delete the first one.

    That's all you need.

  20. thefreelancetranslators
    Member
    Posted 2 years ago #

    What's the point of making 2 widgets and try to make them look like one ?

    If you need 1 widget, then go make 1 widget.

    Go to Appearance > widgets and find widget with title "Find A Translater" then copy everything inside, then open another widget (right below the first one) and paste what copied earlier on the top of what's already there, on this widget give it a title "Find A Translater", save this widget, and delete the first one.

    That's all you need.

    Thanks for the suggestion, the problem is I don't want everything to scroll down. I would like the "find a translator" title and text to be fixed and the rest ("french"...) to scroll. If you knew how to do this it would be great, but I have no idea, so I thought that "merging" the two of them would be easier...

  21. paulwpxp
    Font hero
    Posted 2 years ago #

    Yes, you could have that in 1 widget, fixed title, content with a scroll bar.

    But just because you could doesn't mean you should.

    What's the point of making that part fixed height with scroll bar ?
    What's the benefit of doing so ?

    From the design perspective, or from the UX, there is no reason to do so. Why make it harder to get to the content ? Why don't you let users see list of all the available languages in one snapshot ?

  22. thefreelancetranslators
    Member
    Posted 2 years ago #

    The point is that list is gonna get quite long, by then, in my opinion, it won't look good and it would be quite awkward to select a language. Anyway, the main problem here is I have no idea so I'm just trying to find an "easy but fine" solution for this...

  23. paulwpxp
    Font hero
    Posted 2 years ago #

    There are many ways, correct ways to display that kind of information, but making it a 100px fixed height with a vertical scroll bar doesn't seeem right.

    But it's your site, so you make the call.

    You can have what you want in 1 widget by wrapping the area with a div that has fixed height and overflow-y set to auto, since it's a text widget so you can just use inline CSS for that.

    <div style="height:100px;overyflow-y:auto;">
    (content limited to 100px height and a vertical scroll bar)
    </div>

    and yes, you can have it in 2 widgets and adjust CSS to make it look like 1 but you got to be able to put this in the lowest part of your child theme's style.css

    #black-studio-tinymce-3 {
    	padding-bottom: 0;
    	padding-top: 0;
    	margin-bottom: 0;
    	border-bottom: none;
    	border-radius: 4px 4px 0 0;
    }
    
    #black-studio-tinymce-7 {
    	border-top: none;
    	border-radius: 0 0 4px 4px;
    }
  24. thefreelancetranslators
    Member
    Posted 2 years ago #

    Ok, thanks. It's done. I agree with you it doesn't look as I wish, but that will do by now. Thanks very much for the help.

  25. thefreelancetranslators
    Member
    Posted 2 years ago #

    Wara wara bin!

Topic Closed

This topic has been closed to new replies.

About this Topic