How to extend the bullet content out further in Roam? - css

I've been trying for a while to get the bullets in Roam (RoamResearch) to extend all the way to where the filter button is in the "linked references" section at the bottom of the page. When the sidebar is close, the bullets actually do extend out that far and they can show more content on a single line. But I want to always have the bullets reach that far.
I've dug into the CSS but can't find out how. Here's a link to the Roam help page with a demo graph to dig into.
I'll attach a screenshot below to show where I want it to extend. For some reason, I just can't figure this one out. I've used the developer tools in Chrome to try and figure it out, but I just can't.

Related

Where + how to edit Wordpress CSS to create a dropdown scrollable submenu in Wordpress?

I am a writer and I have menu for my chapters list on my website of 30+ chapters and currently it annoyingly looks like this:
current website
As you can see it cuts off, and Wordpress annoyingly doesn't have a feature that turns it automatically scrollable. There are 30+ chapters and you have to keep scrolling, scrolling, scrolling down to see them all.
I have found some good looking solutions on StackOverflow but don't know where and how to apply them on Wordpress.
If anyone could talk me through literally step-by-step 1. where to find the CSS of my Wordpress site 2. the code I'll need 3. where to paste it 4. if there's anything I need to add to the navigation block's inidividual "Additional CSS Classes" part like so: Additional box in the corner and anything else I need to do. I would be super grateful!
One of my fears is just dumping a bit of code somewhere in the middle of editable CSS and screwing up my entire site! My CSS knowledge is super beginner so laymans terms is very much appreciated thanks :)
I tried using Plugins (those seem even more confusing than CSS) and have considered using Elementor too but I have Googled and YouTubed, trying to find a solution and nowhere has something as specific as what I'm looking to achieve frustratingly.
I tried following this youtube video: https://www.youtube.com/watch?v=73XjO7hFZaw but didn't know what my "Target Element Selector" was, even when I went into Inspect on Chrome, all I found was this

Styling issues with react-native-gesture-handler

New to react native and stackoverflow. I am restyling a project that lets you take notes as you read the bible. I am trying to use react-native-gesture-handler so I can get rid of these ugly delete and edit buttons that I have smashed together on each note.
My problem is that since my note components are transparent, using the swiping gesture to render a delete button causes the delete button to jarringly pop into existence, instead of giving the effect of peeking out from behind the note component as you swipe. If I made my note component background opaque this wouldn't be an issue, but I do like the thematic direction I'm taking and I don't tear it up and rethink the theme if I don't have to.
I'm not allowed to add screenshots yet for some reason, so check the link below to see what I mean.
Any recommendations on how I can get this delete button to slide in from the right as you swipe? Or maybe a clever way to restyle the note component or delete button to make this look nice without sacrificing the cool theme? Thank you!
See Screenshot

customize carousel help required

I need suggestions in building below UI. It's a carousel like structure where active over is highlighted in green and we can still see next overs disabled or gray color.
I have researched for this for ex. Can I make use of any carousel to fit this design but can't seem to come to any conclusion. Thought of slider also but did not see that fitting this design.
Guys, do you have any suggestion or pointers to get me started here. I do not need code; just want a startup point. So far I am stuck with carousel or slider.
I understand this might not be most constructive question on SO but any pointers will be highly appreciated.
Unfortunately, you didn't provide any information about what should happen when you click on these items. If I understand correctly, you are looking for a carousel supporting your own pager design. If this is correct, you must add the pager markup first, after that you can use any carousel that supports slide switching methods. Then you can add click event listener to your pager items and call switching method in the listener, setting by that a new slide corresponding to the pager element index.
For example, you can try slick carousel, as it has .slickGoTo() method, which you can use to switch slides programmatically. You can also try to customize slick's default pager, but it might be not so easy or even impossible at all.

How to fix extra buttons on a Wordpress Video playlist

I have recently begun assisting updating my company's website. We have a few video playlists that I noticed have a ton of extra navigation buttons. I have an attached screenshot with the navigation circled.
I cannot figure out where the extra buttons are coming from, so I am unfortunately not even sure what the best questions are to ask here. The best I can find from digging around in the CSS are that there are references to mejs and aria. For all of my toying around. I have not been able to isolate one set of the buttons to go away and still show standard navigation buttons.
Thank you!
Check CSS Styling for input[type='button'] or button in your CSS.

Bootstrap CSS How To: Create a ContentBox with a Title Bar

I would like to know how to make a "ContentBox" with a title bar similar to this login box:
https://github.com/login?return_to=%2Fjshint%2Fjshint%2Farchives%2Fmaster
Is there a simple way using bootstrap css or do I just need to come up with my own way?
The page you linked does not show the login for anyone who is already logged into GitHub, so you may want to be a little more specific next time or post a screenshot.
That being said, I assume you just want the blue gradient header over a box of some kind. It's very simple to do, but there are no components of that nature built in to Bootstrap.
If you want to see what GitHub (or any other site) has done to create the effect you're looking, many tools are available to inspect the source. Here is a screenshot of Chrome's built in debugger (F12).
Edit: That image is being zoomed out a bit too much, here's a closer look.

Resources