I'm building a Wordpress site with Understrap, customizing a child theme.
The way I understand it, the theme comes with Font Awesome installed.
I'm attempting to add some icons, like so:
<i class="fab fa-facebook"></i>
But all I see in the browser is what looks like a weird slanted hamburger. See Image
It looks like the styles are being pulled in when I inspect. See Image
Not sure what I'm missing. Is there some special step I need to take to activate Font Awesome? Everything's being imported correctly as far as I can tell. I'm just using the default child theme.
First check the page source to see if the parent theme styles have been enqueued or not. You must use the following code to load parent theme style. Put this code in the child theme functions.php file :
add_action( 'wp_enqueue_scripts', 'prefix_load_parent_theme_style');
function prefix_load_parent_theme_style() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri().'/style.css' );
}
Try and redeclare the font:
.fa-apple:before{
font-family: Font Awesome;
}
Sometimes it gets overridden by other :before fonts
Related
I want my Wordpress website navigation menu font larger And make the font become normal type, but NOT capital letters.
I have googled it and the result said need to change the theme style.css in WordPress dashboard, based on the tips but there has another issue, the style.css in my child theme is almost blank, only a few lines with the theme description (i.e. theme name / version / templates/ author etc.) , but Not the site theme CSS. Is the theme creator hide the CSS? So why this happened? And what should I do?
please see the screenshots below.
style.css
Big thanks in advance.
Most of the themes also have a section where you can put custom CSS. You can usually find this in the Wordpress Customizer, otherwise in the theme settings. This way you are always sure it wont disapear after updating your theme. Of course you can also use a child theme, but the style.css above doesn't look like it is from a child theme.
The CSS you are probably looking for is the following:
.nav{
font-size:14px;
}
If you don't know the correct CSS selector (.nav) you can find it here. To see what styles you should use for the element you can look at the CSS Reference of W3Schools. Hope it helps you.
Use a code inspector ie. Chrome dev tools to make the changes you want to the existing style and copy/paste that code into your child theme stylesheet.
EDIT
In Chrome for example, open the code inspector using ctrl+shift+i might be different on a mac, I don't know. by default it will show you your html markup and your css styles below. Locate the element you want to change either by finding it in the html portion or using the selector tool (top-right of the developer window) and selecting the element you want to change on your page.
That will show you the css for that element that you can modify as you wish underneath. Once you are satisfied with the styles you have changed/removed/added, you can copy that code to your child theme css.
Other than that, I can only suggest you find some resources and videos on using dev tools to help you out. If you are building a child theme you will need to be using them significantly.
PS. One more thing to note is that some wp themes have some code that you can only really change with a plugin or by writing custom css under the customizer.
You can figure out exactly what you need to write in the custom css area by using chrome's dev tools and selecting the font you want to change.
I'm struggling since a while with styles in WordPress.
What happens is that I define a style for a Block in my.css and in the website, this style gets overwritten by the style.min.css. So if WordPress want's the color to be green by default, I can just force it to change this by putting !important everywhere. That's super ugly.
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style.css', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
That is how I load my standard style.css in my self-written theme in WordPress 5.3.2.
So if anyone knows, how I can tell WordPress to load my style.css after the style.min.css or whatever causes this inconvenience.
Use CSS Specificity to assign higher priority to your CSS rules.
Ironically, your desire to "keep selectors as short and basic as possible" is working against you, but the provided link will help you build high-priority, specific, CSS Selectors.
NOTE: Wordpress is NOT "overwriting" your .css file. We know this because your CSS applies when you add !important to the rules -- so, the CSS rules must be loaded, hence this is a CSS priority issue, not a Wordpress issue. Also, note that CSS rules never "overwrite" eachother; instead, all rules are there, but only one is used (typically, the most specific one).
Change your style.css parameter to your-theme-style-css
After experimenting around, I slowly believe, that the problems roots are in css itself. ".wp-block-cover .wp-block-cover__inner-container" is the wordpress class. My class is just ".wp-block-cover__inner-container", as I prefer to keep selectors as short and basic as possible.
But if I change my class name to the exact same, used by WordPress as well, it is working. Also if I just put any other class in front, the styles are applying properly.
So it seems for me now to be a priority question from CSS. Is this possible?
In my plugin I have some styles for the admin area. Originally, I was just doing them in the main plugin file, inline, but now I've enqueued them. The stylesheet is enqueued properly; all the styles are working, except that -- any images referenced in the stylesheet do not show up. When the styles were inline they showed up fine, but when I enqueue the stylesheet they do not show up. It's not an issue with the path because the stylesheet is in the same directory as the plugin file where the styles were formerly found inline.
Here's how I've enqueued it:
function my_style() {
wp_register_style( 'style', plugins_url('style.css', __FILE__) );
wp_enqueue_style( 'style' );
}
add_action( 'admin_enqueue_scripts', 'my_style' );
And again: the enqueue is correct because all the other styles work fine. So here is an example of an image in my stylesheet:
#mycustom-mb h3:before {
content:url("../wp-content/plugins/my-plugin/images/banner.png");
}
And that same line works when the style is inline, rather than enqueued. Is WordPress doing something weird to block my images? It doesn't even give me a file not found error in Firebug, nor does it show the broken image link in the header (like it does when you have a bad path). It's just not there. And in Firebug, Firebug doesn't even try to search for an image when you hover over its link, like it does on all other images. So it feels like WordPress is doing something weird to images when a stylesheet is enqueued to the admin.
I can't do a regular include either, because, though it works fine, it gives a "unexpected characters" warning message on plugin activiation when I have my CSS inline or included.
When using url() inside one of your css rules, you have to remember, that the paths are relative to the stylesheet that they're found in.
So, in the case of inline styles, the path is relative to /wp-admin/, but when you load a stylesheet found in /wp-content/plugins/my-plugin/style.css, all of the paths will be relative to /wp-content/plugins/my-plugin/.
Therefore in order to target the correct URL at which your images are found, you just have to use this:
#mycustom-mb h3:before {
content:url("images/banner.png");
}
I'm now using Chrome Developer tools, which I know for sure displays a 404 not found error when a rule from a stylesheet causes the browser to load an image, so I'm not sure why FireBug would not show any errors.
I´ve created a child theme of the Snapshot theme from WooThemes.
But it seems I´m not succeeding to style the child theme.
Here´s the style.css header/code of the child theme:
/*
Theme Name: My Child Theme
Theme URI: http: //kevingstongramado.p.ht/
Description: This is a custom child theme I have created.
Author: Marcelo Noronha
Template: snapshot
Version: 1.0
*/
#import url("../snasphot/style.css");
div#temp{
color:#00FF00;
}
I´ve pressed F12 in Chrome, to see what could be.
The 'style.css' file, that appears, is the 'style.css' from the parent theme.
I don´t know if it shouldn´t has loaded the 'style.css' from the child.
I´ve a directory, 'snapshot', for the parent, and 'snapshot-child', for the child theme.
I have activated the child theme.
Can´t seem to find the 'style.css' file of the child theme, using F12 in Chrome.
The URL of the site is http://kevingstongramado.p.ht/
The text that should be styled in the page, is 'Test2'.
EDIT:
I´ve used FireBug in FireFox. Also, the site doesn´t seems to have loaded the 'style.css' from child theme.
Anyone?
Answer from an anonymous user, found in the edit review queue:
I don´t know, but it seems that in this theme, you can´t add styles in the 'style.css' child theme file.
I´ve tried to make some changes in the header.php, using one of the answers from this forum.
Like:
<link rel="stylesheet" type="text/css" href="<?php echo
get_stylesheet_directory_uri()
?>/style.css" />
But it completly screwd up layout.
So I realized, using FireBug, that the stylesheet that is loaded from the child theme, is the file "custom.css".
So that is the answer. Using the child theme file, "custom.css", you can add styles to your child theme.
I'm having trouble troubleshooting a new client site.
I'm using CSS media queries but for some reason modernizr/respond.js is not working for IE7 & 8 – I've been looking over this all morning and cannot fix it. Wondered if a fresh pair of eyes could spot anything I can't...?
Site is here: http://cy4or.co.uk
UPDATE:
I'm wondering if this has anything to do with Parent/Child themes in Wordpress. Previously this site used one theme, I since split that theme into a parent and child theme and (I think) that's when the problem began.
UPDATE 2:
It DEFINITELY has something to do with parent / child themes. activated just the parent them and all works fine.
I too was suffering from Respond.js not parsing the media queries in my WordPress parent/child theme configuration which involves using #import in the child CSS file to pull in the parent theme CSS. I then discovered that according to the Respond.js documentation:
Respond.js doesn't parse CSS referenced via #import, nor does it work
with media queries within style elements, as those styles can't be
re-requested for parsing.
Since I am using Sass, the solution in my case was to #import the Sass file, not the CSS file:
#import '../parent/scss/style.scss';
This compiles the parent CSS into a single style.css file in the child theme and Respond.js renders the media queries as expected. If you were not using a preprocessor or had another reason to load the parent CSS file itself, this could be done with wp_enqueue_style.
function link_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'link_parent_theme_style');
Technically, this question should read "Respond.js not working with WordPress parent/child theme"
Your page does not validate, and JavaScript will most likely need a correctly validating page to stand the best chance of executing without errors.
So it turns out this problem was a bit of a tricky one to resolve.
I'm using .less to compile my css but for some reason when doing so with the Child theme and importing the parents css at the top of style.css it wasn't working in ie8 & below.
I wish I could expand on 'it wasn't working' but after 2 days of trouble shooting I really couldn't tell you what the problem was.
In the end I resorted to adding the child css directly to the header, followed by the parents css:
<link rel="stylesheet" href="http://site.com/wp-content/themes/Parent/style.css">
<link rel="stylesheet" href="http://site.com/wp-content/themes/Child/style.css">
This worked for me, I know it's not ideal but I can live with it.
If anyone has any knowledge on working with .less app to compile child themes and parent themes css successfully I'd like to know.