Asp.Net MVC overriding Class CSS

Question

I have an H1 tag and inside that, there is anchor tag which is generating from the code

<div class=".slide-title">
    <H1>    
    @RenderLinkTracking(m => m.btn, Model.bTnTitle)    
    </H1>
</div>

The RenderLinkTracking creates anchor tag

<a href="/home/" data-id="Image Title<">Image Title</a>

CSS of the anchor tag is

.slide-title a
{
color : red;
}

I am trying to override the CSS of the anchor tag. This is how I am doing and working fine

<style>
@if (Model.Param.H1CSS!= null)
{
<text>
.slide-title a
  {
 @Html.RenderCSSAndJSAttributes(Model.Param.H1CSS).ToString().Replace("style=","")
  }
 </text>
}
</style>

The method Html.RenderCSSAndJSAttributes is generating a style color:#001595 !important;font-family:Book Antiqua !important;Text-align:10px;Text-align:Center Is there any better way to override the class CSS or append the inline CSS using jquery? Any suggestion would be appreciated.

Thanks in advance

Your class should be "slide-title" not ".slide-title". No periods in the class names. — krillgar
– krillgar, Commented Sep 24, 2018 at 15:31

Hossein · Accepted Answer · 2018-09-24 07:18:08Z

3

Change custom helper could look like this:

namespace System.Web.Mvc {
    public static class HtmlHelperExtensions {
        public static MvcHtmlString RenderLinkTracking(this HtmlHelper helper, string url, string linkText, string style) {
            //...
            return MvcHtmlString.Create(String.Format("<a href='{0}' style='{1}'>{2}</a>", url, style, linkText));
        }
    }
}

So You can pass style for each custom link like this:

<div class=".slide-title">
    <H1>    
    @RenderLinkTracking(m => m.btn,Model.yourUrl, Model.bTnTitle, Model.Param.H1CSS)    
    </H1>
</div>

answered Sep 24, 2018 at 7:18

Hossein

3,1233 gold badges18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hary · Accepted Answer · 2018-09-24 15:27:21Z

0

Simple Solution is by creating another CSS Style for the anchor hierarchy .slide-title h1 a

.slide-title a
{
  color:#001595!important;
}

.slide-title h1 a
{
  color: green!important;
}

<div class="slide-title">
    <h1>    
    <a href="/home/" data-id="Image Title<">H1 Anchor</a>    
    </h1>
    
    <a href="/home/" data-id="Image Title<">Simple Anchor</a>
</div>

answered Sep 24, 2018 at 15:27

Hary

5,8368 gold badges49 silver badges91 bronze badges

Collectives™ on Stack Overflow

Asp.Net MVC overriding Class CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related