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

Does this code work with the new release? I would like to see the side bar of the portal brighter and more visible :grin:

#13

It doesn’t, really. It only adds the upper line, although that works reasonable for me for now. Not very nice but not bad also:

Captura de pantalla 2021-09-24 185022
Captura de pantalla 2021-09-24 185022905Ă—202 55.6 KB

1 Like
#14 
/* Old code */
.portal-tree-node-box{
	border-left: 6px solid #B3C3FF!important;
	background-color: #ddffff;
}

image
image1429Ă—365 28.2 KB

I make the border left thicker and add a background-color for Portal…
You can remove background if you want…

Update Oct 8 2021 : I update this snippet for more customization…

/* New Code */

/* background color of portal */
.portal-tree-node-box {
	/*background-color: #ddffff;*/
}

/* The vertical line of portal */
.portal-tree-node-box:before {
	width: 5px!important;
    /*background-color: #ddffff!important;*/
}

/* When you put your cursor in portal */
.portal-tree-node-box--focused {
	border-left: 5px solid #b3c3ff!important;
	/*background-color: #B8DFFC;*/
}

/* When you select Portal for Deleting and Swapping */
.portal-tree-node-box--selected {
	border-left: 6px solid orange!important;
	/*background-color: #bfff00!important;*/
}
3 Likes
#15

Thank you! I like the background color :+1:

1 Like