TentmakerHelp

Custom CSS and embeds

On this page

These two screens are under Advanced in the left menu. They are for Managers and Owners. Editors cannot open them. Most churches never need either. Read the safety notes first.

Custom CSS

CSS is the language that tells a web page how to look. If you do not know what that means, you do not need this screen. Use Look and feel and Templates instead (see Settings and branding).

The Custom CSS screen lets someone who knows CSS style the site beyond what the other screens allow, for example to change one heading on one page.

Safety notes, in plain words

  • Your CSS only affects your own website. It cannot reach another church's site, and it cannot reach this admin.
  • Tentmaker checks every rule when you save. Anything that loads another file, covers the page, or reaches outside it is refused. The screen tells you the line and the reason. Nothing is saved while anything is refused, so what is stored is always clean.
  • Tentmaker rewrites each rule so it stays inside your page. A rule meant for the whole page, such as one for body, is refused. Use main or a page's own class.
  • It can still make your site ugly or hard to read. If that happens, use safe mode (below). It takes one click.
  • It is worth asking someone who knows CSS to help. A mistake can only change how the site looks. Your pages and words are not touched.

Writing and checking

The box under Your CSS shows how many lines you have, and "of 30 KB" which is the most it can hold. Under it, What can I write? lists what works:

  • Ordinary rules, such as .hero h1 { color: #1c2f4a; }.
  • @media (max-width: 40rem) { ... } to style phones.
  • Every page has a class of its own, such as .pg-about for the page at /about, and one for its layout, such as .lay-wide. Use them to style one page.
  • Names you can rely on, such as header.site, nav.site, .hero, .card, .callout and footer.site. The developer list is in docs/CSS-HOOKS.md.
  • Your colors, which you can change or use with names that start with --tm-, such as --tm-accent.
  • Pictures only from your own library, written as url(/_media/ and the picture's id. Copy the id from the Media screen.

Not allowed: @import, @font-face, scripts, position: fixed or sticky, a z-index above 20, and addresses of other sites. Choose fonts on the Look and feel screen.

Beside the box, How it looks shows a page of your site with your CSS applied. Use Show this page to choose which. The preview shows pages as they are published, so a page you have not published yet shows as not found. The preview only updates your view. Nothing is live.

If a rule sets a text color and a background color with poor contrast, a warning appears. It does not stop you saving, but people may struggle to read the text.

Saving and publishing

  • Save draft keeps your CSS. Visitors do not see it.
  • Publish makes it live.
  • Version history lists every save. Restore makes an old one your draft.
  • If someone else saved a newer stylesheet while you worked, you see "Someone else saved a newer version of the stylesheet."

Safe mode

At the bottom, Safe mode has a single button: Turn custom CSS off. Visitors see your site without your CSS at once. Nothing is deleted. When you have fixed things, press Turn custom CSS back on. While it is off, the screen says "Custom CSS is turned off".

Embeds

An embed shows something from another website inside one of your pages: a video, a map, a giving form, a calendar or your sermon archive. You place it with the Embedded content block (see Blocks). Any editor can place one. But it only works for sites on your church's list, and Managers and Owners control that list on the Embeds screen.

Safety notes, in plain words

  • When a page shows another site's content, that site can see who is visiting and which page they are on. It may set its own cookies.
  • Some sites run a script. A script from another site runs on your page and can read what a visitor types into it. Allow only sites you trust.
  • That is why the list exists. Only sites on it can appear on your pages.

The list

Your list starts with common sites: YouTube, Vimeo, Google Maps, Google Forms, Google Calendar, Tithe.ly giving and the AmenPreacher sermon archive. The screen has two lists.

Sites that appear in a frame: each is shown in a box on the page. The other site cannot take over your visitor's tab. A table shows each site's Kind (Frame only), its status (On or Off) and two buttons:

  • Turn off or Turn on. Pages that use a site that is off stop showing the embed at once.
  • Remove. It asks first.

Sites that run a script: only a few are offered, each one that Tentmaker has been set up to use in a fixed way. A site here shows Runs a script. To add one, choose it under Allow a script from and press Allow it.

Adding a site

Under Add a site, type the Site name, such as give.example.org. If you paste a whole address, only its name is used. You can add a name for it, and tick Also allow its subdomains if you want www.example.org to work for example.org. Press Add to the list.

If someone pastes a site that is not on the list

They can save their work, but they cannot publish the page. The Checklist says which site it is. A Manager or Owner sees an Allow this host button there. An Editor does not, and should ask a manager.

What an embed block keeps

When someone pastes a link or an embed code, Tentmaker keeps only the address. Everything else that came with the code is thrown away. A YouTube or Vimeo link is turned into the right player address. Every embed needs a title for screen readers.