I want to change the CSS styling for the first page of my WooCommerce checkout page to make the font larger and increase the margins around the input box. Here is my website:
I used the following code and put it in my child theme on style.css but it doesn't seem to work:
.woocommerce-billing-fields label {
font-size: 55px;
line-height: 23px;
color: #222222;
}
Changed the font size to 45px.
Am I putting the wrong code into my style.css folder?
You might want to add the !important keyword to ensure that the property overwrites any previously set property :
.woocommerce-billing-fields label{
font-size: 55px !important;
line-height: 23px !important;
color: #222222 !important;
}
Related
I tried changing fontsize and line-height of all blog-posts, but doesnt work. What am I doing wrong?
Example Page: http://neuronade.com/kopie-sdfsdf-3
Tried Code:
.mk-single-content{
line-height: 1.5em !important;
font-size: 120% !important;
}
Change that selector to
.mk-single-content * {
line-height: 1.5em !important;
font-size: 120% !important;
}
This selects all elements inside the .mk-single-content elements. If you only want to address particular elements inside, use their tags instead of "*"
You have to target each element inside the mk-single-content div.
For example:
.mk-single-content p {
font-size: 120%;
line-height: 1.5em;
}
Well this styling is working perfectly. May be you need to clear cache.
The TinyMCE 4 button for Remove Formatting is , which is certainly not intuitive to me. I'd like to make the button face something more obvious, like by, say assigning an image to it. But I'm not finding anywhere to change the button face. The markup assigned to the button is
.
I'm not sure how that gets that Tx symbol on the button, but there it is.
Thanks for any help.
In skin.min.css change
.mce-i-removeformat:before {
content: "\e01d";
}
to something like
.mce-i-removeformat:before {
background-image: url("http://i.stack.imgur.com/0rzf2.png");
background-size: 15px 15px;
background-repeat: no-repeat;
}
You can probably remove the background-size and background-repeat if you make your image the right size
If you don't want to edit the css directly, you could just make a new css file and load it after the default one to override the settings. If you did this, you would have to override the contents to remove the original icon
These icons come from the tinymce font. for me in the tinymce source i have the fonts at
tinymce/skins/lightgray/fonts/tinymce.woff|ttf|etc
If you added your own font file withyour own icon it should allow you to change the icon
If you inspect the css you'll notice there are two parts that control the icons being used
On the ::before inside the tag
.mce-i-italic:before {
content: "\e02b";
}
on the i tag itself
.mce-ico {
font-family: tinymce, Arial
}
both comefrom skin.min.css
What do you say that instead of new image you use :after pseudo element and remove :before one.
This is how it would look
https://jsfiddle.net/nj6yn4bq/4/
And the code
<button><i></i></button>
i:before { display: none; }
i:after {
content: 'FMT';
text-decoration: line-through;
font-style: initial;
font-size: 15px;
}
button {
background: linear-gradient(#FFF,#E0E0E0);
padding: 0.7em;
border: 1px solid #DEDEDE;
border-radius: 3px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
}
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
I am new to GWT/uiBinder (latest version of GWT and testing under latest Eclipse) and really puzzled. My CSS for buttons is ...
/* --button-- */
.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00; /* this gets ignored */
}
The background does nothing, the rest works.
I have tested that this CSS entry does something by changing the color and seeing that it works. I have also tried "background-color" (I have seen both in various docs). The background never changes.
I also tested a gwt-TextBox as follows and it works just fine.
/* --text box-- */
.gwt-TextBox {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: Beige;
}
Note: I know that sometimes while testing you have to refresh the web page to see your changes.
Note: I can set the button background by using a CSS entry called "myButton" and using styleName='myButton' it in the uiBinder entry.
Note: The button is in a Layer in a LayoutPanel in a north:DockLayoutPanel in an east:DockLayoutPanel.
Help!
https://stackoverflow.com/a/7833358/635411
You can use a more specific selector like the other answer suggests:
/* --button-- */
button.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00;
}
Personally, I try to avoid overwriting the default styles because of the precedence issues.
I think this should solve your problem
.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00 !important;
}
You need to include this line before you make any changes to the background of gwt-Button
background-image:initial !important;
The problem you're having is that you're trying to set a background color, when gwt-Button uses a background image, so the image goes over your background color, making it seem like your css is being ignored.
there is a simpler way
you need to remove the gwt-Button style and then add whatever color you like
`
Button button=new Button();
button.removeStyleName("gwt-Button");
button.getElement().getStyle().setbackgroundColor("#F00");
//incase you need to remove the default border style aswell
button.getElement().getStyle().setBorderStyle(BorderStyle.NONE);
`
I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter