Changing the link color

Dash Python
1

I want to change the link color to have more contrast:

image
image143×128 3.31 KB

The links are built with markdown. This is how it is set in bootstrap.css:

image
image349×206 11.9 KB

I did not find a setting for the link color in React Grid: CSS Variable Reference | AG Grid.

I prefer not to change bootstrap.css. Is there a way to set that color in a post bootstrap.css css file? What is the easiest?

2

Hi @clodoaldo

Can you give a little more context? Is this a custom component? It looks like you are using the link in dash-ag-grid? Are you also using dash-bootstrap-components?

4

Yes, I’m using dag and dbc:

import dash_ag_grid as dag, dash_bootstrap_components as dbc
from dash import Dash, dcc, html, Input, Output, callback, ctx, hooks
...
columnDefs=[
	{'field': 'markdown', 'headerName': 'Produto', 'filter': True, 'cellStyle':{'width':'auto','text-decoration':'none','text-decoration-color': 'white'}, 'cellRenderer':'markdown', 'linkTarget':'_blank'},
	],
...
dashGridOptions= {
	"theme": {
		"function":
			"themeQuartz.withParams({backgroundColor: 'rgb(10,10,50)', foregroundColor: 'rgb(255,255,255)', headerTextColor: 'rgb(255,255,255)', headerBackgroundColor: 'rgb(10,10,50)', oddRowBackgroundColor: 'rgb(0, 0, 0, 0.03)', headerColumnResizeHandleColor: 'rgb(0,0,0)', fontSize: '1em', gridSize: '50%', borderColor: 'rgb(80,80,80)', decorationColor: 'rgb(0,0,0)'})"
    	},
...
app = Dash(
	__name__,
	external_stylesheets=[dbc.themes.CYBORG],
...
5

The Bootstrap stylesheet styles all the a elements in the app. You can override this by giving your grid a className and changing the style in a .css file in the assets folder

For example

dag.AgGrid(
    className="my-grid"
)


.my-grid a {
    color: red;
    text-decoration: underline;
}
2 Likes