I'd like to apply a custom CSS style to a specific document type which will override the style set in the master CSS file, e.g. on all news pages I'd like the H2 to be 3rem.
Is this possible and, if so, can anyone advise how I can implement this?
You would apply CSS the way you normally do. Create a scoped set of styles that targets a class (or classes) that exist in the view template that the document type uses. Then you just reference it.
Depending on re-usability of the style group and/or how you prefer to organize things you have a few options for doing so.
It could be included in the Layout with a conditional statement checking for Model.Content.ContentType.Alias that matches the docType; or if its more than 1 docType perhaps it's a use case for Named Sections (if needed in partial view there's an interesting Code Share alternative setup); or just included in the master css as long as your styles are scoped properly; for a few examples.
Yes -- using normal CSS + HTML markup; don't need anything Umbraco related :3
Create a CSS rule in your styles that is scoped to a unique class that exists on a top-level/encompassing element in the View Template only used by your News document type.
// assuming there's no excess specificity that needs to be overridden
.news-content h2 { font-size: 3rem; }
If you're looking for some Backoffice control that hooks style sheets up to specific templates that does not exist. It's just the normal -link rel=stylesheet href- tag markup you write in the view templates that dictate what style sheets are available.
Sorry for the delay! The sample snippets I provided above is all you need.
Step 1 - Make a class that has the styles you want to apply (or use an existing one that already serves this purpose)
Step 2 - Apply that class to the appropriate container in your markup.
I can't provide any more detailed assistance without knowing more about how your markup is structured and if there would be any conflicting rules with existing styles.
There is nothing specific to Umbraco or tricky ^^ It's all basic/general CSS.
Applying CSS to a document type
I'd like to apply a custom CSS style to a specific document type which will override the style set in the master CSS file, e.g. on all news pages I'd like the H2 to be 3rem.
Is this possible and, if so, can anyone advise how I can implement this?
Hullo Owen ^^
You would apply CSS the way you normally do. Create a scoped set of styles that targets a class (or classes) that exist in the view template that the document type uses. Then you just reference it.
Depending on re-usability of the style group and/or how you prefer to organize things you have a few options for doing so.
It could be included in the Layout with a conditional statement checking for Model.Content.ContentType.Alias that matches the docType; or if its more than 1 docType perhaps it's a use case for Named Sections (if needed in partial view there's an interesting Code Share alternative setup); or just included in the master css as long as your styles are scoped properly; for a few examples.
Thanks Danine. I want to change the H2 font size but only on a news item document type. Can the CSS be applied to only target that document type?
Yes -- using normal CSS + HTML markup; don't need anything Umbraco related :3
Create a CSS rule in your styles that is scoped to a unique class that exists on a top-level/encompassing element in the View Template only used by your News document type.
Example:
news.cshmlcssIf you're looking for some Backoffice control that hooks style sheets up to specific templates that does not exist. It's just the normal -link rel=stylesheet href- tag markup you write in the view templates that dictate what style sheets are available.
Thank you for your help. So my news page is NewsItemPage.cshtml. What code would I add and where would I add it before adding the CSS?
Sorry for the delay! The sample snippets I provided above is all you need.
I can't provide any more detailed assistance without knowing more about how your markup is structured and if there would be any conflicting rules with existing styles.
There is nothing specific to Umbraco or tricky ^^ It's all basic/general CSS.
is working on a reply...