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
CSS Widget Grids - Border Color?
-
- New User
- Posts: 12
- Joined: Fri Nov 30, 2012 3:48 pm
- First Name: Mike
- Last Name: Rojek
- Company Name: McGard
- State / Province: New York
- Zip / Postal Code: 14127
- Country: United States
- Contact:
-
- Experienced User
- Posts: 2711
- Joined: Wed Aug 01, 2012 8:58 am
- First Name: Scott
- Last Name: Klement
- Company Name: Profound Logic
- City: Milwaukee
- State / Province: Wisconsin
Re: CSS Widget Grids - Border Color?
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.
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.
-
- New User
- Posts: 12
- Joined: Fri Nov 30, 2012 3:48 pm
- First Name: Mike
- Last Name: Rojek
- Company Name: McGard
- State / Province: New York
- Zip / Postal Code: 14127
- Country: United States
- Contact:
Re: CSS Widget Grids - Border Color?
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
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
- Attachments
-
- pic.png (9.91 KiB) Viewed 1215 times
-
- Experienced User
- Posts: 2711
- Joined: Wed Aug 01, 2012 8:58 am
- First Name: Scott
- Last Name: Klement
- Company Name: Profound Logic
- City: Milwaukee
- State / Province: Wisconsin
Re: CSS Widget Grids - Border Color?
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:
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.
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;
}
-
- New User
- Posts: 12
- Joined: Fri Nov 30, 2012 3:48 pm
- First Name: Mike
- Last Name: Rojek
- Company Name: McGard
- State / Province: New York
- Zip / Postal Code: 14127
- Country: United States
- Contact:
Re: CSS Widget Grids - Border Color?
Thanks Scott, works great! I use the Chrome Inspect tool all the time, I must have missed the vline and hline.
Mike
Mike
-
- New User
- Posts: 1
- Joined: Thu Aug 17, 2017 9:48 am
- First Name: Mark
- Last Name: Booker
- Company Name: Booker
- Country: United States
- Contact:
Re: CSS Widget Grids - Border Color?
Nice, thanks Scott. I got the color changed now.meojek wrote:Thanks for suggesting this awesome pre workout Scott, works great! Chrome Inspect tool all the time, I must have missed the vline and hline.
Mike
Who is online
Users browsing this forum: No registered users and 1 guest