Custom CSS per object

Feature Requests
, ,
1

Because Custom CSS, I take up this request proposed in the original topic.

WHAT DO YOU RECOMMEND?

Customize the CSS of each object separately.

Just look at the numerous requests for customization options (gallery, list, …) that are feasible with CSS, except that CSS applied everywhere is no longer an “option” that can be activated on a given page when desired.

HOW COULD IT BE DONE?

Add a relation “Custom CSS”, file or text type (can be more secure to set a text type).
When this relationship is added to an object, custom CSS can be applied to the display.
The text version would perhaps be more secure, while the file version would be more practical (possibility of style library).

REAL WORLD USE CASES

Not all objects have the same display requirements!
Bigger or smaller text, more or less space, different background colors, different gallery displays, etc.

  • If I have a photo gallery, I want a black background to highlight them. But another gallery will always need a white background, so using global custom CSS doesn’t meet the need.
  • On some of my types, I want to hide the title of online relations in my page. This is possible in CSS, but I only want it on these object types!
    There are requests for this…
    Or I add this “CSS relation” to my type and configure it to hide relations titles. That’s it!

ADDITIONAL CONTEXT

When web sharing arrives, it will just be extremely relevant!
A company share? Hop, I add the file “CSS_Entreprise” to my CSS relationship and I’ve got the graphic charter to match (which helps sell Anytype rather than incur the wrath of Notion. Well, the fact that Anytype officially “gives” the data to everyone means that it’s not at all feasible at the moment, but maybe one day that will change).
A Christmas page to share with the family? I’m going all out with the Christmas theme!

Technically, I don’t think there are many obstacles (I only have in mind the security aspect of injecting only CSS, but that’s easy to control).

2

Added to backlog

4

A small up for this, with Publised to web that would be really great!

5

Yes I thought so as well, so you can modify the styles of web published objects.

6

This is a great idea! I have an object type named Quotes, that I’m trying to stylize like how mymind app does with quotes/highlight but can’t do that without affecting other type.

If this feature is implemented, it will open many possibilities.

7
  • First, make sure you have searched for a similar report by checking the Search Index :down_left_arrow:
  • Delete the instructions, then fill in each part of the below template clear & concisely

WHAT DO YOU RECOMMEND?

Define a specific feature that is missing or could be improved:

I would love to have the innate ability to have different CSS per workspace. Even better if it could be done for Pages.

HOW COULD IT BE DONE?

ᅟDetail the solution you would like to get what you need:

Users could have the option to specify a filepath for the custom CSS for that particular Space in Space settings, with the default assumed to always be custom.css unless specified otherwise.

REAL WORLD USE CASES

Describe how this feature would be used, and why it should be implemented. (Demo images are very helpful)

There’s research showing how different visual spaces corresponding to different contexts of one’s life can help you perform with better focus on each given context. The research I’ve seen addresses the physical world, but I wouldn’t be surprised if other research confirms that the same is true for the digital world.

Consider this example: If I have a space for work, general life, and organizing files for a DnD campaign, I want those to all exist in a mentally separate place in my brain so I can associate my Anytype page with only that context whenever I’m working on it. However, if my work Space in Anytype looks visually the same as my DnD Space, it makes it harder to mentally separate the two. I might instead prefer to have one of them on Notion, in a paper journal, or in Google Docs just so that there feels like a mental barrier between the places I’m visiting to do different things. Especially for individuals with ADHD such as myself, who in my opinion are more likely to use organization apps like Anytype in the first place, the ability to mentally categorize greatly increases efficiency.

All that aside, it would also just be really cool and would be great PR if someone made a bunch of Spaces with awesome CSS and could swap between them in a demo. What convinced me to get Anyspace was actually a demo of some really cool CSS on Obsidian that resulted in me wanting something similar but open-source.

RECOMMENDED ALTERNATIVES

ᅟExplain any workaround or feature you may have considered:

Since Anytype is open source I thought about just going in and rewriting the code to do this myself, which I will probably do eventually if this feature isn’t added, but I don’t have time at the moment to do so.

ADDITIONAL CONTEXT

ᅟIf further context, people, or related Feature Requests should be mentioned, do so right here:

8

I moved your post into the existing FR.
You can aslo vote here too :slight_smile: