How to override the style in a feature instance

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
11/30/2009 4:04:15 AM
Gravatar
Total Posts 31
There are 10 kinds of people in the world, those who know binary, and those who don't

How to override the style in a feature instance

Hello all,

I am developing a custom feature (user control inheriting mojoPortal.Web.SiteModuleControl).
It is instantiated at various pages and it works fine.

Now, I have a DataTable control inside this custom feature and I would like to use alternating row colors and header colors.

Now, the issue is, all content within the custom feature gets its default style from the skin of the site.
I suppose this is fine, usually, but I would like to override some aspects of the style, for example, the table cell background, font size, or in this case, ensuring that the settings actually take effect.

I have set the properties of the table in the designer view, the markup is updated, and in the designer it looks colorful and everything with alternating rows. But when it is rendered as a MojoPortal feature, it reverts back to the skin style.

So, my question is, how to override styles in a feature instance?

 

11/30/2009 3:09:47 PM
Gravatar
Total Posts 18439

Re: How to override the style in a feature instance

Are you talking about a DataGrid a GridView? A DataTable is not a control.

What properties are you setting on the control?

Now, the issue is, all content within the custom feature gets its default style from the skin of the site.

Maybe, maybe not, depending on what control you are using there may or may not be any css defined to style it but it can surely be styled by adding css to style it. Like ay other styling issue it is a matter of viewing the rendered source of the page to figure out what selectors you can use.

Hope it helps,

Joe

 

11/30/2009 8:01:48 PM
Gravatar
Total Posts 31
There are 10 kinds of people in the world, those who know binary, and those who don't

Re: How to override the style in a feature instance

Thank you Joe for helping out and sorry for the confusion, the control is a GridView control (bound to a DataTable).

I am setting properties on the GridView as follows (at design-time only, not programmatically):

<asp:GridView ID="gvwComponents" runat="server" CellPadding="0" GridLines="Horizontal" HorizontalAlign="Left">
<HeaderStyle BackColor="White" Font-Bold="True" ForeColor="Black" Font-Size="Small" VerticalAlign="Top" />
<AlternatingRowStyle BackColor="#D6E3F7" />
<FooterStyle BackColor="#009900" Font-Bold="True" ForeColor="White" Font-Size="Small" HorizontalAlign="Right" />
<PagerSettings PageButtonCount="30" Mode="NumericFirstLast" NextPageText="" PreviousPageText="" Position="TopAndBottom" />
<PagerStyle BackColor="Silver" ForeColor="White" HorizontalAlign="Center" Font-Names="Verdana" Font-Size="Small" />
</asp:GridView>

You mentioned CSS styles. Before using MojoPortal, I defined my own CSS styles (CSS classes) in a separate file and referred pages to it. As you can see in the GridView tag, there is no reference to any CSS style in the above tag.

How can I define a CSS style so that it forces an override? Do I just set the CssClass on the control? Can the settings be kept only locally for that control, or do they need to go into the site's CSS definition file?

When I view the rendered source I cannot see the table source since it is within an AJAX UpdatePanel and not there initially on the page. Is there any "trick" I can use to get the rendered page source of the table by using a browser if it was rendered inside an UpdatePanel (after a postback)? I suppose it is there, just not in source view (I use FireFox).

12/1/2009 8:32:10 AM
Gravatar
Total Posts 18439

Re: How to override the style in a feature instance

Hi,

You could put EnableTheming="false" on your GridView then I think it will use the properties you specified.

Alternatively you could set those properties on the GridView item in the theme.skin file of your skin.

However, if you are hosted in Medium Trust then it won'tuse the theme.skin file from your skin folder but will instead use the one from App_Themes/Default/theme.skin

Note that there are a number of CssClass settings on the GridView as you will see in the them.skin file and it is preferable to use Css classes rather than style properties because when you use style properties they render as inline styles and bulk up the markup as explained here.

http://www.mojoportal.com/understanding-the-theme-skin-file.aspx

To view the markup rendered by the update panel you could use the Firebug plugin for Firefox which allows you to inspect the html after the javascriopt has modified it.

Hope it helps,

Joe

12/2/2009 8:21:19 PM
Gravatar
Total Posts 31
There are 10 kinds of people in the world, those who know binary, and those who don't

Re: How to override the style in a feature instance

Dear Joe,

Thank you for the suggestions. When I set EnableTheming="False" for the GridView the alternate row color is displayed correctly.

You must sign in to post in the forums. This thread is closed to new posts.