CSS, where to add it? What file to use?

Developer help Installation
1

Is there a specific stylesheet that should be used for posts, pages and home page or do I have to add the same CSS to multiple files?

Or is it better practice according to Ghost to add the needed CSS as inline when, for example, creating a HTML card? Or should I use a class and add it to one or more files?

Is this dependent on theme or global?

2

I would use Code Injection to add CSS. It is available as a global setting and also for posts and pages.

3

Ok, I’ll give that a shot. Is there a way to give it a higher / lower priority so that it overwrites any existing CSS classes?

I already tried getting rid of the “powered by” class without success.

4

This is the head tag of the default.hbs file. This file is loaded on every single page.
The {{ghost_head}} tag is where the code injection will take place, it’s also mentioned in the settings.
The tag is loaded as last and therefore it has the highest priority.

<head>
    {{!-- Document Settings --}}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    {{!-- Base Meta --}}
    <title>{{meta_title}}</title>
    <meta name="HandheldFriendly" content="True" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    {{!-- This tag outputs SEO meta+structured data and other important settings --}}
    {{ghost_head}}
</head>
5

BTW Each individual Tag also has its own Code Injection.

You can also use the CSS !important Property in any of your CSS, as discussed here:

6

Ok. Thanks for the clarification. I’ll try with plain CSS and with the tag as well. So far, no changes. I’ll get back to you with the result.

7

Ok…
I inspected and got the class of the close icon for the subscribe. I then inserted that into the head for code injection (with and without the <style> tag and with and without the use of !important) without any change.

Am I doing this wrong or am I missing something?

8

My mistake… I missed the fact that it’s an SVG.

9

Allright glad you figured it out :slight_smile:

10

I did try, as a test, to remove the .copyright class with display:none; without success. Tried with and without the style tag.

11

Portal is loaded within an <iframe>, so trying to target and style elements inside is not possible with CSS.

12

Ok…
I thought the whole point with the code injection (header / footer) was to enable users to easily customize various things.

Anyhow. Still learning how Ghost works and how to use it. Might just add all the CSS to an existing file and be done with it.