In my theme, I want to override some styles of the Orchard.Search module, more specifically the search form (Parts/Search.SearchForm.cshtml). The module styles are defined in a file called orchard-search-search.css. Those styles are included in the SearchForm template with Style.Require("Search");

I include my style sheets in my Layout.cshtml file using Style.Include("styles.css");

The way I understand it, my styles.css should be taking precedence over the orchard-search-search.css so my theme can override module styles, is that correct?

The reality is just the opposite. The module css gets loaded last, so my overrides are not taking effect.



I can work around this using !important; in my style sheet, but I was convinced that in theory, theme styles should take precedence so they can easily override a modules appearance.

Am I overlooking something?

Is the search form coming from a widget? Or are you doing something like adding the search form directly from your layout page? I think some themes do this. If this is the case you could try moving that above where you load your styles from.

It's the Search Form widget, placed in the zone AsideSecond. Pretty standard I guess.

This API needs more love. One thing you could do right now is implement your own ManifestProvider, redefine the "Search" resource and specify a higher version number than the one used in the Search module.

@sfmskywalker: Not sure what you are saying. Am I to override a bug in the search module in my theme? I think in this case, !important in the CSS will do. I'm gonna add it to the issue tracker then.

No, I was saying to create a class in your theme, derive it from IResourceManifestProvider, define a Style resource called "Search", configure it with the url to your own CSS file, and set its version number to 2 (as an example).
But that's for masochists. Adding the !important will work too of course. :)

Yes please create a ticket about this issue if there isn't one already. Thanks.

Follow up on this topic.

I am working with same Orchard.Search module. I modified the (button input submit) from displaying the text "search" to instead display image in the file Parts/Search.SearchForm.cshtml. Additionally I started customizing the module styles in orchard-search-search.css. Realizing this will affect any future applications of the search form led me to think I am approaching this the wrong way.

From what I read in this post I should by customizing style of the search form in my Themes CSS file. Got that.

My question is how should address the modification of file Parts/Search.SearchForm.cshtml?

Copy over the template to your theme and make modifications there. That is how you skin shape templates & cats.

Ok, got it, thank you for help!