CODEWITHSUNDEEP
asp.net-mvcrazorheaderactionlinkgraphical-logo
RocketRon
RocketRon

Reputation: 105

How to create an (image) Header logo with MVC(4)

I'm struggling with an Razor syntax with MVC (4), hoping to find someone who can help me with a nice and working solution.

I want a clickable logo(image) and created the following code. This works except of two things. I don't see the image display and secondly, when in an other controller, the routing goes wrong (http4 error).

This is how i've done it now:

Razor:

<h1>@Html.ActionLink("siteHeader", "Index", null, new { @class = "site-logo"})</h1>

OR

<h1>@Html.ActionLink("siteHeader", "Index", "Home", new { @class = "site-logo"})</h1>

e.g. when in a different controller (account/shoppingcart/etc.) and clicking the logo, it results in a 404.

CSS:

/Site HeaderLogo/ 

a.site-logo  {     
 background: url(images/Solosoft.png) no-repeat top left;
 display: block;       
 width: 100px;       
 height: 100px;       
 text-indent: -9999px;  /*hides the link text*/ 
  }

Thanks in advance.

Upvotes: 5

Views: 24651

Answers (3)

Nandini
Nandini

Reputation: 1

What wizzardz said is correct. Background style in custom css file is overridden by styles in site.css.

Try this, !important - used to give priority to styles to appear in webpage.

In your custom.css page,

a.site-logo  {     
     background: url(images/Solosoft.png) no-repeat top left **!important**;
     display: block;       
     width: 100px;    
     height: 100px;       
     text-indent: -9999px;  /*hides the link text*/ 
}

No need to change anything in site.css

Upvotes: 0

RoiAbrazaldo
RoiAbrazaldo

Reputation: 11

I got the problem cause!

theres nothing wrong with our coding, the thing is theres a class that overrides our image set

theres this lines in Site.css

.site-title a, .site-title a:hover, .site-title a:active {
    *background: none;* <=comment this out and the bg will show or remove the .site-title a
    color: #c8c8c8;
    outline: none;
    text-decoration: none;
}

hope it helps

Upvotes: 1

webdeveloper
webdeveloper

Reputation: 17288

Try this:

@Html.ActionLink("siteHeader", "Index", "Home", null, new { @class = "site-logo"})

This is:

public static MvcHtmlString ActionLink(
    this HtmlHelper htmlHelper,
    string linkText,
    string actionName,
    string controllerName,
    Object routeValues,
    Object htmlAttributes
)

Link: msdn

Upvotes: 2

Related Questions