Design: How to style your bookmarks page

Change the background

There are 4 options to change the appearance of your bookmarks page. This means both your 'dashboard' and your public page.

1. Upload an image

2. Select a photo from Unsplash

3. Select a predefined gradient

4. Pick a color

For each of these options, you go to Settings > Design and click the button Select a new background.

1 - Upload an image

On the first tab 'Upload' click Choose file and select an image from your device. To manipulate the image with a (semi-transparent) color overlay, see option 4 below.

2 - Select a photo from Unsplash

On the second tab 'Unsplash' you can scroll through the presented photos or select a specific category first.

💡 At this moment, Unsplash only offers us preselected images. We expect to offer a search box soon as well, however there is no ETA for that.

To manipulate the photo with a (semi-transparent) color overlay, see option 4 below.

3 - Select a predefined gradient

On the third tab 'Gradients' you can scroll through a long list of gradients and pick your favorite! 😍

To tweak the gradient with a (semi-transparent) color overlay, see option 4 below.

4 - Pick a color

On any of the 3 tabs, you can select an Overlay Color. This allows you to make a semi-transparent overlay in different blend modes, or pick a solid background color.

Click the color swatch on the bottom left to select a color. You can choose one from the palette, or click the bar next to the OK button to select a custom color.

Once you have selected the color, you can set two more options:

• Opacity - this defines the level of transparency, from full to none.

• Blend mode - The default 'normal' blend mode will just overlay the background with the selected color. Any of the other blend modes - like multiply, screen, and overlay - will mix the color with the background differently. Just play with it to see what you like or learn more about blend modes.

Custom CSS

With a little bit of CSS knowledge (or simply copy/paste skills) you can even customize it more. To add custom styling to your page, go to the Design tab in your settings: https://app.superdense.com/settings/#design.

In the text area below "Styling" you can add custom CSS to make all sorts of changes. Here's a list of possible options:

body .appbar { background: gold; }

body .appbar { background: none; }

.user-static-link { display: none; }

.hovering-item-text { height: 12px;  }
.hovering-item-text p { color: yellow; font-size: 12px; }

Legacy CSS examples

💡 Some options below are no longer relevant as we have a native, built-in way to pick a beautiful background (as described above). But since technically it still works, we leave them here as legacy references to show what you can achieve with custom CSS.

Change background color (legacy)

If you want to change the background color of your page, for example to go for a light theme, simply add some CSS code like this and save changes:

body {
  background: silver;
}

👉 If you use the light theme, please change body to body.light in the examples given here.

Add some gradients (legacy)

As a single, solid color may be a bit dull, you can also add some more vibrance to the layout by using gradients:

body {
  background: linear-gradient(110deg, #16222a, #3a6073);
  height: 100%;
  min-height: 100vh;
}

Note: The height/min-height are needed here to cover the whole page, even if your bookmarks don't fill up the entire browser screen.

For inspiration or help with gradients, these sites will help you get started:

• Color gradient generator

• UIgradients

• 3-Color-Gradients

• CSS gradient maker

Using a photo and background (legacy)

If you want to use a photo or other image file, you need to have the full URL to the source file:

body { 
   background: url(https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?w=1800&q=80) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  height: 100%;
  min-height: 100vh;
}

Photo by Daniel Leone on Unsplash

Lighten or darken the background image

With a little CSS trick, you can add a color overlay to the image if you want to change it a bit, like darken the image. By adding a gradient like in the example below, you add a dark layer to the image and you can change the opacity with the last value in the rgba color settings. The closer to 1, the less transparent it is. So a value of 0.7 results in 30% transparency:

body { 
   background: 
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)),
        url(https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?w=1800&q=80) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  height: 100%;
  min-height: 100vh;
}

Photo by Daniel Leone on Unsplash

Change the width of your bookmarks column

By default, the bookmark are displayed a centered column of max 600px width. With such a relatively small column it's easy to have a good overview of all your bookmarks. However, if you have a large number of icons to show, it may be desired to have a wider column. You can change this by adding the following CSS to your theme:

.dense { max-width: 840px; }

This will change the width to both your account page where you manage your bookmarks and also your public profile page, just as all other custom CSS settings.