Superdense ⭐️ Help Center
All Categories Features Themes: How to style your bookmarks page

Themes: How to style your bookmarks page

With a little bit of CSS knowledge (or simply copy/paste skills) you can change the appearance of your bookmarks page. This means both your 'dashboard' and your public page.

To add custom styling to your page, go to the Design tab in your settings: https://app.superdense.com/settings/#design.

Change background color

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;
}

Add some gradients

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 youget started:

Using a photo and background

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; }

Change icon size

The default icon size is set at 22px in width and height. With CSS in the Theme settings, you can change this as desired, for example to 28px:

li a img { width: 28px; height: 28px; }

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.

Was this article helpful?