Hey guys. I’ve been using Soft UI for a while now. I used custom themes, namely the Google Light Theme and the Dark Purple Theme by JuanMTech. I changed some stuff here and there, and only kept the changes inside my Home Assistant instance.
But now that card-mod themes are out, I’ve added a lot more to them, and made them public. Here’s their links:
Appreciate all your time and effort here (and in the CardMod/Custom Header threads).
Is there a way to manually install this theme? I don’t use HACS for my themes and simply manually edit my frontend yaml file. Of course it generate errors because it seems like I need to use the other files included in your repo. If this is possible, please provide steps and locations where files should be installed. Thanks.
Stephan
Edit: Nevermind…just realized the actual them was in the “Themes” folder. I was using the themes.yaml in the root. Got it working now.
Is there a new way to remove the forced single column? Previously, I was removing a section of the CSS from the theme, but I can’t seem to find it now.
Hey @KTibow, I’m runnning a reasonably modified version of your theme from 0.38 I think?
Having just updated to 0.117.5 from 0.115 i’ve lost my header.
Is there a specific section of code that deals with this to get it back?
I had a quick go at modifying the current version but there have been sooooo many changes that not much aligns anymore. which is otherwise a great effort i’m just a little stuck here
@KTibow looks like I got it back by adding the section of the updated theme
Partially Fixed the other more into screen issue too. Just have to slowly realign and update my theme with the current.
Cheers
# Header
header-height: 48px # Change this to 0px for header on the bottom. You're 1/3 there.
card-mod-root-yaml: |
paper-tabs$: |
/* Uncomment this for header on the bottom. You're 2/3 there.
#selectionBar {
bottom: unset !important;
}
*/
.: |
/* This moves the header up. */
app-header {
transform: translate3d(0px, -48px, 0px);
}
/* Let's change the background. */
app-header, app-toolbar {
background: var(--primary-background-color) !important;
color: var(--primary-text-color) !important;
}
/* We're still going to need a way to see that we're in edit mode. */
app-header.edit-mode {
padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
}
/* This changes the color of the currently selected tab. */
ha-tabs {
--paper-tabs-selection-bar-color: var(--primary-color) !important;
}
paper-tab[aria-selected=true] {
color: var(--primary-color) !important;
}
/* This hides the help button. */
a.menu-link[target="_blank"] {
display: none;
}
/* This makes the plus color the same as the background. */
#add-view {
color: var(--primary-background-color);
}
/* This hides the title. */
[main-title] {
display: none;
}
/* This hides the app-toolbar in edit mode. */
app-toolbar.edit-mode {
height: 0;
}
/* This moves the edit mode buttons back in. */
app-toolbar.edit-mode > mwc-icon-button {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
app-toolbar.edit-mode > ha-button-menu {
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
/* This adds a bit more padding, mainly for unused entities. */
app-header.edit-mode > div {
padding-left: 5px;
}
/* Uncomment this for header on the bottom. You're 3/3 there.
app-header {
top: calc(100vh - 60px) !important;
bottom: 0 !important;
transform: unset !important;
}
*/
Got it working now.
i’m just a little stuck here 
)