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. 6 days 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. 2 days 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. 2 days 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!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok