Creating a new custom css styling rule

[gbcc_Gha]

I like the looks of <blockquote> and wanted to use this style for highlighting texts here and there on pages and posts. I looked up the blockquote-code which apparently looks like this.

blockquote {

  background:rgba(128, 128, 128, 0.0980392);

  border-left-color:rgba(128, 128, 128, 0.4);

  border-left-style:solid;

  border-width:0 0 0 4px;

  margin:1.5em;

  overflow:auto;

  padding:0 1.5em 1em 1.2em;

}

Being a greenhorn re. html/CSS issues doesn’t make such tasks easy though.  First issue I came across was: do I have to create a “class” or an “id”? I figured out “class” is probably the right choice (correct?!) and decided to name it 

.einzug { above css style codes }. 

It is placed under the section “fonds & custom” – “custom css rules”

I used the result on my homepage by wrapping the text with a <div class=”einzug”> The result can be seen here: http://www.gbcc.eu. All seem to work but the margin! It just ignores the margin rule. What am I missing?

Cheers,

[Weaver]

Those rules work when I look at your site, including margins.

Just to see, try wrapping the text with <blockquote>…</blockquote> instead of the <div>.

You could also try adding !important to the margin rule, but that shouldn’t make a difference.

[scrambler]

You have a syntax error in your rule, you are missing a semi colon on the one before the margin

.einzug {
background: rgba(128, 128, 128, 0.0980392);
border-left-color: rgba(128, 128, 128, 0.4);
border-left-style: solid;
border-width: 0 0 0 4px
margin: 1.5em;
overflow: auto;
padding: 1em 1.5em 0.5em 1.2em;
}

Should be

.einzug {
background: rgba(128, 128, 128, 0.0980392);
border-left-color: rgba(128, 128, 128, 0.4);
border-left-style: solid;
border-width: 0 0 0 4px;
margin: 1.5em;
overflow: auto;
padding: 1em 1.5em 0.5em 1.2em;
}

[gbcc_Gha]

You see the rules work? how comes? I can’t see it neither on chrome nor on firefox. 

Thank you for the hint but unfortunately !important didn’t solve it. when I use blockquote instead, the margin appears: the text indentation (margin 1.5em) is then clearly visible on top, button, left and right.

[scrambler]

We may have cross posted, but read my post above about your syntax error

[gbcc_Gha]

scrambler, we have indeed. That was it: Such a stupid mistake and I’m trying and trying :/ Thank you very much. 

[Author]

Posts