|
kweencleo
|
December 31, 2015 at 9:27 am
I am using the Iced Mocha theme with ee4. I love the Event Grid Add-on however when you hover over the image the font is too large and so it doesn’t all show. Where can I make the font smaller so that the name, date etc shows when you hover over. Here is link to page I am talking about http://mywbmc.com/wbmc-upcoming-events/
|
|
Tony
|
December 31, 2015 at 9:57 am
Hi there,
You’ll need to add some custom CSS to do this, Iced-mocha has a section for custom CSS although personally I would use a plugin such as Reaktiv CSS Builder as then you can change themes and still use the custom styles applied.
You can set the font size using this rule:
.ee_grid_box.item h2 {
font-size: 14px;
}
The gird items also have some additional spacing which you may need to remove, you can do that using this:
.ee_grid_box.item h2 br+br {
display: none;
}
To add these using reactiv you go to Dashboard -> Appearance -> CSS Builder.
Then just add the styles there and save – http://take.ms/d3eAl
|
|
kweencleo
|
December 31, 2015 at 10:56 am
Thank you so much! You speak a language I can understand. I followed all the instructions however and the font did not change.
|
|
Lorenzo Orlando Caum
|
December 31, 2015 at 11:09 am
Hello,
Try adjusting the priority by using the important parameter:
/* Adjust styling for Events grid template for Event Espresso */
.ee_grid_box.item h2 {
font-size: 14px !important;
}
.ee_grid_box.item h2 br+br {
display: none !important;
}
—
Lorenzo
|
|
Tony
|
December 31, 2015 at 11:17 am
Rather than using !important, first try making the selectors a little more specific, like this:
#content .ee_grid_box.item h2 {
font-size: 10px;
}
#content .ee_grid_box.item h2 br+br {
display: none;
}
Either should work.
|
|
kweencleo
|
December 31, 2015 at 7:12 pm
Thank you. Tony I went with your suggestion. It works however it’s super small 10 pt.. I can live with that cause when I try to nudge it up to 12pt it just goes huge again. Thank you very much.
|
|
Tony
|
January 1, 2016 at 4:22 am
Hmm, that’s strange.
You should be able to change the font-size using those snippets.
For example:
#content .ee_grid_box.item h2 {
font-size: 12px;
}
Just make sure you are including the px (the unit of the size) and the ; (to end the line)
|
