In an MVC application, I need to display links rendered by #Html.ActionLink as buttons. I have the following code in site.css:
.linkbutton {
font-family: Constantia, Georgia, serif;
text-align:justify;
padding-left: 22px;
background-color:#FF7F00;
color:#fff;
border: 1px solid #333;
cursor: pointer;
font-size:1.2em;
width: auto;
height:auto;
}
In the view I used a table layout for the links and referred the linkbutton class as:
<td class="linkbutton">
#Html.ActionLink("Add Cab", "Create")
</td>
The link is using the styles from the .linkbutton class. However, the text color that needs to be in white (#fff) is not inherited, despite being defined as color:#fff; in the CSS. Instead the default blue link color with an underline is getting displayed. I need the link to appear with white font color and without the underline.
In CSS I tried:
a.linkbutton.link {
/*Style code*/
}
Then refer it from the view as:
Html.ActionLink("Add Cab", "Create", new {#class = "linkbutton"}).
But, it is not working. Please help.
You can override the rules for links inside .linkbutton element, so instead of
a.linkbutton.link {
/*Style code*/
}
write
.linkbutton a {
color: #fff;
text-decoration: none;
}
Related
I'm creating a newsletter in Salesforce Pardot and I want the CTA buttons to change color when you hover over them.
I have 2 different CTA buttons.
For the transparent CTA buttons I'm using this CSS and that's working:
.tr1:hover { background: #F7F36D !important; }
.tr1:hover td { background: transparent; }
.tr2:hover { background: #6BCDDD !important; }
.tr2:hover td { background: transparent; }
Etcetera
But I also have a black CTA button where I want to change the bg color (to #E0A9D5) as well as the font color (to #000000). But somehow I can't seem to get it working :(
This is the HTML code:
<tr class="tr6">
<td align="center" class="em_white" height="36" style="height: 36px; background: rgb(0, 0, 0); padding: 0px 12px; font-family: Helvetica, Arial, sans-serif; font-size: 15px; color: rgb(0, 0, 0); border-style:solid; border-radius: 0px; border-width: 2px; border-color: black;" valign="middle">Lorem ipsum dolor ยป</td>
</tr>
Can anyone help me with the CSS part? Thanks!
In order to use the hover property, you can simply use :hover on any selector. Here is a quick example.
button:hover {
background:yellow;
transform:scale(200%);
}
<button>A button</button>
Now if you want to make another element change when you hover on one element, you can use a code like this:
div:hover ~ span {
background:red;
}
<div id="element1">a div here</div>
<span>span</span>
It's not great practice to have lots of inline style added to your html elements. Therefore, you should strip out the content s of the style="...".
Then instead, choose an appropriate selector, eg the class="em_white" and add style there instead:
.em_white {... Add stripped out style here...}
After that, you can then target the anchor within the tr tag, with something like:
.em_white a {background-color:#f00; color:#000}
.em_white a:hover {background-color:#000; color:#fff}
The added benefit to this is that there is a lot less duplication and also your code will become easier to read. You also only need to make one change to the CSS to effect all elements with that class.
I fixed it by styling both tr6 as em_white. I know this is not the right way to do it, but at least it's working.
.tr6 td { background: #000000; }
.tr6:hover td { background: #E0A9D5; }
.em_white1 a { text-decoration: none; color: #E0A9D5; }
.em_white1:hover a { text-decoration: none; color: #000000; }
Screenshot 1
Screenshot 2
I am currently stuck on a css issue. Basically I have defined a style rule like this:
#divMyList tbody tr td{
cursor:pointer;
border-right:5px solid white;
padding:10px;
width:200px;
}
I'm applying another class named tmenu on my td in the <div> like this:
<td class="tmenu"> foo </td>
so that it inherits all the color and other combinations from along with my overridden styles in #divMyList tbody tr td I mentioned above. This is working fine for me.
Now, I want to implement the selected style of tmenu to my current <td> element so that when someone clicks on it, it inherits the selected style of tmenu class. The tmenu and its selected styles are defined like this:
.tmenu {
width: 100%;
height: 40px;
font-size: 14px;
font-weight: normal;
}
.tmenu ul li {
/* ..... */
}
.tmenu ul li.selected {
cursor: default;
}
When I do like this:
<td class="tmenu selected">foo</td>
it doesn't apply the rules of the selected class to my td element. Any help on what I'm doing wrong. Do I need another rule mixing all of these in a new class?
the way you have defined your table, your css should look like this
#divMyList tbody tr td{
cursor:pointer;
border-right:5px solid white;
padding:10px;
width:200px;
}
.topmenu {
width: 100%;
height: 40px;
font-size: 14px;
font-weight: normal;
}
.topmenu td.selected{
cursor: default!important;
}
I have put together a fiddle and added a color to show that it is getting styled
.tmenu ul li.selected { [...] }
Is going to look for an element structured like this:
<elem class="tmenu">
<ul>
<li class="selected"> </li> <!-- This is going to get styled! -->
</ul>
</elem>
It sounds like what you are looking for is this:
.tmenu.selected { [...] }
Keep in mind something needs to apply the selected class to tmenu, and that it won't automatically happen by simply clicking on it.
If you are using ASP.Net Forms application try document.getElementById('MainContent_test').innerHTML = carName;
If you do an 'Inspect' when you run the application you will see that ASP.Net renders the control with 'MainContent_[your control ID]' as the ID.
Once you get the name right it works.
I want to add a block hover effect on my menu. However, the template that I bought has a large stylesheet that looks like it came out of Darth Vader's rear end - and my coding knowledge is limited making this task difficult.
Here is a fiddle of the menu part of my site (it contains the entire stylesheet as well): http://jsfiddle.net/VjhJ4/
Upon hover, I want a block hover effect with each menu link having a different block color, see this picture as example (note that I want the block to be small when the mouse is not on it): http://i.imgur.com/1xbbl.png
I came across a script that does this.
HTML:
<div id="links">
<ul>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
</ul>
</div>
CSS:
#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
I read that hover only works in certain IE versions on anchor elements so I would presume that this technique is the best one to go with.
Now, how can I add this to my own page? Feel free to update the fiddle: http://jsfiddle.net/VjhJ4/
And please let me know if you would need any more info.
You need to add border-bottom and background color on hover.
See this Demo http://jsfiddle.net/enve/VjhJ4/7/
see this DEMO. you need to set the background color etc on hover
Change:
a:hover { text-decoration: underline; }
to (changing the color to whatever color you actually want):
a:hover { text-decoration: underline; background-color:red; }
and change:
a { text-decoration: none; color: #00b7f3;}
to (changing the color to whatever color you actually want):
a { text-decoration: none; color: #00b7f3; border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 5px;}
Demo: http://jsfiddle.net/KqaC8/
Edit: This will only do the hover color, working on the bottom color when not hovering, please hold.
Edit 2: This should do everything you want now.
http://codepen.io/anon/pen/wqpdI
Here's an example I made with what I believe you need. It's actually very simple, and there are many ways to do it! Basically each link (or it's parent) would need a class, and then you can change the colors for each class's tag.
I understand that you do not understand much of CSS, and you buy a template, so you must not knowing much of it.
Thats okay, so before all people send you stuff and solutions that you don't understand, i updated your fiddle with the result like the picture you referring at:
This is your fiddle
ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px 0 16px; }
ul#secondary-menu #menu-item-33 a {border-bottom:5px solid #00f;}
ul#secondary-menu #menu-item-34 a {border-bottom:5px solid #0f0;}
ul#secondary-menu #menu-item-35 a {border-bottom:5px solid #f00;}
ul#secondary-menu a:hover { color: #fff;text-shadow: 0 0;}
ul#secondary-menu #menu-item-33 a:hover {background-color:#00f;}
ul#secondary-menu #menu-item-34 a:hover{background-color:#0f0;}
ul#secondary-menu #menu-item-35 a:hover{background-color:#f00;}
If you don't want to modify the CSS you in the template you have, you can do something like this...
li.menu-item:hover{background:red !important;}
The !important will just override the templates styles
Here is a fiddle that gives you some basic css.. you can still use !important to make sure it overrides your template code http://jsfiddle.net/cX5bk/
I've got the following.. http://jsfiddle.net/JcLx4/31/ how would I change the properties of the hyperlinked text in this example from blue and underlined to black and not underlined?
At a very basic level, like this:
a:link
{
color: black;
text-decoration: none;
}
To make it specific to links within your custom tag (incorporating display:block to make your link stretch the width of its container):
ab.s a:link
{
color: #000;
display: block;
text-decoration: none;
}
And to change the hover style:
ab.s a:hover
{
background-color: #000;
color: #fff;
}
If you want more information there is a tutorial on this page that explains the different pseudo-classes.
ab.s a{
text-decoration:none;
color: #000;
}
I'm trying to change the borders in the style sheet of the template on my blog, but I've never done anything with css so I'm a little bit at a loss... I want to keep the dark background, but I want to create a small border with a slightly different color around my postings. If my guess is correct, then I should modify some of these definitions:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}
Here is a pastie with the entire template I'm using: http://pastie.org/932535
Is there a quick way to achieve the desired effect? Your help is appreciated!
To add border around each individual post you can try adding this to the class .post:
.post {
border: 1px solid;
}
The following can change some of the post properties. I use it to make the corners round.
div.post{
border:2px solid gold;
border-radius:10px;
}