Easy control styling with Foxy

By James at December 20, 2010 19:28
Filed Under: Foxy, Visual Style Designer, Design

Using third party controls like ComponentOne’s tools makes building your websites faster and easier. And, with all the themes that the C1 tools have, chances are you can find one which blends nicely. But if you can’t then what do you do? You really don’t want to go digging through all the CSS and graphics files to make a few changes, nor do you want to make your site match the theme you’ve chosen. Well fret no more, along comes Foxy.

5417.image_51FE523C

C1’s Foxy allows you to edit a theme from Studio for ASP.NET, or even create your own theme to use with the Studio for ASP.NET components. You can choose to edit just a few controls or the entire theme’s suite, drilling down as far as you want to. More than likely all you really need to do is just change the colors slightly, and this is where Foxy really makes it easy for you by allowing you to change the HLS properties of the theme. Here’s how to do it.

1. Open Foxy. It will be in your Start Menu at ComponentOne, Studio for ASP.NET AJAX, Style Designer, Foxy for ASP.NET

7571.image_49DF5247

2. I have found that “ArticFox” is the best one to modify via the Colorize feature as it is the most bland so all the elements will look good when colorized. From the VisualStyles window, select a ArticFox and drag it down to the Custom VisualStyles window

8231.image_155E7FFF

3. Expand the ArcticFox-Custom1 node, then double-click one of the controls. I am going to continue this using the C1Calendar. If you plan to only use a few controls in your project, select, then delete, the controls in this panel you won’t be using. Otherwise when you import into your project all of them will go across as well.

8463.image_251E1503

4. Double-clicking the control, opens the control in the Foxy designer surface, showing the hierarchy of the control’s elements, the control itself and the CSS for the control

2045.SNAGHTMLde2d4c4_1843BEE5

5. For now, just select the C1Calendar node in the upper left corner of the screen, then click on the Colorize button in the tool bar towards the upper right.

0451.image_1475F448

6. This brings up the Hue/Saturation dialog window

1057.SNAGHTMLde65d16_250DEF36

7. Click on the Colorize check box. You can then choose a color, or make changes to the current color with the Hue, Saturation and Lightness sliders. I’ve selected the teal color, (4 over, 3 down).

3005.image_716582D7

8. In the Hue/Saturation dialog window, start playing with the sliders to colorize the theme. You will see the changes in real time.

3201.image26_7A720E58

9. Setting the values to Hue: 124, Saturation: 35, Lightness: –46 makes a nice Olive color. Click on Apply and you will see your changes in the designer pane.

3288.image_2D619EC0

What’s really nice about the Colorize option is that it takes care of the graphics as well, giving them the same colors as the HTML elements.

The C1Calendar control, as most of the other C1 controls are set to inherit the font family of your own style sheet. However they may be times when you want the control to have a bit different font – a little bigger, bold perhaps, maybe a different color – and this is another area where Foxy makes it easy.

1. In the left hand control panel, select the “Control” node, just after the parent node, “C1Calendar”

2. In the Ribbon Font bar, select a font family from the drop down. The changes will be made in real time so you can play around with the different settings to get just the look you want.

5672.image_302753B3

When you get all your changes made, click on the Save button. So, we made this nice theme for our calendar, now how do we get it into our project?

1. In your ASP.NET Web Application Solution Explorer, right click on the project name and select Add, New Folder. Name the new folder, “VisualStyles”, then right click on the new folder and select Add, New Folder, naming this folder the name of the theme you just created. On this new folder right click again and select Add, New Folder, naming this one C1Calendar.

5556.image_039E23CD

2. Add the custom css file you created above by right clicking on C1Calendar then selecting Add, Existing Item. Navigate to where Foxy saves your files on your computer, typically “C:\Users\<UserName>\Documents\C1FoxyVSD\<Custom Theme Name>\<Control Name>. In this case the folder I am looking for is “C:\Users\James\Documents\C1FoxyVSD\ArcticFox-Custom1\C1Calendar\styles.css”. Select the file, then click on Add.

3. We need to add the images for the Calendar control as well, so right click on the C1Calendar folder in the Solution Explorer and select Add, New Folder, naming it “Images”. Right click on the new “Images” folder and select Add, Existing Item, then navigate to the same folder as you went to in Step 2 above, “C:\Users\James\Documents\C1FoxyVSD\ArcticFox-Custom1\C1Calendar\Images”. Select the two files, “calendar.png” and “calendar-repeater.png”, then click on Add.

4. Add a C1 Calendar control to your page, by dragging it from the Toolbox to the aspx page in Visual Studio, then click on the Design tab in the lower left corner of Visual Studio.

5. Click the Calendar control’s Task button to bring up the Task dialog

4774.image_33E4F883

6. Change the VisualStylePath to ~/VisualStyles, this is the folder you created in step 1

7. Uncheck the UseEmbeddedVisualStyles check box

8. Click in the VisualStyle drop down and your Custom style will be present. Select it

6136.image_2AA8BD42

9. Run your application and you will see the calendar rendered with the new Visual Style

2806.before_6855A4FE 7840.after_0653B2F3
Before styling with Foxy After styling with Foxy

In this article we talked about how easy it is to use ComponentOne’s controls. We also talked about how using the Visual Style designer, Foxy, can make it really simple to make small changes to the controls to add your own colors and emphasis. Foxy is a really great tool, that can make your development even more fun and productive.

Happy Programming,

James

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading


About the author

James James is a five time and current Microsoft MVP in Client App Development, a Telerik Insider, a past Director on the INETA North America Board, a husband and dad, and has been developing software since the early days of Laser Discs and HyperCard stacks. As the Founder and President of the Inland Empire .NET User's Group, he has fondly watched it grow from a twice-a-month, early Saturday morning group of five in 2003, to a robust and rambunctious gathering of all types and sizes of .NET developers.

James loves to dig deep into the latest cutting edge technologies - sometimes with spectacular disasters - and spread the word about the latest and greatest bits, getting people excited about developing web sites and applications on the .NET platform, and using the best tools for the job. He tries to blog as often as he can, but usually gets distracted by EF, LINQ, MVC, ASP, SQL, XML, and most other types of acronyms. To keep calm James plays a mean Djembe and tries to practice his violin. You can follow him on twitter at @latringo.

And as usual, the comments, suggestions, writings and rants are my own, and really shouldn't reflect the opinions of my employer. That is, unless it really does.

James Twitter Feed

Recent Comments

Comment RSS

Month List