Page 1 of 1
Css adjustment? pd-filenamebox-bt?
Posted: 22 Sep 2023, 18:32
by fabio42
Hi!
After upgrading to Joomla 4, I am trying to solve a css problem concerning the length of the file name box of the files to be downloaded. Depending on the length of the name of the file, the icon "Hot" is displaced under the title. And sometimes the title is cut into two lines.
Here's an example of what it looks like depending on the title length:
https://www.4u2learn.fr/joomla/downloads/evaluation
Not being familiar with css modifications
, I am calling for your help. What code do I have to modify and where should I insert the code so that after any upgrade it stays intact?
Thanks a lot!
Fabio
Re: Css adjustment? pd-filenamebox-bt?
Posted: 22 Sep 2023, 20:30
by Jan
Hi, if there is no place, then the icon is moved below the text. In Joomla 4, Bootstrap model is used for rendering the HTML output, so the only way is to enlarge it with some custom CSS.
Jan
Re: Css adjustment? pd-filenamebox-bt?
Posted: 22 Sep 2023, 22:49
by christine
Hi Fabio,
try with this Code into your custom.css:
Code: Select all
@media only screen and (min-width:400px) {
#phoca-dl-category-box .pd-document16, #phoca-dl-download-box .pd-document16 {
width: 150%;
}}
Kind regards
Christine
Re: Css adjustment? pd-filenamebox-bt?
Posted: 24 Oct 2023, 09:48
by fabio42
Sorry Christine for being so slow about testing.
I just inserted this code into my custom.scss file into the Gantry template. And it seems it does not work... (check the same link)
What can I do then?
Thanks a lot in advance!
Re: Css adjustment? pd-filenamebox-bt?
Posted: 24 Oct 2023, 13:46
by christine
Hi Fabio,
I put it in temporarily. It works, see:
custom.css:
https://docs.gantry.org/gantry5/tutoria ... tyle-sheet
Kind regards
Christine
Re: Css adjustment? pd-filenamebox-bt?
Posted: 29 Oct 2023, 10:31
by fabio42
Hi Christine!
I don't know what's going wrong. This is exactly what I did and it still does not want to work
:
Where am I going wrong?
Thanks in advance
Re: Css adjustment? pd-filenamebox-bt?
Posted: 29 Oct 2023, 11:33
by christine
Hi Fabio,
a) To comment out a CSS line: make:
/*here is text or code*/ instead of: //
Maybe it helps, if corrected.
Check this here again:
https://docs.gantry.org/gantry5/tutoria ... tyle-sheet
e.g.
Once you have added this file, and put your custom CSS/SCSS within, Gantry will do one of two things. This activity is determined by the Production Mode setting. You can reach this setting by navigating to Gantry 5 Administrator > Extras. etc.
It will be re-compiled to your already existing: custom_38.css
Kind regards
Christine
Re: Css adjustment? pd-filenamebox-bt?
Posted: 30 Oct 2023, 00:17
by christine
Again: Above (or any other) Code will not work, until you have NOT deleted these two lines:
//article seperator line
// phocadownload - etc. etc.
I see both on your screenshot. See info in previous post under a)
To comment a CSS line: make:
/*here is text or code*/
Kind regards
Christine
Re: Css adjustment? pd-filenamebox-bt?
Posted: 05 Nov 2023, 19:53
by fabio42
Well, I did all you said and indeed, the wrong syntax must have had something to do with the issue.
Now, evertyhing works plain sailing!!!
So many thanks for your help! This is solved!
Fabrice
Re: Css adjustment? pd-filenamebox-bt?
Posted: 05 Nov 2023, 23:29
by christine
Hi Fabrice,
that's fine! Thanks for your feedback.
Kind regards
Christine