I'm working in DNN in the stylesheet to overrule a specific standardstyled button. This is working code to overrule the styling and change it into what I want, but it changes it for all buttons.
#import url("Templates/htmlEditorTemplates.css");
.threeCol .Normal a {
color: #000000;
float: right;
line-height: 3;
}
I understand that this code changes it for all because i specified .threecol .Normal a, which specifies all buttons I made. I only want a specific button on a page to change, in order to do that I have to select the button location. how do I do that?
You do that by adding a class (i.e. special-link) to those links you want to target and give them its own rule.
HTML
<a class="special-link">...</a>
CSS
.threeCol .Normal a.special-link {
color: #000000;
float: right;
line-height: 3;
}
Related
I have a button that I'd like to customize differently than what I've set the global buttons. I added the button and modified it but there is no option for editing the hover color of the button so I am trying to write additional CSS for it.
I set up a new class for the button
Custom-Button-Orange-to-Purple
but when I try to add the additional styling to this element (I did try and set up the class without the :hover and that didn't work either).
.Custom-Button-Orange-to-Purple:hover {
background-color:#8601AF !important;
border-color:none !important;
}
The button I'm trying to modify is the orange one at the bottom of the page here: Kidz Haven Daycare . The code changes the border of the button to purple which I don't want.
I'm new to adding custom CSS (obviously) and would be grateful for some help!
This is what your CSS looks like, which is absolutely wrong:
.wp-block-button:hover .Custom-Button-Orange-to-Purple:hover has-custom-font-size:hover {
border-radius:8px;
background-color:#8601AF !important;
}
Also, there is no element with the class Custom-Button-Orange-to-Purple.
This is what I understand from your question: You have customized the style of usual buttons, and now you want to style a button which should look different. If so, this may help:
.btn-default {
width: 100px;
}
.btn-default:hover {
background-color: skyblue;
color: #fff;
}
.btn-special:hover {
background-color: purple;
color: #fff;
font-weight: bold;
}
<button class="btn-default">Normal Button</button>
<button class="btn-default">Normal Button</button>
<button class="btn-default btn-special">Special Button</button>
This took a full days worth of hunting and trying different methods. What I did was to get rid of the class name I had added to the "Advanced" tab where I created the custom button. Instead I added HTML to the block on the page where the button would appear. I used a div container as well to be able to center it on the page.
HTML added to the block with new class names:
<div class="Center-Aligned-Custom-Button-Orange-to-Purple">
WHY KIDS HAVEN DAYCARE
ADDITIONAL CSS:
.Center-Aligned-Custom-Button-Orange-to-Purple {
display:flex;
justify-content:center;
align-items:center;
}
.Custom-Button-Orange-to-Purple {
border-radius:8px !important;
font-family:Roboto !important;
font-size:15px !important;
font-weight:500 !important;
line-height: 25px !important;
padding-left: 15px!important;
padding-right: 15px!important;
padding-top: 1px !important;
padding-bottom: 1px !important;
text-align: center !important;
background-color: #FB9902 !important;
color: #fff !important;
position: absolute !important!;
}
I'm not certain if I "needed" to use the !important but given the amount of time it took to figure this out, I figured it was better safe than sorry!
Thanks for the responses. I'm a total newbie, so some comments were over my
I'm trying to create a button. I've added this to the child's style.css (child of twentytwelve)
.mybutton {
background-color: #F7931E; /* orange */
border: none;
border-radius: 3px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 10px;
}
and this within a custom html widget in a sidebar
<a class="mybutton" href="blahblahblah">Online Community</a>
but when I view the page, the link shows just as text, not a button.
I can see via DevTools (in Chrome) that the child style sheet IS being loaded and its classes ARE being applied to other elements, but it's just not applying the button one!! The class doesn't show up at all.
If I add a new style rule for the mybutton class in DevTools, and copy and paste the css from above, the button shows up correctly, so it's not an error in the css itself.
I've tried deactivating all the other plugins, as a google search indicated that could be a cause, but that didn't help.
Any ideas on how to further debug this????
Thanks!!
Julie
I am trying to add custom css style to my caldera forms on a wordpress website.
what i am trying to achieve is to add a hover style to my fields of radio checklist
Right now i was only able to add style to the bullets ,I am currently stuck with adding a hover style to the fields
this is the link to the form
https://purdywordy.com/order-here/
This is the CSS that i have used
.caldera-grid input[type=checkbox]:hover,
.caldera-grid input[type=radio]:hover {
cursor: pointer;
}
input[type=radio]:before,
input[type=checkbox]:before {
font-family: FontAwesome !important;
font-size: px;
}
input[type=radio]:before {
content: '\f111';
border-radius: 50%;
padding: 0px 15px 0px 0px;
}
input[type=checkbox]:before {
content: '\f14a';
color: red;
background: red;
border-radius: 3px;
padding: 2px;
}
input[type=radio]:checked:before {
color: red;
}
When inspected, your form (HTML) is structured like this:
<div class="radio">
<label>
<input type="radio">
</label>
</div>
Since you have used nested input inside of a label, you don't even need for/id attributes, but I am guessing that is automatically generated by the form. Btw, do you have control over the structure of HTML or the proposed form simply spits it out?
For your current structure, you could style it like this:
.radio:hover > label {
/* add the style for the label */
}
.radio:hover input[type="radio"] {
/* add the style for the radio button */
}
Whatever you need to apply the style to, "listen" for a hover on the parent and then target its direct children. You get the point.
EDIT: My bad. I have said that input is nested inside of label. Therefore, radio:hover > input will not target it. Omit the > and it will target any input inside div with the class .radio. Sorry for the possible confusion. You can learn more about CSS selectors and differences between them here.
This should work. Your radio buttons and labels sit inside a class of 'radio'. You can remove the .form-group reference here unless there are other places on the page that you don't want this styling to apply to.
.form-group .radio:hover {
cursor: pointer;
background-color: grey;
border: 2px solid blue;
border-radius: 5px;
// other hover properties
}
I need to override css style for a particular element with another css file's style in gwt.
I have tried by the following code
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.addStyleName("butt");
The alert is coming. but the style has not been overridden. the css code is
.sendButton {
display: block;
font-size: 16pt;
color:red;
}
.butt{
font-size:32pt;
visible:false;
color:green;
}
the button font is in red colour only it is not changed to green. i have included this css in html file as well.
so please tell me how to override one css style by another css file's style in gwt.
Thanks in advance
Try this
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.setStyleName("butt");
setStyleName Clears all of the object's style names and sets it to the given style.
If this is the style that you want applied to all buttons, you can override the style the GWT applies to all buttons: gwt-Button.
Alternatively, try:
color: red !important;
or be more specific with your CSS selector so that other CSS rules do not take precedence.
I am assuming the .gwt-button and .gwt-Button-selected are the default style names(provided by GWT) of you button.
You can do sth like below. Here I have removed some css properties(all properties are random here). You should write these css properties in your UIBinder.
#external .gwt-Button;
.gwt-Button {
cursor: pointer;
cursor: hand;
color: #3e3e3e;
font-weight: bold;
text-align: center;
background: white;
margin-top: -6px;
margin-top: -33px;
margin-left: -1px;
}
#external .gwt-Button-selected;
.gwt-Button .gwt-Button-selected {
cursor: default;
background: white;
}
Can I have hand please? I am struggling to over-ride the CSS on the Wordpress Custom Fields Search plugin, which seems to use the same style for search boxes that appear in the widget and the page. If you look at http://www.landedhouses.co.uk/parties/, the white text is visible by the search boxes in the widget but not so visible on the page. Any ideas how to fix this!? Unfortunately adding this to the page's php didn't achieve anything:
<h2>By size and price</h2>
<p style="color:000;"><?php if(function_exists('wp_custom_fields_search'))
wp_custom_fields_search(); ?></p>
Many thanks!
This is the style rule that is causing you problems.
/* searchforms.css line 15 */
.searchform-label {
display: block;
float: left;
width: 200px;
overflow: hidden;
font-size: 1.1em;
font-family: sans-serif;
font-weight: bold;
padding-top: 4px;
color: white;
}
You can do a few things using css. You can make an overwriting rule in the style sheet:
.searchform-label {
color: black;
}
if that doesn't work, you can make a more specific rule:
label.searchform-label {
color: black;
}
or you can in the worst case scenario make an !important rule.
.searchform-label {
color: black !important;
}
As an extension of the above answer (i still cannot comment :( )
Generally speaking, a more specific rule will override the property if the original is not using !important,
so as the original targets .searchform-label, you just need to target something more specific, such as label.searchform-label, and if that doesnt work, include a direct parent element and a > e.g. if the label is wrapped in a P, use p>label.searchform-label
there should rarely be a need for !important, although they should make a !notimportant, for easy override :D