I've been having a problem with my menu control with the drop down menu with the background color staying white, when I want it to be yellow. I've tried changing some of the properties options so that the BackColor would be "yellow", but it still persists to be white. I've noticed that the menu color without hovering over any links is yellow, but the drop down menu is white. This is what I have in the control:
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"
BackColor="Yellow" EnableTheming="True" Orientation="Horizontal">
<StaticMenuStyle BackColor="Yellow" />
<StaticSelectedStyle BackColor="Yellow" />
<StaticMenuItemStyle BackColor="Yellow" />
<StaticHoverStyle BackColor="Yellow" />
</asp:Menu>
The control is using a static view, but changing those BackColors didn't help much either.
Also, is it possible to remove those "Arrow" images beside each link that has a drop down list? I figure it has something to do with the style properties, but I'm unsure.
Its been a long time, since the question has been asked, and I hope the asker would have got the answer by now. But I am adding one to it so as to help another guy out there.
Looking at the rendered html in Firebug, I assume the page lacks the CSS styles, neither internal nor inline. So, it is better that you add your own style for the menu.
You could try this (Add to internal or external style sheet linked with your aspx page):
/* #ctl00_Menu1 is the ID of my menu when rendered*/
#ctl00_Menu1 span
{
margin: 0 !important;
padding: 0 !important;
}
#ctl00_Menu1 span a
{
background: #1383dd;
color: #fff;
padding: 5px;
}
#ctl00_Menu1 span a:hover
{
background: #0065b6;
color: #fff;
}
hope it helps.
Related
I'm having an issue where I can't get the summary of a redgex to format how I want.
I have put the css classes within the same aspx file as the redgex summary and marked them as important. However still when I run it, it's not being used.
Update
Within Chrome's inspect element it's saying that the redgex summary style is red. The HedderText comes up red, it seems to be the list items that aren't following suit but I don't know why they're not overriding the default.
Any ideas?
Chrome showing it's not being used but don't know why:
CSS:
.valError {
color:red !important;
}
.validation_summary {
color:red !important;
}
ASP Redgex Summary:
<asp:ValidationSummary ID="ValidationSummary1"
runat="server"
ShowMessageBox="false"
ShowSummary="true"
ValidationGroup="v1"
ForeColor="Red"
DisplayMode="BulletList"
CssClass="valError"
HeaderText="<span>The below requires attention.</span>"/>
Without any styling applied, ValidationSummary renders as a boring list with error messages.
However, it’s easy to pretty it up with some CSS since it’s nothing more than a div with an unordered list inside.So you have to define in your example and the class .valError ul
Let's see it with an example:
<asp:ValidationSummary runat="server"
DisplayMode="BulletList"
CssClass="valError" />
Next, put it in a box with a red border
.valError{
border: 2px solid red;
color: red;
margin: 5px 0px;
padding: 15px;
}
Let's say we want padding and margins on the error list and move it to the right
.valError ul {
margin: 0;
padding: 0;
margin-left: 80px;
list-style: square;
}
Hope this helps!
I have some textboxes I want to style and in design view, everything looks good. When I debug though, the CSS hasn't applied.
CSS:
input.textbox {
color: #C0C0C0;
text-align: center;
}
Markup:
<asp:TextBox ID="txtFirstName" runat="server" CssClass="textbox" MaxLength="50" Text="First Name"></asp:TextBox>
Thanks in advance for any help
I don't see why this wouldn't work, assuming your stylesheet is being included correctly and you've also ensured that class="textbox" is being added to the input elements. You should check to make sure your CSS is being included & the HTML is being generated correctly (check the network/elements pane of your browsers developer tool).
You could do this if you genuinely want to style every text input, and you wont need to add a CssClass.
input[type="text"]{
color: #C0C0C0;
text-align: center;
}
I would like to use a button (that doe's more than just links) appear as hyperlink in aspx.net. meaning the button wont have the white background it normally has, and simply look like a highlighted text, like a link.
thanks in advance!
Give your button a CssClass
<asp:Button ID="button" Text="Button" CssClass="button" />
Then apply css for your button:
.button {
background-color:transparent;
border:none;
cursor:pointer;
text-decoration:underline;
padding: 0px;
}
You want an asp:LinkButtton control
W3 Schools:
http://www.w3schools.com/aspnet/control_linkbutton.asp
MSDN:
http://msdn.microsoft.com/en-gb/library/system.web.ui.webcontrols.linkbutton(v=vs.80).aspx
I have a problem with asp:button styling. I added following style:
.myAspButton {
background-image: url("image for button");
width: 110px;
height: 25px;
color: white;
font-weight: bold;
vertical-align: middle;
}
<asp:Button ID="btnAsp" runat="server" Text="hhh" CssClass="myAspButton" BackColor="Transparent" BorderStyle="None" />
Problem is when I press button it gets that dotted border around how to remove this?
And also what property to use to change button style when button is pressed down?
outline: 0;
This is the outline css property. You can set it just like border.
However, the outline property can be beneficial for people tabbing through controls to see which control currently has focus.
As for the second part of your question, this is not possible with CSS alone. You will need to implement some javascript to change the class on mouse down.
This is a little old, but none of these solutions worked for me in Firefox.
I now have a solution to this using Javascript. Just add onfocus="this.blur();" to your asp:Button tag...
<asp:Button ID="btnAsp" runat="server" Text="hhh" CssClass="myAspButton" BackColor="Transparent" BorderStyle="None" onfocus="this.blur();"/>
Have you tried adding this to the css style?
border: none;
Look at the reply and contact buttons # http://forums.asp.net/t/1292579.aspx
how would I get that effect to my buttons (Dont need the icons, just the blue color, borders and a mouse over effect)
thanks,
Well those buttons are really just hyperlinks with spans inside them. You can achieve the same effect by using LinkButtons and CSS styling using the border style and the :hover pseudo class.
<asp:LinkButton id="link1" runat="server" CssClass="button" />
a.button
{
border: 2px solid white;
}
a.button:hover
{
border: 2px solid black;
}
You should give your buttons a CSS class then add CSS styling accordingly.
So if you have a button:
<asp:Button ID="myButton" runat="server" Text="Submit" CssClass="myCssClass" />
You would have the following script in your header:
<style type="text/css">
.myCssClass { // PUT YOUR CSS HEERE }
</style>