UPDATE PLEASE READ THIS POST INSTEAD HERE.
Part 1 Part 2
Continued from Part 1 linked above. please read the original post first to understand what these code snippets are meant to help with.
TLDR, how to target certain elements of mushroom cards with Card Mod.
Also just wanted to add that alot of the time there is more than 1 way to complete these same things, and its hard to find out what the “best” way is. so if you find a way that you think is better/easier. let me know in a message 
Style Other Buttons (Climate, Input Number, Cover, etc.
For some reason the buttons on the input number (and number selection on climate cards) are not the same type as the other buttons, so you have to target them slightly differently, but this can be accomplished as such:
Climate card (courtesy of @glyn). this also helped me figure out the other cards.
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: blue;
Input Number Card:
card_mod:
style:
mushroom-number-value-control$:
mushroom-input-number$: |
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: blue;
}
Cover Card (back to being similar to the other buttons, but still not exactly the same).
card_mod:
style:
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Lock Card:
card_mod:
style:
mushroom-lock-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Update Card:
card_mod:
style:
mushroom-update-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Media Card:
card_mod:
style:
mushroom-media-player-media-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Sure this would also work for a Vacuum, Fan, and Humidifier cards. but unfortunately i dont have devices for these. my assumption is that it would work like the above but be like the below instead but until someone can verify for me i am not 100% sure:
Vacuum:
card_mod:
style:
mushroom-vacuum-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Fan:
card_mod:
style:
mushroom-fan-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Humidifier:
card_mod:
style:
mushroom-humidifier-buttons-control$:
mushroom-button:nth-child(1):
$: |
:host {
background: rgba(var(--rgb-blue), 0.2);
border-radius: 12px;
}
ha-icon {
--card-mod-icon: mdi:mushroom;
--card-mod-icon-color: orange;
--control-icon-size: 50px;
}
Style Text that isnt Primary or Secondary
You can style text that is outside the header of the card like this:
Climate Card:
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container .value{
font-family: 'Lucida Console';
font-size: 30px;
color: rgb(var(--rgb-green));
}
Input Number Card:
card_mod:
style:
mushroom-number-value-control$:
mushroom-input-number$: |
#container .value{
font-family: 'Lucida Console';
font-size: 30px;
color: rgb(var(--rgb-green));
}
etc. i am sure there are other cards with values that you could style.
Style Sliders
Light Slider (courtesy of @rhysb):
card_mod:
style:
mushroom-light-brightness-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
Media Player:
card_mod:
style:
mushroom-media-player-volume-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
Input Number:
card_mod:
style:
mushroom-number-value-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
Cover Card:
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
--main-color: teal !important;
--bg-color: #d1eced !important;
}
etc. if there are any more card with sliders, i am sure you can figure it out. just inspect element and look at the name of the “mushroom-xxx-xxx-control” and use that as the name
And that is all i could think of for now to style. if you have any suggestions that could make for a Part 3. let me know