CSS sample style sheet for dummies

RobertS

Can someone post a sample css of what you did to override fonts and styles? We are not developers and since that seems to be the only way to make the system usable I would appreciate any working sample of what is needed. Spent hours going through the forum trying different things and it's getting ridiculous.

jvstratum

Hi,

In case your code is not working you might need to use a higher css specifity, so it doesn';t get overridden. You can read more about this here: https://dev.to/emmabostian/css-specificity-1kca

For example:

#acym__wysid__template a:visited {color: #1c1d1f;}
This has a higher specifity then a:visited {color: #1c1d1f;}

In case you get stuck, please let us know what you are trying to accomplish so we can rpovide you with a better answer.

jross

Hello, I am also having trouble applying custom css to a template.
This is the code I am trying to insert using the 'add custom style sheet' function.
Are you able to help with this?
Thanks, JR
h1, .h1 {
font-family: Londrina, Helvetica, Arial, sans-serif;
font-size: 35px!important;
color:#a671be;
}

h2, .h2 {
font-family: Londrina, Helvetica, Arial, sans-serif;
font-size: 25px;
color:#ff1155;
}

h3, .h3 {
font-family: Londrina, Helvetica, Arial, sans-serif;
font-size: 20px;

}

jvstratum

Hi,

Try this:

#acym__wysid__template h1 {color: #a671be;}

jross

Hi thanks for the reply but unfortunately adding this code did not work.
Is the code " #acymwysidtemplate " generic to all templates or does it have to modified to suit my template ?

Thanks, JR
PS ( I could not find any documentation that explains adding custom css to an Acymailing template. Is there any explanation anywhere in the documentation? )

jvstratum

Hi,

You can add !important to your css:

#acym__wysid__template h1 {color: #a671be !important;}

jross

Hello, nope that does not work either.
Is it possible to give you super admin access so you can try for yourself?
Thanks, JR

jross

Hi, I am making some progress and can now change the colours of the H1, H2......
I am not having success applying the custom font 'Londrina'
Are you able to advise how to add a custom font into template?

jross

Got is sorted. Here is the final custom css used

@font-face {
font-family: "Londrina";
src: url("../fonts/LondrinaSolid-Black.ttf");
}

h1 {
font-family: 'Londrina', Helvetica, Arial, sans-serif !important;
font-size: 35px !important;
color:#a671be !important;
}

h2 {
font-family: 'Londrina', Helvetica, Arial, sans-serif !important;
font-size: 25px !important;
color:#ff1155 !important;
}

h3 {
font-family: 'Londrina', Helvetica, Arial, sans-serif !important;
font-size: 20px !important;

}

jross

Close but no cigar.
I can see the font 'Londrina' applied when viewing the draft newsletter. When I send a test email, it reverts back to the standard font.
How can embed the custom font so it is viewed by the end recipient of the newsletter?
Thanks, JR

jvstratum

Hi,

You need to add the full path of the font. Please have a llook at this thread: https://forum.acymailing.com/d/1224-how-to-integrate-my-webfont-als-general-font-for-the-newsletter-template.

RobertS

Thanks - I am trying to use this but it is not working. any help would be great:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap') ;
body, p, div, table, td {
font-family : 'Open Sans !important';
font-size : 13px;
}
h1 {
font-family : 'Open Sans !important';
font-size : 18px;
font-style : normal;
font-variant : normal;
font-weight : 400;
line-height : 14.3px;
}
h3 {
font-family : 'Open Sans !important';
font-size : 16px;
font-style : normal;
font-variant : normal;
font-weight : 700;
line-height : 15.4px;
}
p {
font-family : 'Open Sans !important';
font-size : 14px;
font-style : normal;
font-variant : normal;
font-weight : 400;
line-height : 20px;
}
blockquote {
font-family : 'Open Sans !important';
font-size : 16px;
font-style : normal;
font-variant : normal;
font-weight : 400;
line-height : 30px;
}
acyarchiveview .contentheading {
display : none;
}

jvstratum

Hi,

To start with, not all mail clients support webfonts. Does your mail client support webfonts? Most mail clients don't load things like images by default, did you click to make the images visiable?

RobertS

Yes, The Outlook client supports web fonts. We had it working in v5 and I copied the css over to v6 and it is no longer working. As a side note, you might want to test your newsletter in Office 365/Outlook 2016. Most of our client use that email platform and the last news letter you sent ( 25% OFF, Support policy important update and new release! ⛱), the formatting was completely out of whack.

I understand that the web font will not work on some email clients and the default font will be displayed.