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.
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
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
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
Related
My aim is to have a button, with default value Block and when the user click on it, it will change the text to Unblock and also after page refresh the text of the button must remain the same, if the text is changed to unblock then after refresh it must remain unblock.
What i have tried uptil now is this:
View code for Button:
input type="submit" value="#ViewBag.SubmitValue" id="Block" style="color: white;
background-color: darkred; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 4px 4px;
border: none; padding-bottom:2px "
Controller ActionResult
public ActionResult Block(int Id, Block block, string userAction)
{
if(userAction == "Block")
{
ViewBag.SubmitValue = "Block";
}
if (userAction == "Unblock")
{
ViewBag.SubmitValue = "Unblock";
}
.....
}
I am haivng issue in this passing string userAction in ActionResult, the value of userAction is passing as Null in the Method, so the text of button is not changing and it is showing "Submit" on button
Please help
use a hidden input element named "userAction" and set its value to whatever you need.
<input type="hidden" name="userAction" value="#ViewBag.SubmitValue">
and for default action set the initialized value of userAction like this:
public ActionResult Block(string userAction = "Block", int Id, Block block){
//...
}
whenever you passed nothing named userAction it will be set to "Block" not null
I have a listboxfor in my application which works greats. But to make multiple selection I need to press ctrl and click on the item. How can I change this behavior, so every time I click on the item in the list it selects it and when press again it deselects but only one of the selected items.
My listbox:
#Html.ListBoxFor(m => m.selectedCharts, new SelectList(#Model.Graphs.ToList() )
, new { #class = "select_change" }
)
Or maybe I should use different control for this purpose?
Many thanks
I've used Bootstrap Multiselect before, with great success.
If it cannot be a drop down, use this Checkbox list instead.
I have managed to complete a nice looking listbox where user don't need to press ctrl button to select multiple elements. I want to share with you my work. I have used suggested by MartinHN an amazing extension CheckBoxListFor. You can find it on this website MvcCheckBoxList.
My View Code
#{
var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 0 , new { #class="styled_list" });
#Html.CheckBoxListFor(model => model.ReportSettings.Ids,
model => model.AvailableGraphs,
graph => graph.Id,
graph => graph.Name,
model => model.SelectedGraphs,
new { #class="styled_checkbox" },
htmlListInfo,
null,
x => x.Name)
}
My CSS:
input.styled_checkbox, input[type="checkbox"]
{
visibility: hidden;
width: 0px;
}
.styled_list
{
background: #aeeefb;
border-radius:5px;
padding: 10px 10px 10px 0;
color: White;
font-weight: bold;
}
.styled_checkbox
{
background: #69D2E7;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin: 3px 0 3px 0;
padding: 5px;
position: relative;
width: 250px;
border-radius:5px;
}
.styled_checkbox:hover
{
opacity: 0.7;
}
.styled_checkbox:checked+label
{
background: #1a9eed;
}
The check boxes are hidden and labels indicates that element is selected or not. I can't insert pictures but it looks good, but you can off course edit style to your own needs.
Hope that helps anyone
In my website, all my links are underlined when cursor mouse hover it. I have an exception for special cases. So I have some ActionLink where I would like links to be dotted and when hover links must be underline. I cannot achieve this.
Here is what I do:
#Html.ActionLink("Lire la suite...", "Details", new { slug = #post.Slug } , new { #class = "dotted-link" } )
The CSS:
.dotted-link
{
text-decoration: none;
border-bottom-style:dotted;
border-bottom-width: 1px;
}
The result:
The result when hover it:
As you can see, I have a dotted border and a plain border ?!
What is the best way to achieve this?
Thanks.
a.dotted-link {
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a.dotted-link:hover {
border-bottom-style: none;
}
I have a design that uses colors to identify sections of the site. I have put a file with the color variables defined, since they can change and it is difficult to track them down through the CSS files.
$people: #D50000;
$galleries: #D500AA;
$projects: #D5BA00;
//etc...
The name of my classes matches those of the variables. For example, the navigation menu is something like:
<ul>
<li class="people">People</div>
<li class="galleries">Galleries</div>
<li class="projects">Projects</div>
<!-- etc... ->
</ul>
and I find myself writing SASS like
#nav {
ul {
li.people { border-left: 5px solid $people; }
li.galleries { border-left: 5px solid $galleries; }
li.projects { border-left: 5px solid $projects; }
}
}
which I'd like to DRY up. I have tried to use mixins, but I don't know how to tell SASS to lookup a variable named after the argument I pass (variable indirection). I have something like:
#mixin menu-states($resource) {
li.#{$resource} a { // This works
border-left: 7px solid $#{$resource}; // But this doesn't...
}
}
Does anybody have a suggestion on how to DRY this? Thanks.
this code works for me
#mixin test($resource: "red"){
$updated: unquote($resource);
li.#{$updated} a{
border-left: 7px solid $updated;
}
}
You cant do that, however you can pass in 2 variables, one for the class and another for the color to the mixin.
If I write html to a Jquery UI dialog box it is naturally centred. I add a DIV and use some CSS ...
#printReport {
text-align: left;
font-family: Tahoma;
font-size: 12px;
width: 880px;
}
... and then
$("#printReport").empty().append(results);
to put text on the page - and it does what I want in FF/Chrome etc (left justified) ... but in IE (V7 and V8) the text is still centred.
Am I missing something?
Thanks
I am assuming some of the parent div's are set to be centered,
eiter by using the deprecated tag or by doing something like:
margin: 0 auto
in order to make it work you should do something like this:
body {
text-align: center
}
#printReport {
width: 880px;
margin: 0 auto;
text-align: left
}
hope that helps.
As per the comment, it was a problem in the CSS and nothing to do with dialog .. sorry