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.
Related
I have an active child theme called "Hello Elementor Child". Since other people have problems overriding Elementor and add !important to every css rule, I have done the same.
My problem is that nothing is overriding. When I "view source" and find a background image used on the home page, I can confirm that the link to that image is good. But, it's simply not showing up on the site.
I do not want to add all custom code to Elementor editor (or a css plugin) because (1) I don't have the pro version for this budget-conscious client and (2) I don't want a bunch of code in the head.
The style.css document
https://trimedia.co/hccpersonalcare/wp-content/themes/hello-theme-child-master/style.css?ver=1.0.0
Link to the background image so you know what it's supposed to look like: https://trimedia.co/hccpersonalcare/wp-content/themes/hello-theme-child-master/images/men-masked-personal-care-wide.jpg
Test location is https://trimedia.co/hccpersonalcare
If you shrink the viewport of your browser you will see a background image appear. The trouble is with your media queries, #media all and (max-width:600px) is missing a closing bracket. You have so many queries in there, I suggest chunking your code under a handful of common breakpoints so you can keep track of what overrides what better.
I had a question on how to find out which part of your code needs changing to adjust this "display:none !important" functionality which prevents the website to be responsive on mobile. When going under 767px content simply disappears and that condition triggers.
If I change it to "display:inline !important" that works but I've only done it in-browser and I can't find where to change it in the source files. Is there any methodology on finding this out? I've even used grep on all the files in the theme looking for keywords but I don't know where else to look. Also tried adding the changed code into the "Additional CSS" menu however with no success either.
The question is:
Is there any methodology to finding this [where the CSS lives] out?
You want to know the methodology to find the CSS. Let's walk through how I did it.
Step 1
The inspector gives you the location of the styles. Using your images, I marked the locations with the red boxes:
Notice that the style in question is located in (index):557. Where is that? It's not an external stylesheet, as with the style.css example. Rather, it's been added directly into the <head> and wrapped in <style>.
Using Dev Tools, look in the <head> of the DOM (in the HTML markup). You'll find it there.
Step 2:
Where do you find it? The method that I use is to look at the style declarations first in the <head>. Are there any comments to give you clues?
Next, I look at the actual style attributes. In this case, it's .tm_pb_builder. That is giving you a clue to the component that builds the CSS.
I did a Google search for that class attribute, like this: wordpress tm_pb_builder. That took me to GitHub and the Power Builder plugin from TemplateMonster.
Step 3
Now you know that the plugin Power Builder is the one responsible for adding that style into the <head>. You can then take a look at the respective page and explore how this page is built with this page builder.
That's my methodology.
You can add display:inline !important in the style.css of your child-theme, but it will only works if the plugin css file loads before it.
If the theme's css loads before plugin css, you can create a new css style and enqueue it at the very last end of the style enqueue.
add_action('wp_enqueue_scripts', 'se_41042975', 999);
function se_41042975(){
wp_enqueue_style('css-plugin-override', get_stylesheet_directory_uri(); ?>/css/custom_css.css');
}
Hope it helps!
I have followed official and unofficial guides, and yet I simply cannot seem to be able to get certain styles in a child theme to overwrite its parents styles.
The only solution for me right now is to directly modify the main stylesheet, which is quite annoying as that gets overwritten every time there's an update for said theme.
I know the child-sheet works as some styles I set there do get shown.
The theme I'm using is Twenty Thirteen with a custom child theme.
I only have the default WP plugins active.
WordPress core, themes and plugins are up-to-date.
In both Chrome and Firefox I see the style, it's just ignored I guess.
I'm trying to change the background-color of the footer, I tried multiple selectors (ID, class, parent-child, element...
This may very well be something really simple I'm overseeing but I just can't figure it out.
Thanks in advance.
PS: sorry if I sound frustrated (I am, lol)
After a lot of trial and error, I found a solution to my problem.
A classmate suggested trying to use the selector you get when inspecting the element (be it with Opera, Firefox or Chrome), instead of the same selector used in the main theme's style.css.
I find this odd, as the child theme should overwrite the parent's theme style anyway, right?
Either way, short solution: use a more specific selector than the one in the parent's style.css.
I had the same problem and it was caused by Chrome caching the css. I renamed the style.css in the parent theme and refreshed my page and to my surprise nothing changed. Using F12 to inspect the element the styles section had a link to styles.css (even though I had renamed it) I was able to right click and open styles.css in a new tab.
The Ctrl-F5 shortcut clears the cache.
Doing this totally messed up my page because now it was not reading the parent style.css. Then all I had to do was rename it back and it correctly loaded it but also had the correct entries from the child style.css.
You might be able to just Ctrl-F5 (all the renaming bit was just exploration to force it not to load)
Stewartside helped me use JQuery to create a specific function for my main navigation on my website (thanks again!). I created a child theme to add the changes to my header.php file and it has started to cause a weird layout change. My homepage should have 20px padding, which is NOT a special CSS modification, but the child theme automatically removes it. This doesn't happen with other pages on my site, just the homepage. I have also added/removed the jquery code to make sure that wasn't the problem; the style.css file for the child theme only has the "child theme" coding, no modified CSS.
Homepage: http://bostonirishclothing.com
About Us: http://bostonirishclothing.com/about-us
Is there anything that would cause this?
Get the Firebug add on for your browser (available on Chrome and Firefox). Then right click the section that is causing the issue and you can see the coding and all the relevant CSS functions including the files they are in (to the chosen section). It will also show which CSS function is being prioritised compared to the other. Then you can modify the functions or add new ones to make it work.
A dirty way to do things is to use !important however this should only be used sparingly as it can screw with other pages. An easy way to avoid that is to make the CSS function for example .entry-content { color:#fff; } becomes .post-x .entry-content { color:fff!important; }
Test things out. Firebug is amazing help when editing CSS. You can even do some of the tests in firebug itself.
I'm new to drupal and i was trying to do several common css tasks, like changing color background, links color etc. I guess i have not understood where the drupal css are. I tried to modify style.css in the folder my-site-name/sites/all/themes/mythemename/, which seems to be the main css, but it seems to have no effect on the site, even using the directive "!important".
So, where's the drupal 7 main css?
There is no "Main CSS". Drupal core uses some CSS files. Each module its own CSS. Then each theme overrides CSS using its own css files. You can have as much css files as you like in your theme and with any acceptable name.
Probably you have to clear the caches to see the results. If not, check the css styles with Firebug to see what is happening. This way, also, you can see what css files apply styles for each page/element.