Do you have a sample page I can look at?
Thread Starter
b777
(@b777)
Sure do:
https://notthebigbadwolf.com/hsl-syndroom/
The upper part of the post has just regular links, with the properly styled captions, the bottom, the part in italics, has multiple modals. The headings in this part are text linked modals, styled via the Customizer to be bold and italic, and under ‘HSL kosten’ I have a CSS linked modal, ‘102 km’. None of them have the proper styling of the captions.
Another interesting issue, but maybe/probably not related to the modals plugin, is that some Gutenberg inline styling sometimes does not process properly. Like the classes “has-drop-cap” and “has-text-align-center”. At the moment this happens for instance with the heading of the italic part, ‘Bronnen en berekeningen’, which is marked as centered and shows as such in the editor, but not in the front end.
Thank you in advance for looking at the issue!
-
This reply was modified 3 years, 8 months ago by
b777.
Try adding the CSS directly to https://notthebigbadwolf.com/wp-content/themes/hemingway-child/style.css
The CSS you added to the customizer is not being applied, maybe it adds a prefix and the modal is not in the main code flow (it’s located just before the </body> tag) so it’s not been picked up. Adding directly to the above file should fix that.
Thread Starter
b777
(@b777)
It did not fix it I am afraid.
However I did manage to make it work via the customizer. Turns out I had to add two lines. If I leave one out it does not work, if I combine them it does not work either. Very strange, but at least it works. The same goes for the styling of the text trigger, also two lines are needed::
/* captions of modals, need both*/
.wp-block-bod-modal-block figcaption {
text-align: center;
padding-top: .5em;
margin: 0;
color: #767676;
font-size: .85em;
font-style: italic;}
.bod-block-popup figcaption {
text-align: center;
padding-top: .5em;
margin: 0;
color: #767676;
font-size: .85em;
font-style: italic;
}
/* modal block link italic bold, need both */
.wp-block-bod-modal-block.align-center {font-style:italic; font-weight:bold;}
.bod-block-popup-trigger {font-style:italic; font-weight:bold;
/* end */
Very strange but at least it works.
Inspecting the code it’s the ‘.bod-block-popup figcaption’ that’s been applied, which is what I would expect, the first CSS statement would never apply. As far as needing both, check the preceding CSS statement in the customizer to make sure it’s correct (especially the brackets). If it’s got a missing bracket it will continue until it finds one so would try and include ‘.wp-block-bod-modal-block figcaption’, which would be invalid, but would never throw an error.
Thread Starter
b777
(@b777)
Spot on! The previous statement had two close brackets, I missed that one.
The text link styling now also needs only one statement, so every works as designed.
Thanks for your help, learned a lot again. Which is why mistakes are so helpful 😉
Thread Starter
b777
(@b777)
As for the other two issues: these were indeed unrelated. Turned out some CSS statements were missing or incomplete.
Again thank you for a great plugin, I really missed the option to include modals in the Gutenberg system and this addition is very useful for me. You can mark this thread as resolved.
