sabina100.cloudaccess.host/100th.html

I am using Zen Tools 2 to crate the list layout on the home page.

This is an event list and to pull in the date, I made the date into the article title and put it in Column 1

I created the style below especially for the date. I know it works because the font -family is being pulled in, but I don't seem to be able to apply the other settings.
The Zen Tools Documentation doesn't cover how to make custom styles very completely. Will I need to switch form the "Master CSS" to a "Custom CSS" to get the other styles to work? or is there a simple syntax error or something else I am missing

.datesw {
font-family: "le-monde-livre-classic-std-s",serif;
font-size: 3em !important;
color:#0000a8 !important;
text-align: center;
}

I tried copying teh styles into a h6 tag and applying that but that didn't work either

While I am waiting for your answer I might try switching back to with Zen Tools 1 also to see if that makes a difference

Sharon

Hi Sharon,

Master css is across the sites zentool modules

The styling that is affected by master or custom is listed in the theme panel of the module

If you want the these styles to be different in one module compared to another then you would use custom option

Looking at your custom.css

Try changing it to this

datesw {
font-family: "le-monde-livre-std-s",serif;
font-weight: 400;
font-size: 1.8em;
color:#0000a8 !important;
text-align: center;
margin: 0px 0px 0px 0px !important;
}

Thanks.

Where do i put the styles? in the theme panel space for them or in the main custom.css files as I have them now?

In addition I want to add the Calendar icon with a check mark from fontawesome to show below the date.

Based on what i did before ( and you helped me with a year ago with revision)

I created this class:

.fa-calendar-check-o:after {
content: "\f274";
font-family:fontawesome;
font-size: 2.5em;
padding-right: .75em;
line-height: 0.5;
}

But I'm actually not sure how to apply two styles to one "title"

Hi

You would need to add it to the custom css replacing the other style you had

I should have included a bit of an explantion

<datesw class="zt-block">

it's not a class so your style didn't apply

Cheers
Paul

where do I put the code <datesw class="zt-block">?

I have a feeling something that should be obvious to me hasn't yet clicked.

What is the class "zt-block" ? and what does it do?

so grand! it works - thanks.

This is the existing css code you have

.datesw {
font-family: "le-monde-livre-classic-std-s",serif;
font-size: 3em !important;
color:#0000a8 !important;
text-align: center;
}

Targeting this line of HTML

<datesw class="zt-block">

But if you look datesw isn't a class so instead the custom.style needs to read

datesw {
font-family: "le-monde-livre-std-s",serif;
font-weight: 400;
font-size: 1.8em;
color:#0000a8 !important;
text-align: center;
margin: 0px 0px 0px 0px !important;
}

ah we cross posted

Are you with me now on the explanation?

About the calendar icon. I"m not sure what to replace because I want to use the datesw

It seems to me there should be way to have the code automatically add the date icon when the tag datesw is used. Shouldn't there be?

sure

it's the use of ::after

css-tricks.com/almanac/selectors/a/after-and-before/

so something along the lines of

datesw::after {
content: "\f274";
font-family:fontawesome;
font-size: 2.em;
padding-right: .75em;
line-height: 0.5;
display:block;
padding-top:.5em;
}

Block to force it to a new line so you may not need that

yes, it's grand now works great

Thank you again I will check out that link. Appreciate your help so much. Especially as you must be working quite late into the night today, if you are in England.

No problem

Just past midnight

Cheers
Paul

the icon also displays now. Thank you

nice one

Cheers
Paul