Page 1 of 1
CSS Widget Grids - Border Color?
Posted: Wed Jun 28, 2017 1:58 pm
by mrojek
Profound,
Having issues setting the border color in my custom grid widget. Which built-in class for the grid widget do I use? I saw that in version 4.6 that this had been allowed.
Thanks,
Mike R
Re: CSS Widget Grids - Border Color?
Posted: Wed Jun 28, 2017 3:35 pm
by Scott Klement
I'm not sure what you are asking. Are you referring to setting the "css class" for a grid? That is not a new feature, it has always been there. You mention 4.6 which is about 4 years old and no longer supported... But, I think what you're seeing there is that we added CSS buttons, CSS panels, etc. None of these are grids...
Can you explain better? The clearer idea we have of what you want to do, the more likely we'll be able to help you.
Re: CSS Widget Grids - Border Color?
Posted: Wed Jun 28, 2017 4:12 pm
by mrojek
Scott,
Thanks for responding! I am referring to changing the attributes on a Custom Widget (
http://www.profoundlogic.com/docs/displ ... rid+widget). Is there a way to change the border color attribute of the grid using CSS? See the screen shot of the grid attribute.
Thanks,
Mike
Re: CSS Widget Grids - Border Color?
Posted: Wed Jun 28, 2017 4:32 pm
by Scott Klement
Yes, you would remove the "border color" property, and use a CSS class instead.
The vertical lines in the grid are given the "grid-vline" and "CLASSNAME-vline" css classes. The horizontal grid lines are given "grid-hline" and "CLASSNAME-hline" classes, where CLASSNAME represents the CSS class applied to the grid. For example, if the CSS class property is set to "simple-grid" then it would use "simple-grid-vline" and "simple-grid-hline".
That way, you can set a style that applies to all grids, and you can also set a style that applies to grids with a specific CSS class. Like all CSS classes, they cascade, so the settings in the CLASSNAME-hline/vline override anything set in the grid-hline/vline. the "border color" takes precedence over both.
So if you wanted something with the "simple-grid" CSS class to have red borders you would do:
Code: Select all
.simple-grid-hline {
border-color: #FF0000;
}
.simple-grid-vline {
border-color: #FF0000;
}
I would suggest that you learn how your browser's CSS inspector tools work. They will help you out greatly with understanding and debugging stuff like this.
Re: CSS Widget Grids - Border Color?
Posted: Thu Jun 29, 2017 10:48 am
by mrojek
Thanks Scott, works great! I use the Chrome Inspect tool all the time, I must have missed the vline and hline.
Mike
Re: CSS Widget Grids - Border Color?
Posted: Sun Aug 27, 2017 9:44 am
by BookerMar
Nice, thanks Scott. I got the color changed now.