Unusual Color Formatting for Certain Components

nicoeat614 · November 14, 2018, 9:59pm

When changing the colors to several components, there are some things that are either oddities or questions that I have. I have updated from 2.0.1 to 2.1.0 and have noticed this behavior in both versions.

Defining the colors for UDCard in New-UDTheme -Definition hashtable has never worked for me. I have to define it in the New-UDCard cmdlet to get it to work. I have used UDTable in the same hashtable and that works. I have tried the hex value and rgb value and I get nothing.

	$ThemeColor = New-UDTheme -Name "Lotto" -Definition @{
  
	UDCard = @{ 

		BackgroundColor = '#a9a9a9'  #OR "rgb(169,169,169)" 
      
		FontColor = '#f4f4f4'
  #OR "rgb(244,244,244)"
		}
	}
	Start-UDDashboard -Port 1000 -Content {
   
	New-UDDashboard -Theme $ThemeColor -Title "Lotto Scratch Stats" @NavDashColors -Pages @($HomePage,$Global:ScratcherPage, $Global:DynamicPage) -Footer $Footer 
   
	 }-Name Dashboard3

Similiar to the first problem, the NavBar font color is always white regardless if I set it through the New-UDTheme or the New-UDDashboard cmdlet itself. I don’t know if this is due to the ideal that this can be changed in the paid version or the title/footer color is always white regardless. I tried setting my NavBar background to white and changing the font to a grey and I couldn’t see the title or the footer. And speaking of the footer, why is it showing two different colors? I feel like the UDDashboard color definition in the New-UDTheme and either the UDFooter defined there as well or defined in the New-UDFooter is doing something wonky.

What is the css class name to change the color of the font for the New-UDInput?

adam · November 15, 2018, 4:27pm

The first 2 items seem like bugs. Could you please open a GH issue for those? We can get those fixed.

For 3: The class for UDInput is ud-input

github.com

ironmansoftware/universal-dashboard/blob/master/src/client/src/app/ud-input.jsx#L188


    actions = <div className="card-action">
        {links}
    </div>
}


var submit = <a href="#!"id={`btn${this.props.id}`} className="btn" onClick={this.onSubmit.bind(this)}>{this.props.submitText}</a>;
if (!this.state.canSubmit) {
    submit = <a href="#!"id={`btn${this.props.id}`} className="btn disabled">{this.props.submitText}</a>;
}


return <div className="card ud-input" key={this.props.id} style={{background: this.props.backgroundColor, color: this.props.fontColor}}>
            <div className="card-content" >
                <span className="card-title">{this.props.title}</span>
                {fields}


                <Row>
                    <Col s={12} className="right-align">
                        {submit}
                    </Col>
                </Row>
            </div>

Does that not work either?

nicoeat614 · November 20, 2018, 9:14pm

Hey Adam,

Sorry for the late response and thanks for getting back. I wasn’t clear on what exactly I wanted to change in regards to the ud-input but I figured it out. For the font of the dropdown select (the default teal/green), I wanted to change that.

However, I was able to figure it out by defining it in the theme hashtable definition:

$ThemeColor = New-UDTheme -Name "Lotto" -Definition @{
     # Changes the font color of the select drowpdown 
  '.select-dropdown li span' = @{
    'color' = "#ff3b3f"
    }
}

Default Font Color of UDInput’s select dropdown:

Applying changes to theme:

Thanks again for the help and the product. I added all of this in here for newbies like me who want to be a little more creative with their sites.

psDevUK · May 15, 2019, 12:00pm

you figured out how to change checkboxes and radio button colours too?

psDevUK · May 21, 2019, 9:33pm

@adamdriscoll was very kind and showed me the light:-

gist.github.com

https://gist.github.com/adamdriscoll/7d2408dff9095123146efed911815d72

blueradio.ps1

Import-Module UniversalDashboard

Get-UDDashboard | Stop-UDDashboard 

$Theme = New-UDTheme -Name "test" -Definition @{
    '[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:after' = @{
        'background-color' = 'blue'
    }
    '[type="radio"]:checked+label:after, [type="radio"].with-gap:checked+label:before, [type="radio"].with-gap:checked+label:after' = @{
        'border' = '2px solid blue'

This file has been truncated. show original

Topic		Replies	Views
Unifying the color theme Universal Dashboard Help	2	609	June 22, 2019
A Color Changing Card or Box? Universal Dashboard Help	6	465	November 20, 2019
New-udparagraph Text colors broken? Universal Dashboard Help	8	1829	October 15, 2019
New-udCard not accepting colors Universal Dashboard Help	3	706	February 7, 2019
Cannot get UDStyle to work Universal Dashboard Help	4	789	January 6, 2020

Unusual Color Formatting for Certain Components

Related Topics