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

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.

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

Finding source of logo slider

I seen this logo slider on a lot of websites and i need help to either locate where to get it or any ideas to make it.
I tried to look through the sourcecode and can't how it is made.
I guess it is some sort of plugin or theme but not sure?
Example of one of the websites: https://www.webfx.com/

How to extend the bullet content out further in Roam?

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.

Sidebar pushed below content in individual post (Wordpress)

I'm designing a blog in Wordpress using the Thesis Framework and there is an issue that I just can't seem to find a fix to:
Basically everything is fine on the main page, but when I go into any individual post, the side bar is getting pushed off and showing up right down the button of the page (below the comments).
It's pretty obvious that there is some kind of sizing/width issue and I've played around with a lot of the widths in firebug but just can't seem to find where it's going wrong. I can't find a difference between the main page and post pages either.
Any help would be greatly appreciated! A specific solution would be ideal because I've already spent a lot of time tinkering with it to try and address the issue.
Thanks in advance for any help!
I had this problem as well with the thesis framework. I found two reasons where it produced a similar mistake on my blog:
The first reason is that the sidebar + content area is bigger than you container. That would make the sidebar go below the the content. Make sure also that the content of the sidebar is also smaller than the sidebar. I had a Facebook box in the sidebar that was bigger, thus pushed the whole sidebar below the content.
An other reason was a plugin that I had installed. If you have any plugins installed try and see if one of those is interfering with the sidebar layout.
If that doesn't work you can also post a snippet of the code so that I can look at it.
I often have this problem when editing a page in html (text) mode and forget a closing tag, most notably a . If using tables, a missing , or similar will cause this.
So, in brief, make sure all your opening tags have a corresponding close tag.
Make sure the html is syntax-error free. I had the same problem and the culprit was a wrong closing tag (<b/>)

VS HTML Designer Tag Hierarchy Links. Broken in all versions including 2010-or is it me?

Should this bar on the HTML designer show the tag name? It sometimes does!
Here's an image of what I referring to.
I thought for sure it must be a bug but considering that I heard that MS was rewriting the editor (designer too?) I am starting to question whether I know how to use it!
Note the "TD" tooltip on the bottom right. Shouldn't this "TD" appear on the bar on the far right where the mouse would be?
This looks like a bug. If there's a reliable repro for it (i.e. if you can show to do it from a new or sample form), you should file the bug on http://connect.microsoft.com/VisualStudio. (Or you could file it anyways, but without a repro, it's hard to find and fix...)

Resources