How to make CSS classes & Reference to articles

Everything to do with Joomla! 4.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
djcaptpln880
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Mon Jul 26, 2021 9:32 am

How to make CSS classes & Reference to articles

Post by djcaptpln880 » Tue Nov 28, 2023 2:56 pm

Greetings

I'm using J4 and Gantry 5

I put this in my articles:

<style>
.callout-box {
background: #fff3cd;
border: 1px solid #ffe69c;
margin-top: 24px;
max-width: 100%;
padding: 5px 10px;
position: relative;
align: right;
}
.callout-box-heading {
background: #ffcc00;
display: inline-block;
/* left: 0; if you want to position the heading horizontally */
margin: 0;
padding: 0px 10px;
position: absolute;
top: -12px;
}
.callout-box-content {
font-size: 1.5em;
}
</style>
<div class="callout-box">
<h3 class="callout-box-heading">Did you know?</h3>
<p class="callout-box-content">Your cells are often IgE allergic what you're addicted to. For many people this is tobacco, alcohol, refined sugar and hybridized wheat</p>
</div>

How would I make it so I can put this into Gantry 5 CSS box so I don't have to put the styling into the article?

How would I make it so I only have to reference 1 class instead of 3 classes in the HTML here?

Thanks in advance!
Last edited by toivo on Wed Nov 29, 2023 5:44 am, edited 1 time in total.
Reason: mod note: moved from 4.x Coding

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 43900
Joined: Sat Apr 05, 2008 9:58 pm

Re: How to make CSS classes & Reference to articles

Post by Webdongle » Tue Nov 28, 2023 3:08 pm

/media/templates/site/your_template_name/css/user.css
Create it if it doesn't exist
Same applies to Child Templates.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

djcaptpln880
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Mon Jul 26, 2021 9:32 am

Re: How to make CSS classes & Reference to articles

Post by djcaptpln880 » Tue Nov 28, 2023 3:12 pm

I don't think this is what I mean based on what you're saying..

I need to only call 1 CSS element that calls all the 3 into HTML into articles or a module I make with that html
Webdongle wrote:
Tue Nov 28, 2023 3:08 pm
/media/templates/site/your_template_name/css/user.css
Create it if it doesn't exist
Same applies to Child Templates.

gws
Joomla! Champion
Joomla! Champion
Posts: 5818
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: How to make CSS classes & Reference to articles

Post by gws » Tue Nov 28, 2023 3:18 pm

Read the gantry docs. There is a particle for adding css/js to a page or site.

djcaptpln880
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Mon Jul 26, 2021 9:32 am

Re: How to make CSS classes & Reference to articles

Post by djcaptpln880 » Tue Nov 28, 2023 3:23 pm

gws wrote:
Tue Nov 28, 2023 3:18 pm
Read the gantry docs. There is a particle for adding css/js to a page or site.
Looks like I may need to make my own particle right?

gws
Joomla! Champion
Joomla! Champion
Posts: 5818
Joined: Tue Aug 23, 2005 1:56 pm
Location: South coast, UK
Contact:

Re: How to make CSS classes & Reference to articles

Post by gws » Tue Nov 28, 2023 5:24 pm

No, on page settings of your template. see photo.
screen-dump.jpg
You do not have the required permissions to view the files attached to this post.

djcaptpln880
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Mon Jul 26, 2021 9:32 am

Re: How to make CSS classes & Reference to articles

Post by djcaptpln880 » Tue Nov 28, 2023 11:06 pm

Yes thats where I put the CSS

But I still need to put 3 classe call references in the HTML which is a major drag.

IS there some way to only call 1 Element with the 3 elements inside it?
For instance:
<div class="callout-box">
<h3 class="callout-box-heading">Did you know?</h3>
<p class="callout-box-content">Your cells are often IgE allergic what you're addicted to. For many people this is tobacco, alcohol, refined sugar and hybridized wheat</p>
</div>

Would it not be possible to make some kind of basic particle to only need me to insert the header and content?

User avatar
ceford
Joomla! Hero
Joomla! Hero
Posts: 2533
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: How to make CSS classes & Reference to articles

Post by ceford » Wed Nov 29, 2023 7:23 pm

You need to read about selectors, for example, to style h3 within a callout-box div:

.callout-box h3 {

}

And

.callout-box p {

}

Put the styles in your user.css file.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Tue Jun 30, 2020 12:17 pm

Re: How to make CSS classes & Reference to articles

Post by Pavel-ww » Thu Nov 30, 2023 8:17 am

djcaptpln880 wrote:
Tue Nov 28, 2023 11:06 pm
But I still need to put 3 classe call references in the HTML which is a major drag.

IS there some way to only call 1 Element with the 3 elements inside it?
For instance:
<div class="callout-box">
<h3 class="callout-box-heading">Did you know?</h3>
<p class="callout-box-content">Your cells are often IgE allergic what you're addicted to. For many people this is tobacco, alcohol, refined sugar and hybridized wheat</p>
</div>
Hi. Judging by your code from the first post, all elements have their own styles that are different from each other. Therefore, it is not entirely clear what you are in view of "...to only call 1". Your CSS code in the first post is quite normal and even follows the rules of a css methodology

djcaptpln880
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 215
Joined: Mon Jul 26, 2021 9:32 am

Re: How to make CSS classes & Reference to articles

Post by djcaptpln880 » Thu Nov 30, 2023 9:16 pm

To me its very simple, but not sure this can be done:

1. In the HTML reference only 1 or 2 elements in the HTML document with the CSS styling.
I need to have constant or changeable "did you know" top header but 100% changeable content

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1560
Joined: Tue Jun 30, 2020 12:17 pm

Re: How to make CSS classes & Reference to articles

Post by Pavel-ww » Fri Dec 01, 2023 11:17 am

djcaptpln880 wrote:
Thu Nov 30, 2023 9:16 pm
To me its very simple, but not sure this can be done:

1. In the HTML reference only 1 or 2 elements in the HTML document with the CSS styling.
I need to have constant or changeable "did you know" top header but 100% changeable content
Hi. Sorry. I do not understand your explanation

Mr. Wimpy
Joomla! Explorer
Joomla! Explorer
Posts: 438
Joined: Fri Dec 02, 2005 10:46 am
Location: The Netherlands

Re: How to make CSS classes & Reference to articles

Post by Mr. Wimpy » Tue Dec 05, 2023 10:12 am

What are these "Did you know"s?

Do they change per pageload?
Does every article have it's own DYK?

You could create a DYK field of type text/textarea (plain text) or editor (with editor buttons) to your article with the label "Did you know".

Or... create an editor template with your code snippet and select it when you create an article.
TinyMCE: https://blog.astrid-guenther.de/en/cass ... -template/
JCE (pro only): https://www.joomlacontenteditor.net/sup ... te-manager


Post Reply

Return to “Templates for Joomla! 4.x”