Search module css is taking precedence over theme css?

Topics: Writing themes
Mar 5, 2013 at 3:48 PM
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?
Mar 6, 2013 at 2:07 AM
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.
Mar 6, 2013 at 10:37 AM
It's the Search Form widget, placed in the zone AsideSecond. Pretty standard I guess.
Mar 6, 2013 at 10:48 PM
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.
Mar 6, 2013 at 11:44 PM
@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.
Mar 7, 2013 at 12:41 AM
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.
Apr 14, 2013 at 1:58 PM
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?
Apr 14, 2013 at 9:12 PM
Copy over the template to your theme and make modifications there. That is how you skin shape templates & cats.
Apr 15, 2013 at 1:39 AM
Ok, got it, thank you for help!