How do I change color of portal or search box?

Hi, all. I find the color of the portals to be too bright and would like to customize it. Any CSS wizard that can help me? Would be very grateful.

did someone say CSS Wizard ? (@hannesfrank)

I was too shy to tag him once again, hahahaha :face_with_hand_over_mouth:. Thanks, @Karthikk!

1 Like

(Screenshots are always helpful - for both people trying to answer and people just skimming questions to see if that is what they are looking for. :wink:)

Your question is a bit unclear as to what color of the portal exactly you find too bright. Here is the CSS to configure the portal borders. Replace red in the first lines with whatever color you want:

:root {
  --search-portal-border-color: red; /* default: #add8e6, in dark mode: #f398f3 */
  --portal-border-color: red; /* default: #add8e6 */
}

#show-embedded-search-button {
  border: 2px solid var(--search-portal-border-color);
}

#hierarchy-editor .portal-rem .portal-rem-top--embedded-search-top {
  border-top: 4px solid var(--search-portal-border-color);
}

#hierarchy-editor .search-portal-tree-node {
  border-left: 2px solid var(--search-portal-border-color);
  border-right: 2px solid var(--search-portal-border-color);
}


/* Search Portals get different color in dark mode */
.dark-mode #show-embedded-search-button, .dark-mode .indented-hierarchy-editor-rem--after-portal-embedded-search, .dark-mode .indented-hierarchy-editor-rem--portal-embedded-search, .dark-mode .isTypeChildHierarchyEditorRem, .dark-mode .portal-rem--embedded-search, .dark-mode .portal-rem-top--embedded-search-top, .dark-mode .rem-in-embedded-search {
    border-color: var(--search-portal-border-color)!important;
}

#hierarchy-editor .portal-rem .portal-rem-top {
  border-top: 4px solid var(--portal-border-color);
}

#hierarchy-editor .portal-tree-node {
  border-left: 2px solid var(--portal-border-color);
  border-right: 2px solid var(--portal-border-color);
}

#hierarchy-editor .portal-rem {
  border-left: 2px solid var(--portal-border-color);
  border-right: 2px solid var(--portal-border-color);
}

#hierarchy-editor .hierarchy-editor__after-portal {
  border-top: 2px solid var(--portal-border-color);
}

/* There is a class naming the portals "blue" explicitly. This implies the more portal colors for the future. */
/*
#hierarchy-editor .portal-rem--blue {
  border-color: var(--portal-border-color);
}
#hierarchy-editor .hierarchy-editor__after-portal--blue {
  border-color: var(--portal-border-color);
}
*/
1 Like

Hey, Frank!

Thanks as always. I tried but failed with your code.

This blue/cyan color is the one I want lighter. Is a simple portal made by ctrl + click on a reference:

That is the only kind I regularly use, since there is still not sign of queries (actually, I believe they took them out from the feature description, right? I used to say “Queries (soon)” or something).

Thanks again!

I don’t know. It should look like this when pasted into Custom CSS:

Oh, oh, oh, I see! I copied only part of the code, but now I made it work with the hole code. Sorry about that. Thanks, mate, worked perfectly!

1 Like

How do your portals look right now?

Oh, you see, nothing fancy. I just like my colors to be more in the pastel side, hahaha. Here is how it looks, with my color scheme:

2 Likes

I love it :heart_eyes:, certainly looks more pleasant and pleasing!

2 Likes

Thanks, mate. A little tweaking goes a long way! For now I’m pretty happy :slight_smile:

2 Likes