Editing dashboard or header font and image colors

[CThomas]

Running Nextcloud 31.0.5, I would like to either tweak the font color on the dashboard page or, ideally, have a light, translucent bar behind the text and icon elements. Right now, the background image I selected is a little dark exactly in the sections here there is text, making it harder to pick out than I want. If I could have NC add a translucent bar, similar to what it already does with the widgets, behind the icons/text in the header along the top left and behind the welcome text on the dashboard (“Hello”, “Good morning..”, etc) that would be perfect. The alternative is to make those items a different color, white or light blue might work but I’d have to test.

[j-ed]

I think it is called “Theming” what you are looking for. You find related information in the Admin guide and also by using the search function of this forum. Example:

Theming: Custom CSS

A very cool app to hide items such as the remember login checkbox or the contacts menu – without editing the original CSS files. Thanks @juliusknorr! https://apps.nextcloud.com/apps/theming_customcss https://github.com/juliushaertl/theming_customcss

[CThomas]

Yeah, I had already done a few searches and tried digging into it. I’m not familiar with working with CSS except in very broad terms of what it does. The theming as built into NC is nice, but rather minimal. I have already gone through and set up all of the theming elements like I want, but I would like to tweak the base of the page, where it affects multiple apps. CustomCSS doesn’t seem to do anything, I have tried to use some of the examples to tweak the site layout but nothing happens. I found this post: How to force white not black icons. Using that post as a reference, in CustomCSS I have tried:

.app-menu-main .app-menu-entry img {
    filter: none !important;
}

This is supposed to make the icons along the top left white, but it doesn’t do anything. I have tried a few other examples in CustomCSS but again nothing changes the site.

The admin guide from Nextcloud doesn’t go into any of this. It goes over the built in theming controls, which just let you do the main branding, colors of the site, and background. I’m really wanting to add a ‘layer’ under the text where it is laid directly over the background to improve readability, duplicating what the dashboard does for it’s widgets. I have no idea how to go about that, not sure if CSS would even help.

Here is our current page at the moment:

I think that the greeting in the middle of the page gets lost in the background. Making it white would probably fix it, but putting a light grey box behind it like ‘Recommended files’ has would be better I think. Same for the navigation menu in the top left corner.

[CThomas]

Following up for anyone looking to do the same: TLDR - Learn CSS

I’ve not messed with CSS at all before. Looking into the file structure within the AIO container, I couldn’t find the CSS files that drive the site either. I installed the Custom CSS app into my NC installation then started playing around with different settings. Using a couple of examples I found I was able to pick apart the options I needed to specify in the Custom CSS section of the Theming admin setting. I was finally able to get pretty much exactly what I wanted after learning a bit about the command structure. Going from the previous screenshot, here is the new layout:

The only tweak I might do is to remove the corner radius in the top corners of the two menu bars along the top, but that’s a very minor aesthetic thing compared to the changes I was really wanting.

Here is the code I used in the Custom CSS section under the Theming admin page:

.app-menu-entry {
  width: 58px !important;
  display: inline-block !important;
}

.app-menu__list {
  display: inline-block !important;
  background: rgb(255, 255, 255) !important; /* Fallback for older browsers without RGBA-support */
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 10px;
}

.unified-search-menu {
  background: rgba(255, 255, 255, 0.8) !important;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  }

.notifications-button {
  background: rgba(255, 255, 255, 0.8) !important;
}

.contactsmenu {
  background: rgba(255, 255, 255, 0.8) !important;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.app-dashboard {
  text-align: center !important;
  h2{
    margin-top: 4%;
    background: rgba(255, 255, 255, 0.8) !important;
    border-radius: 10px;
    padding-right: 15px !important;
    padding-left: 15px !important;
    display: inline-block !important;
  }
}

The first block gives a bit more space around each icon in the menu bars along the top of the page. I tried removing it later and the icons went vertical so I’m guessing the other changes I made have made this required. I like having the icons not as crammed together anyway, so this works.

The second block defines the transparent border behind the menu bar section on the top left. It basically makes that section as defined by CSS (app_menu__list) have a white background with 80% opacity. It also gives the corners a bit of rounding.

the next 3 sections all manage the top right menu bar items. I specifically wanted the account button excluded from this tweaking, so I had to add each button separately. For each button, it gives it the same background as before (80% white) with the corners rounded only on the outside of the outer two buttons. This makes it look like one section instead of 3.

The last section only tweaks the greetings line (Good morning $name, etc) This was annoying to get right. The object as defined had a width of the entire page. I also wanted to drop the entire thing down a little bit on the page. I added a margin-top setting which accomplished this. Changing these settings made the text jump over to the left, so I had to specify the text-align setting to fix it. I gave the text the same background and radius as the other boxes. I had to add display: inline-block to make the background only affect the text, not the entire width of the page. I added some padding since I thought that the box was too tight up against the text.

One thing I’m still not sure of is when to add the !important flag in a CSS command. On occasion a setting just wouldn’t work and adding it in usually fixed it.

I found the sections I needed to tweak by tapping F12 when viewing the page. This brings up the code inspector in Chrome, which lets you see the objects defined in the underlaying code.