Search module css is taking precedence over theme css?

Topics: Writing themes
Mar 5, 2013 at 2: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.

Image

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 1: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 9:37 AM
It's the Search Form widget, placed in the zone AsideSecond. Pretty standard I guess.
Developer
Mar 6, 2013 at 9: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 10: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.
Developer
Mar 6, 2013 at 11:41 PM
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 12: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?
Developer
Apr 14, 2013 at 8: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 12:39 AM
Ok, got it, thank you for help!