🌍
English
Hi everybody,
I need some help with text formatting:
as the title of an album is too long I wanted to put a part of it into the album description and have this part formatted to look like the album title (if you follow the link below, the album concerned is called PFT - Patrimoine....) As this text formatting should apply for this album only, I did this by inline style "<b style="font-size: 120%; color:#005e89">TSP - Toerisme en Spoorpatrimonium</b>"
Unfortunately this has an unwanted effect:
When the mouse is within the album frame, the background-color and text color change but not for the text
that I formatted differently to the original theme, i.e. the text mentionned above and for the number of photos (I changed the text style and color for this with the LocalFiles editor).
To make my problem clear: I'd want ALL text in the album frame get black again when the mouse is within the frame.
Can someone help me with this, please?
I am so far only a beginner with CSS
Thanks for any support
Piwigo 11.2.0
Operating system: Linux
PHP: 5.5.38 (Show info) [2021-02-05 20:20:55]
MySQL: 5.5.62-0ubuntu0.14.04.1 [2021-02-05 20:20:55]
Graphics Library: ImageMagick 6.7.7-10
Piwigo URL: http://www.ralfsrailwayresort.de/1piwig … category/4
Offline
Hi,
I don't understand what/where it is too long. Indeed, album names are supposed to stand in 255 characters. Why don't you type it all long ?
"PFT - Patrimoine Ferroviaire et Tourisme TSP - Toerisme en Spoorpatrimonium"
Maybe you would like to choose the way this long name is displayed, and so the way where the cut occurs. Ok, I assume that.
The problem you encounter with element inline styling, is you can't address style when mouse is over. To do so, I suggest this idea:
<span class="h3-style-imitation">TSP - Toerisme en Spoorpatrimonium</span>
To address the rendering, you can define class styling through external style sheet. Go in admin > local file editor > CSS > (your-theme), and add the following lines:
.h3-style-imitation {
color: #005e89;
font-size: 120%;
}
.h3-style-imitation:hover {
color: black;
}This is tricky, breaking semantic logic may provide side-effets, that will ask you to tinker again, for each page. Hopefully there are not too numerous.
CSS path for your description in containing album page:
ul.thumbnailCategories li.even div.thumbnailCategory div.description div.text p span.h3-style-imitation
CSS path for your description in album page itself:
div.additional_info div span.h3-style-imitation
If there are different CSS behaviours, make your CSS rules more selective by replacing .h3-style-imitation with .description .h3-style-imitation, and write the new rules for .additional_info .h3-style-imitation
I can't check this right now, because album description is not visible in album page itself. It should appears after the map, don't it ?
Offline
Hi TOnin (or should I rather say bonjour?),
thank's a lot for your reply.
I'm sorry I wasn't clear enough about the length of the album title but your assumption was right: I think the long name of the album title doesn't look nice.
I also forgot to mention that I use the plugin "Extended description" which I use this way that the description is only shown on the album container page but not on the album page itself.
I followed your suggestions with the code and just added "font-weight: bold" to make the imitation perfect.
With these changes the hover effect unfortunately works only, when the mouse is directly over the <span ... </span> text while for the rest of the description the hover effect starts already when the mouse enters the album frame.
I didn't really understand the part "this is tricky...." (probably it really is!)
Do I have to change anything else beside the CSS in the local file editor?
Offline
The album frame is a div element which class is thumbnailCategory. Deep inside, it is containing your h3-style-imitation class element.
You want the event mouse over the frame to trigger style change, so instead of:
.h3-style-imitation:hover {
color: black;
}write:
.thumbnailCategory:hover .h3-style-imitation {
color: black;
}Et voilà ! ;-)
For the french forum, follow this way https://fr.piwigo.org/forum/
Offline
Yeah, thanx a lot!!!
Ça marche!!!
Offline