I'm currently using the Recent Posts widget that comes with WordPress. Is it possible to change the CSS of the links? I want the font to be smaller and not display in bold as it does now. I know it inherits these settings (bold links and font size), but I would like to overwrite them.
Many thanks!
You can change the font styling on the recent posts by adding this to your CSS rules (changing the font size to suit your needs):
.widget-inner a {
font-weight: normal;
font-size: 14px;
}
Related
hello guys av been trying to change the font family/ font style of this WordPress theme Bizberg Consulting Dark for days now, I have looked for this on all the theme editor files but could not find the solution when I inspected the theme on chrome the front family is currently on
.primary_header_2 h3, .bizberg_header_wrapper h3 {
font-family: Dancing Script;
}
I also tried changing this using the additional CSS option on WordPress but any input I give it doesn't work, but when I try
.primary_header_2 h3, .bizberg_header_wrapper h3 {
display: none;}
The whole of the site title disappears showing that this id is the correct id for this change but when I try to input another type of font-family it doesn't work I have looked for this on all the theme editor files but could not find the solution
in your additional css option in wordpress after the css you should input !important and this will overide all functions the theme is playinging initially eg
.header_site_title {
font-family: Times New Roman !important;
}
I use the free theme "Benzer"in my wordpress blog. The parent theme is "Specia".
I'am trying to change the default paragraph font and make it better by placing this CSS code in the Special style.css file directly through Wordpress, but nothing changes...What's wrong please?
p {
font-family:Arial;
font-size:14
}
!Important are considerated a bad practice. Try to use the console to figre otu wich style is overwriting yours.
also, you miss the units in font size,
p {
font-family:Arial;
font-size:14px
}
Should work better.
What's the easiest way to add font sizes options to Plone 4's TinyMCE editor?
For some reason a client has this request.
In Site Setup - TinyMCE Visual Editor - Toolbar I can't see any option related to this feature.
This is how it looks in my application:
In /portal_tinymce/##tinymce-controlpanel - Styles add definitions:
Font size 8|span|custom-font-size-8
Font size 9|span|custom-font-size-9
Font size 10|span|custom-font-size-10
etc.
Meaning you can select the options Font size x in your editor. This will be saved as a span with class custom-font-size-x.
When you save this it will already work. But you need the styles to make this visible.
I had an override to tinymce editor already set so I added the styles for each class like:
.custom-font-size-10 {
font-size: 10px !important;
}
in content.css.dtml file. Also add this css in your theme to see the effect in view mode.
I'm having trouble changing the font on a website I built using the WordPress theme Zerif Lite.
The page itself is (REMOVED LINK) - I want to change the font in the "testimonial" section or as its displayed there: "Teenused".
That weird font in the bottom of every box (a.client-name)
I have tried so far:
Custom CSS plugin - it lets me only change the font size, when I set new font there, it won't change anything.
Changed the theme's CSS files, also no luck there.
Will appreciate any kind of help.
You can change the font by targeting the correct selector, which is: .feedback-box .client-info .client-name. The current font is called Homemade Apple and is declared in the main theme's CSS file (style.css) at line 2797:
.feedback-box .client-info .client-name {
font-family: 'Homemade Apple', serif;
color: #404040;
}
Simply change that to your desired font, for example:
.feedback-box .client-info .client-name {
font-family: 'Montserrat', sans-serif;
color: #404040;
}
Have you try to add an !important rule to your CSS. It's either that or verify the load order from your styles.
When it comes down to a CSS style, the reason it may not be aplying is because there is another more specific selector, try adding parent selector to your rules, or it could also be that the theme's rules are loading after your rules and replacing them.
One last thing to check, when dealing with fonts: make sure your browser have access to and knows the font. If it does not finds it, it will just replace it with another one, without any warning.
Bootstrap's global default font-size is 14px, with a line-height of 1.428. How can I change its default global settings?
Will I have to change bootstrap.min.css in all the multiple entries?
Bootstrap uses the variable:
$font-size-base: 1rem; // Assumes the browser default, typically 16px
I don't recommend mucking with this, but you can. Best practice is to override the browser default base font size with:
html {
font-size: 14px;
}
Bootstrap will then take that value and use it via rems to set values for all kinds of things.
There are several ways but since you are using just the CSS version and not the SASS or LESS versions, your best bet to use Bootstraps own customization tool:
http://getbootstrap.com/customize/
Customize whatever you want on this page and then you can download a custom build with your own font sizes and anything else you want to change.
Altering the CSS file directly (or simply adding new CSS styles that override the Bootstrap CSS) is not recommended because other Bootstrap styles' values are derived from the base font size. For example:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52
You can see that the base font size is used to calculate the sizes of the h1, h2, h3 etc. If you just changed the font size in the CSS (or added your own overriding font-size) all the other values that used the font size in calculations would no longer be proportionally accurate according to Bootstrap's design.
As I said, your best bet is to just use their own Customize tool. That is exactly what it's for.
If you are using SASS or LESS, you would change the font size in the variables file before compiling.
You can add a style.css, import this file after the bootstrap.css to override this code.
For example:
/* bootstrap.css */
* {
font-size: 14px;
line-height: 1.428;
}
/* style.css */
* {
font-size: 16px;
line-height: 2;
}
Don't change bootstrap.css directly for better maintenance of code.
The recommended way to do this from the current v4 docs is:
$font-size-base: 0.8rem;
$line-height-base: 1;
Be sure to define the variables above the bootstrap css include and they will override the bootstrap.
No need for anything else and this is the cleanest way
It's described quite clearly in the docs https://getbootstrap.com/docs/4.1/content/typography/#global-settings
As of Bootstrap 5 you can set the default font size by changing the $font-size-root variable.
$font-size-root: 16px;
In v4 change the SASS variable:
$font-size-base: 1rem !default;
I use Bootstrap via CDN (Content Delivery Network), so I solved it with this easy way. Change the global default font-size in the <html> tag.
Example for smaller font-size:
<html style="font-size:0.875em">
Simple change the em value.
With Bootstrap Version 5.2 the font size is 1rem:
font-size-base: 1rem; // Assumes the browser default, typically 16px
0.875em = 14px, if default browser font size is 16px
1em = 16 px
1.125em = 18px, if default browser font size is 16px
I just solved this type of problem. I was trying to increase font-size to h4 size. I do not want to use h4 tag.
I added my css after bootstrap.css it didn't work.
The easiest way is this:
On the HTML doc, type
<p class="h4">
You do not need to add anything to your css sheet. It works fine
Question is suppose I want a size between h4 and h5?
Answer why? Is this the only way to please your viewers?
I will prefer this method to tampering with standard docs like bootstrap.