Add css

Hi y’all.
I want to add a codepen carousel, and I need to add html and css.
The html I get, but how do I add the css?
Do a write a css file and upload to server, or edit the css as exported from Blocs?
If the first, what do I title it and how do I reference to it from the html code?

Thanks in hopeful anticipation,
Andy

• Create a new text document.
• Give it a name, something like extra-style.css
• Open it and paste the css code in.
• Open the page options for the page that contains the HTML widget within Blocs and attach this file as an additional page resource (bottom of page options sheet).

Now when you export or preview in the browser this additional CSS will be included and you have no need to keep re-editing the exported Blocs style sheet.

Hope that helps :slight_smile:

1 Like

That’s easy; even for a numpty like me.
Do I need to change part of the html to ref ‘extra-style.css’?
It starts with…
`

  • indent preformatted text by 4 spaces`

No the classes will be loaded and available.

1 Like

Do you mean attach it in the Page Settings?

Yes sorry, I meant settings not options. :+1:

Is there a way to add site wide CSS in one step? There is a bug in Safari where 2x resolution images appear soft, but that can be largely solved with a bit of CSS coding. I’ve tried adding a .css text document to the page settings as a header file attachment, but I wondered if there was an easy way to apply this site wide, rather than adding it to each page one by one.

1 Like

@Norm Even though it is possible to add your own CSS using the method outlined, it is a step is not obvious, and a long winded way to so something basic. This is especially true because the ID and Classes are the most prominent thing at the top of the side panel. I really like the ID & Classes feature but I think adding your own CSS is way more difficult than it should be.

Also making this more accessible and perhaps including some basic CSS examples in the default CSS “window” could act as guidance to those who are not familiar with the power of this feature and how to use it.

Perhaps an extension similar to the current notes facility where you could add your own CSS as plain text in one simple accessible step is all that is needed.

2 Likes

Yes, it isn’t ideal. Blocs 3 addresses the issue :+1:

5 Likes

I added some retina.css to a project yesterday and ended up adding it to every page as an attachment, however it kept disappearing on all the pages apart from the home page. Is this normal?

I would also echo @webdeersign thoughts that applying CSS changes is far from intuitive at the moment and I had to find this thread on the forum to work it out. It’s good to hear that Blocs 3 will fix this.

1 Like

No, it should appear on every page, if its added on every page. Were you using 2.5?

Yes this is b3. I’ve added it repeatedly to all pages one by one, but they keep disappearing, apart from the home page.

Im not able to replicate that. If I create a project add a few pages, then add page header attachments. Every time I reopen the page they are still there.

Is there a specific moment when you notice they are gone? is it during using the app or when you come back to a project ie restarting Blocs?

I had Blocs open for a few hours last night. I would add the attachment, save it, then go to work on something else, but if I came back to that page later on it would be gone, despite having saved various project changes.

I’m seeing a similar issue with an image I added as a hosted asset and then replaced it with a differently named file. The image appears in preview I save the file and go away, but I come back it has returned to the old file name, which no longer exists on the server, so there is a blank space on the page. I’m having to redo work numerous times in some instances.