Center a search bar (YouTube)

Ask the Community Customization
1

Hey,

I was also wondering if there was CSS code to change the position of the search bar in the widget so it was in the middle instead of on the right hand side. Is this possible?

1 Like
2

@Sorochi, sure thing, here’s the code that should help :slight_smile:

.yottie-widget-feed-section-search {
    justify-content: center;
}

Please let me know if it worked!

P.S. your first queries are being resolved at the moment, we’ll get back to you as soon as we’ve got a solution.

3

Thank you! It worked!

1 Like
4

Hi,

Is there a way for the playlist titles to turn bold when someone hovers on it? I want to replicate the effect on my website menu bar.

Many thanks,
Sorochi

7

Hi @Sorochi! The playlist titles are already bold, so if you want to achieve the same effect, you’d want to change the default font weight as well. This code should help you do that:

li.yottie-widget-nav-list-item a {
  font-weight: 400;
}
li.yottie-widget-nav-list-item a:hover {
  font-weight: bold;
}

Let me know if it works!

3 Likes
8

Thank you!

Is there a way to recreate this but for the video titles. So the video titles turn bold when you hover on them, instead of the line appearing underneath the title?

Thanks,
Sorochi

9

Absolutely, here you go!

.yottie-widget-video-info-title {
  font-weight: 400;
}
.yottie-widget-video-classic:hover .yottie-widget-video-info-title {
  font-weight: bold;
  text-decoration: none;
}
2 Likes
10

Thank you! It works perfectly!

3 Likes
11

Hi,

I was wondering if there was code to be able to round the corners of the search bar and also round the corners of the video thumbnails?

Thanks!

13

Hi @Sorochi!
This code should help you. You can adjust exact values as you need.

.yottie-widget-feed-section-search-form-input {
  border-radius: 10px;
}
.yottie-widget-video-preview-thumbnail {
  border-radius: 20px;
}
2 Likes
14

Thanks! It works!
Is there similar code to do the same for the grey rectangle that tells you how long the video is?

15

How do I change the code for the search bar, so it has the same opacity effect as the search bar on my squarespace website www.mentorshipstudio.com (password: hello) then the search bar is on the Studio Shop tab and the Studio Blog tab. Thanks!

16

How do I move the search icon in the search bar to the left hand side and how do I remove the … after Search in the search bar?

17

How do I get rid of the grey rectangle above the group selection bar on my website?

18

Hey @Sorochi!

Your use case seems like a very custom one, and I guess I have a better way to fulfil your ideas :slight_smile:

Please contact our Support Team at support@elfsight.com and describe all the adjustments you need to make, and we will get back to you with the final solution at once.

If any other questions come up along the way, our team will be also very happy to assist in your support ticket :slight_smile: