Recent
Categories
View Replies (3)

Adding a new blockquote

0
Votes
Undo
  1. ip mann
    ip mann
  3. Commercial Templates
  4. Friday, 26 April 2024
  5.  Subscribe via email
Hello!

In addition to the existing blockquote, I would like to use a second variant. I found out how to change this using the browser's developer tools. I would like to add "border-bottom", a "border-radius" and change the color.

The problem now is that I don't know how I can insert these changes, for example as custom CSS, so that I can then use the code "blockquote2" instead of "blockquote" in the article I'm writing.

Does somebody has any idea?

Thanks!

I. Popp
Responses (3)
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Why don't you just add a class or style directive to the blockquote tag in code view?
  1. 3 weeks ago
  2. Commercial Templates
  3. # 1
ip mann
ip mann
Accepted Answer Pending Moderation
0
Votes
Undo
Why don't you just add a class or style directive to the blockquote tag in code view?




I've tried this again and again - unfortunately I only know how to create websites by learning by doing. I do the school website on a voluntary basis.

My intention was to have a second version of blockquote. I have already found a solution and implemented it as follows.

1st step:
In the Custom Code/Head Custom Code of the J4 Natalie template I added:

<head>
<style>

#blockquote2 {
width:100%;
background-color: #f3f3f3;
border-left: 3px solid #68696b;
border-bottom: 3px solid #68696b;
border-radius: 10px 20px;
}

.blockquote2 {
font-size: 18px;
font-style: normal;
line-height: 1.6;
margin: 1rem 0 1.5rem;
padding: 10px 20px 10px 30px;
}

</style>
</head>

2nd step:
Then I have the desired text in the article or module inserted between the two code snippets:

<div id="blockquote2">
<div class="blockquote2">
<p>The desired content </p>
</div>
</div>

Whether it's technically clean or not - it works for me.

I. Popp
  1. 3 weeks ago
  2. Commercial Templates
  3. # 2
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

congrats for finding a solution. Your HTML and CSS code seems to do exactly what it is supposed to do.

However, I have one proposal: You shouldn't put the CSS into the Head Custom Code, but into the tab "Custom CSS", which is designed for that purpose:

Bildschirminhalt erfassen-1.jpg

Moreover, if your CSS code starts to grow, best practice is to use a separate file custom.css

Regards
Rolf
Attachments (1)
Bildschirminhalt erfassen-1.jpg Bildschirminhalt erfassen-1.jpg
  1. 3 weeks ago
  2. Commercial Templates
  3. # 3
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!