It can be a good option to hide the palette picker buttons by default and only have them shown if required. You can view a demo of what we are going to create here.
Basically what we are going to do is add a 'trigger' (an SVG stack in this example) inside a container alongside Palette stack. We are then going to fix the position of this container to the top right of the screen. Finally we will set the Palette stack to be hidden by default and only shown when the container is hovered over.
All of this is achieved with just a few lines of CSS (add the following snippet to either your RW page or RW project CSS window - depending on if you are using Palette on one page or your whole site):
.pal-top {position: fixed !important; z-index: 10; top: 100px; right:0} .pal-hide {display: none} .pal-show:hover .pal-hide {display: block}
Step-by-step
Step 1
Add a container stack to the page. If using Source use the Coder stack (set to accept stacks as content and with a wrapper div). If using F6 use a Container stack. Add the class names pal-top and pal-show to the container's CSS box.
What are these CSS class names doing?
The pal-top CSS class name will set the container to pick up the related bit of CSS from above which fixes the position on the page and places it at the top-right (well 100px from the top). It also gives it a z-index of 10 which will ensure it sits above any other content on the page. The pal-show CSS class name sets the content that has been hidden (or at least will be in Step 3 below) to show when the container with the class name pal-show is hovered over.
Step 2
Add an SVG stack into the container and add the desired SVG code (follow steps 1-5 on our Creating palette picker buttons page for an example).
Step 3
Add another container stack (below the SVG stack but within the other container) and add the class name pal-hide to the container's css box. This CSS simply sets this container and its content to be hidden (the 'display: none' bit in the css from above)
Step 4
Add your Palette stack into this new container
Step 5
Style the SVG and Palette stacks to suit your needs / design. e.g. adding borders, padding, margins, background colors etc. You will need to play about with this to get things displaying exactly as you wish.
That's it! You have a fully operational palette picker trigger!
