JM Tech Power

Guides

Style your homepage with CSS: what stays and what is removed

← 全部文章 邮箱 RSS Atom

Your personal homepage at yourname.jmtechpower.com can have its own colours, spacing and fonts. You write them as CSS in the homepage editor, and the site makes sure they only ever change your homepage.

Where to write it

  1. Open the Workspace menu and choose My homepage.
  2. With no block selected, the Page style (custom CSS) box appears in Properties. If a block is selected, press Esc or the ← Page style (custom CSS) button to get back to it.
  3. Type your CSS. The preview updates as you go; press Save when you are happy.

What you can change

  • Ordinary rules: h2 { color: teal } or body { background: #fdf6e3 }. body, html and :root simply mean your whole homepage.
  • @media and @supports, for example a smaller heading on phones, and @keyframes animations.
  • Fonts already on your visitors' computers, such as font-family: Georgia, serif.
  • Pictures, when the address is a full https:// address on jmtechpower.com or a homepage address on it.

Every rule is limited to your homepage, so it can never change the site header, menus or anyone else's page. The box takes up to 20,000 characters.

What is removed

  • Other @-rules, such as @import and @font-face — so web fonts and outside style sheets are not loaded.
  • Outside images or links: any url() that is not https on jmtechpower.com. A short address like url(/static/…) is removed too — write the full https://jmtechpower.com/static/… address instead.
  • Unsafe code, such as expression(), javascript: or behavior.
  • Comments are dropped; they never reach your page.

Reading the note

When something is removed, a line appears under the box, for example: Removed from your page style: 1 @-rule such as @import or @font-face; 1 declaration with an outside image or link. It counts what was left out, in the three groups above, so you know why a rule had no effect. Fix or delete those lines and the note disappears with the next preview.

More on your homepage: Design your own homepage and Share your homepage. More guides at https://jmtechpower.com/articles.

评论 (0)

暂无评论,成为第一个评论者!