How do I change color of portal or search box?

Developers & API CSS Themes
#1

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.

#2

did someone say CSS Wizard ? (@hannesfrank)

#3

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

1 Like
#4

(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
#5

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:

Captura de pantalla 2021-03-05 050119
Captura de pantalla 2021-03-05 050119844Ă—260 57.5 KB

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!

#6

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

image
image830Ă—1068 37.6 KB

#7

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
#8

How do your portals look right now?

#9

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:

Captura de pantalla 2021-03-06 033352
Captura de pantalla 2021-03-06 033352652Ă—582 79.7 KB

2 Likes
#10

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

2 Likes
#11

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

2 Likes