Blog Category Overlay
Rvdzande
Hello,
Trying to archieve a three column list blog like this:
(don't mind the bad Photoshop)
I know css, so I have managed to style most items like I want on my site, but each column (once configured with standard Joomla category blog) does have the same class. Also Joomla standard puts the items in another order.
I think I have to do an HTML override as well, any guidance / reading material? Google doesn't really bring me in the proper direction (or I am searching the wrong terms).
Rvdzande
Accepted AnswerOk, did a lot of finetuning + had some advice (I understand what the CSS does, I just did not select the proper element).
This is what I did for colours for child elements. The .nieuws (news in Dutch) is assigned to the menu so this css gets only applied on this page:
.nieuws .article-list .article {
margin-bottom: 30px;
padding: 20px;
border: 0px solid #f5f5f5;
border-radius: 0px;
}
.nieuws .article-list .article {
margin-bottom: 30px;
padding: 0px;
border: 0px solid #f5f5f5;
border-radius: 0px;
}
.nieuws .article-intro-image.float-left {
margin: 0 0px 0 0px;
}
.nieuws div.col-lg-4:nth-child(1) h2 a {
color: #fff;
background: #1cabe0;
}
.nieuws div.col-lg-4:nth-child(1) h2 {
background: #1cabe0;
padding: 20px;
}
.nieuws div.col-lg-4:nth-child(1) .article-body {
display: grid;
border: 1px;
border-style: solid;
border-color: #1cabe0;
}
.nieuws div.col-lg-4:nth-child(2) h2 {
background: #8ac540;
padding: 20px;
}
.nieuws div.col-lg-4:nth-child(2) h2 a {
background: #8ac540;
color: #fff;
}
.nieuws div.col-lg-4:nth-child(2) .article-body {
display: grid;
border: 1px;
border-style: solid;
border-color: #8ac540;
}
.nieuws div.col-lg-4:nth-child(3) h2 a {
color: #fff;
background: #fdc025;
}
.nieuws div.col-lg-4:nth-child(3) h2 {
color: #fff;
background: #fdc025;
padding: 20px;
}
.nieuws div.col-lg-4:nth-child(3) .article-body {
display: grid;
border: 1px;
border-style: solid;
border-color: #fdc025;
}
.nieuws div.col-lg-4 .article-introtext {
padding: 0px 20px 0px 20px;
}
.nieuws div.col-lg-4 .article-info {
padding: 0px 20px 0px 20px;
}
.nieuws .row{
padding: 0 15px 0 15px;
--bs-gutter-x: 0.5rem;
}
.nieuws .article-introtext img {
display: none;
}
Paul Frankowski
Accepted AnswerHoi,
I know css, so I have managed to style....
So you need only small helping hand:
- CSS order Property to change order of elements Title, image etc.
- CSS :nth-child() Selector to set different color for each box.
- Code Inspector from your browser to preview classes >> https://www.joomshaper.com/blog/which-line-of-css-i-have-to-edit-code-inspector-in-action
Now is your turn. HTML/PHP override is not needed in that case.
Rvdzande
Accepted AnswerSince the update went well I proceeded with this.
The 'order' I could not get to work yet, will look into this later, but great to learn some new stuff
I understand what this does: div:nth-child(2)
And how to apply it in the override.css (or in the custom section of Helix Ultimate).
Just it will override it for any page and any element, so I made a custom page class (news)
If I assign .news { background: yellow; } it will work on the specific page.
Now how do I use the div:nth-child(2) combined with the page class + the specific div I want to target (imagine the div is .article-header h2 a
If I know this, I can do the math, I am trying myself meanwhile!
Rvdzande
Accepted AnswerSame with the order basically:
div.article-info {order: 3;}
div.article-introtext {order: 2;}
div.article-header {order: 1;} Does nothing
div.article-info {
display: none;Hides the section, so the div is targeted, but it doesn't want to apply the order. Also I would like to have a prefix .news so this order only gets targeted on the specific page.
Paul Frankowski
Accepted Answerto use order - first, major element must be display: grid , for example
.article-body {display: grid;}
sorry, but we are not here to teach CSS (!)
yes, in Joomla each module, addon/row or even a page may have unique class name.