Hi,
I'm trying to use images as the separators/resize hooks between my headers as opposed to using standard borders. An example of what I'm trying to do is to replicate the functionality of the asp:menu separator image, i.e:
<asp:MenuItem Text="New Button" SeparatorImageUrl="toolbar_separator.gif" Value="NewButton">
I've tried numerous things such as using the Header Template, but I don't see any obvious way to get the image into the proper location. Standard header borders won't do because I'm trying to create a Outlook 2007/Microsoft CRM 4 look and feel.
Is there any way to do this for the headers of the UltraWebGrid?
Conor
P.S: The CRM Template the UltraWebGrid offers is quite dated, and seems to have been more geared towards CRM 3. CRM 4 has a much different look and feel.
use appstylist then modify the css file
Sorry about the delay replying. I just returned to this issue now.
CSS sounds like the route I would like to take alright. This may also solve another 2 issues I ran into - styling the scroll bars and color of sorted columns.
Problem is I'm running into a few difficulties at the moment. I've been looking at AppStylist over the last couple of days and I can't seem to see anything that would help change the Header Separator image. (I can't see anything to change the styling of the scrollbars either). After opening AppStylist, I started a new style library and clicked on "WebGrid". I can see the ability to modify borders/filters/paging. I can even see ways to modify other images such as the image associated with the Filtering, Sorting, etc. But no way to modify header separator, scrollbar styles, or style of a sorted column.
If you have successfully solved any of this can you show me how?
Thanks in advance!
Conor.
The best way to do this is to use appstylist to get the general look and feel down, then save it and open up the webgrid css file, and fix up the css "file" (not using appstylist) for scrollbars you can just add the below code to the main grid class.scrollbar-base-color: #d6d1bd;scrollbar-arrow-color: #d6d1bd;scrollbar-3dlight-color: #d6d1bd;scrollbar-darkshadow-color: #d6d1bd;scrollbar-face-color: #59564d;scrollbar-highlight-color: #d6d1bd;scrollbar-shadow-color: #d6d1bd;scrollbar-track-color: #d6d1bd;
Only IE can color scrollbars though, so if you are using Chrome, Safari or Firefox you will not see those changes... I normally just through the above in my main css for html,form and body so it applies to everything (ie: textboxes, all scrollbars, dropdowns etc.)...The trick on IG stuff is to use appstylist to just get the base down (then never open appstylist again) and just modify the css files directly... There are a lot of stuff inside the css file that are not really exposed to the app stylist and as such you need to edit it manually... You can also do what I do which is use IE and go get the IE Developer Toolbar so you can select element by click see what the class file is on the devider then just add a that class name to your main css and use !important on all the values so it overrides any IG style that has been set.
Hi Chris,
That scroll bar styling worked a dream! Thanks for that. The method I ended up using was: I drilled into the elements of the grid using IE Developer and found the name of the underlying DIV that was driving the scroll bars. I created a style for that DIV, like you described, and it worked like a charm.
I used the "background-image" positioned right for the header separators. There's a minor flaw in that the very right column has an unrequired image attached to the right hand side, but I can live with this for now.
The only thing I have left to tackle is the background color of sorted columns. I'll start a new thread on this if I run into any issues.
Thanks for the help! Much appreciated.