Separator for web panels
-
Hi,
--
"Off Topic Tip"
Follow the Signature's Backup | Reset link.
Take the opportunity to start a Backup plan and even create a Template Profile.
Windows 7 (x64)
Vivaldi Backup | Reset + Extra Steps -
@sjudenim said in Separator for web panels:
I'm assuming that you are using a blank button to create the divider, I suspect Vivaldi is using a default icon for buttons that do not generate one.
I noticed my method is broken in the snapshot as well, but that's an easy fix.
Try this
#switch button { margin-bottom: 5px; } /* Panel group seperators */ #switch > button:nth-child(2)::after, #switch > button:nth-child(4)::after, #switch > button:nth-child(6)::after, #switch > button:nth-child(7)::after { content: ''; display: block; position: absolute; background-color: var(--colorFg); margin-top: 38px; width: 50%; height: 1px; border-radius: 2px; opacity: .5; }
I've spaced mine out a little since I don't have many showing, but you can remove the first line of code if you don't like it and then adjust the
margin-top
to something like34px
or35px
Hi,
I've been trying again with your code, actually the thin line connected also to the VTheme looks nicer for me.
I've been counting the WPanels position to locate the Separators, but just noted that hiding WPanels automatically pushes to relocate the Separators out of its position (split the Panel in groups despite hidden ones it's the idea).
Would be somehow possible to manage this?
--
Left: @oudstand's Code - Movable / Fixed Position
Right: @sjudenim's Code - Dynamic / Static PositionThank you
-
@oudstand said in Separator for web panels:
.panelbtn[title*="empty"] img {
height: 1px !important;
background-color: gray !important;Replaced
Background-colour
withbackground-color: var(--colorFg)!important;
Now takes the Theme's Colour
For a thinnest line can't figure out how
-
The separator will not move because it's in a fixed position. It's the panel buttons you add and remove that are moving. You can just renumber the lines but if you add and remove a lot then that can be annoying.
I haven't tried the other code but it has a
height
of3px
set, change that to1px
Also, as a tip. When using
margins
,padding
, etc. the values work like a clock: top-right-bottom-left. You can also just use 1 value for even all around or 2 for even top-bottom and left-right.So using the other code you change this
margin: 3px 0 3px 0
to just this
margin: 3px 0
that means that the top and bottom are
3px
while the left and right are0
-
Thanks
Just tested and didn't noticed changes.
I will need to check it more in detail.
--
Thank you for the formation about the coordinates.
Totally forgot and nor took the notes yet neither researched.Thank you
-
@almalexiel said in Separator for web panels:
I'd like to use this feature too but I don't understand where you put the CSS?? When I create an empty page there's nowhere for me to enter the CSS. If someone can help I would be greatful!
Did you get it to work? Otherwise let me know.
-
@oudstand Hi, could you tell me step-by-step how to use this cool feature?
-
--
"Off Topic Tip"
Follow the Signature's Backup | Reset link.
Take the opportunity to start a Backup plan and even create a Template Profile.
Windows 7 (x64)
Vivaldi Backup | Reset + Extra Steps -
@gsanson said in Separator for web panels:
@oudstand Hi, could you tell me step-by-step how to use this cool feature?
Hey @gsanson. You can follow the guide that @Zalex108 posted to enable CSS mods. Afterwards you have to create a CSS file where you place the code I've provided. After restarting your browser, you can create a new web panel where you enter as URL "empty". This will create a separator that can be moved around.
-
@oudstand You can use
currentColor
to give separator the same color as all button's svg, which will auto adjust according to chosen theme's background color, white for dark theme & black for light theme. -
@dude99 this should work as well. Since I've customized the color of my panles container it's not the best solution for me.
-
Hi,
With the latest Snap 2861.3, Separators are brokenWould you mind to take a look into it
Thanks in advance!
-
-
This post is deleted! -
-
@Zalex108 said in Separator for web panels:
@oudstand
PS: Aren't as cool as yoursThank you very much
I've decided that it's easier to use the separators provided by Vivaldi and style them.
This is how I use them now:#switch .toolbar-divider { height: 4px !important; max-width: 20px; margin: 5px; border-radius: 10px !important; background: gray !important; } #switch .toolbar-divider button { display: none; }
PS: for Spotify showing up at the bottom I placed it below the flexible space -
I'll check later!
They look nicerThx!!
-