Remove the bar in blockquote

HTML & CSS
1

Hi

How do I remove the side bar when using blockquote

Example code:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

         <!-- BOOTSTRAP Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    </head>
    <body>
        <blockquote>
            <p>I am a quote</p>
            <footer>
                <cite>Damian</cite>
            </footer>
        </blockquote>
    </body>
</html>

Thanks

Damian

2

The bar is coming from this rule in the css:-

blockquote {
    border-left: 5px solid #eee;
}

You could remove that in the css or override it in subsequent css.

blockquote {
    border-left: none;
}
1 Like
3

Your code does not produce a sitebar.

Please post a valid “working page”… starts with <!doctype html>, contains <head> section with appropriate links, etc, contains a <body> section with the content, and ends with </html>. Just like the code that I included in your last post in this category. Copy it to a file and it demonstrates the problem (or fix). :slight_smile:

4

A left border?

5

I presumed that.
If not then the horizontal line ::before the footer/cite.

6

What browser, Sam? I don’t see a border at all :puzzled:.

If course, I wouldn’t think of a sitebar as anything other than a narrower column… so what do I know. :shrug:

7

In firefox.
I copied the code into codepen and added the opening head tag.

8

That is so subtle I didn’t even see it (even though I was looking for a narrow column “sidebar”). Thanks. :blush:

9

Hi there Collierd,

it appears that you have three options, which
I will list in order of my personal preference. :sunglasses:

1 - completely remove “Bootcrap”, it is an abomination. :scream:

2 - add this CSS after the “Bootcrap” link…


*:before {
    content:''!important;
 }

3 - don’t use the “blockquote element”

coothead

1 Like
10

Hi there Collierd,

if you want a just little more precision
for my second option, then use this…

blockquote *:before{
    content:''!important;
 }

coothead

11

I don’t think I’d advocate option #2 because there is no telling what else will be killed; but I do sympathize.

My recommendation to any new coder is to learn the basics of HTML and CSS before deciding to commit himself to a framework. Unless one is working as a member of a team in a business, writing a web page is usually faster and easier outside of a framework. Besides, without a knowledge of even the basics of HTML and CSS, one does not know how to find and fix the simplest of problems or make equally simple changes to the layout. Frameworks are too restricting. My 2 cents.

EDIT: Instead of using !important, just be sure the override follows the original style and is at least as specific. If everything becomes !important then nothing is !important. It’s a trippy trap.

2 Likes
12

Hi there Ron,

one of the problems with “Bootcrap” is, that it makes
it almost impossible to override their obnoxious CSS . :scream:

So for me personally, I considered that using…

blockquote *:before {
    content:''!important;
 }

…was a minor victory over the twittering beast. :sunglasses:

coothead

13

Hi there Ron,

your post did make me review my code
suggestion in light of your complaint. :disappointed_relieved:

Is this possibly more acceptable…

blockquote footer:before{
    content:'';
 }

coothead

1 Like
14

You have the experience to know how to use the wild card selector and !important discretely and with precision. New bootscrap coders don’t and just might find it to be too convenient. Maybe I’m sounding too idealistic?

15

Hi there Ron,

post #13 does not use “important”. :ok:

coothead

1 Like
16

Yes, I got that. :smile: I’m lagging about 2 posts behind you. Sorry.

I’m personally reluctant to recommend a wild-card-selector-with-!important fix to a newbie. That’s all. Just my personal feeling.

Post #13 gets a gold star, FWTW.

1 Like
17

That does the trick Sam

Thanks

Damian.

18

Hi ronpat

Does this work?
I can’t attach yet
I cut and paste and for some reason it looks to have chopped the top part off
This also includes a revised blockcode style

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

         <!-- BOOTSTRAP Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

	<style type="text/css">
  		blockquote {
    			border-left:none; 
		}
  	</style>

    </head>

    <body>
        <blockquote>
            <p>I am a quote</p>
            <footer>
                <cite>Damian</cite>
            </footer>
        </blockquote>
    </body>
</html>
19

Not sure what you’re asking… does what work and in what way does it work (what constitutes “working”)?

You can’t attach what yet, please?

If you are referring to the code that you’re posting, it’s all there. You should see a vertical scrollbar on the right side of the block of code. Having said that, I’m not sure if all new operating systems display scrollbars in the same ways, so I may be mistaken. What operating system and browser are you using?

The revised blockcode style works great! If {border-left:none} is commented out, the gray bar on the left appears again. Remove the comment marks and it goes away again. Good, good. :slight_smile:

20

Hi there Collierd,

this is what I see with your code in post #18…

…is that what you actually want?

The page looks exactly the same, though, without this code…

<style type="text/css">
blockquote {
    border-left:none; 
 }
</style>

If instead you use this code from post #13…

<style type="text/css">
blockquote footer:before{
    content:'';
 }
</style>

… the page looks like this…

…which, of course, is what I thought you required. :sunglasses:

Can you clarify your actual requirements? :confounded:

coothead