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.
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 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)
On a blog post on my website, I decided to share some of my code using a GitHub Gist, since I thought it would be an easy way to apply code formatting and syntax highlighting to my code.
I've embedded the Gist in the post, but for some reason my website's CSS has overridden the CSS of the Gist and so I've ended up with code which is all grey and in a serif font. I assumed that since the stylesheet in the Gist is being linked to after my main stylesheet link, it would be fine, but this seems not to be the case.
How can I make it so that my main stylesheet won't modify the styling of the Gist?
Edit: Here is the page where the problem is occurring, the Gist is near the bottom.
Are you using the embed option? There would be one located on the left sidebar the says "embed this gist" which uses different ids from your css stylesheet so it wont conflict.
You can also rename your selectors on your website, the second stylesheet takes priority not the first.
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.
I installed the latest version of Wordpress and added the WP-Syntax plugin (and also the Markdown Extra plugin, but I think it's unrelated to this issue).
It works perfectly with both themes that ship with Wordpress: looking good using WordPress Default 1.6 and looking equally good with the WordPress Classic 1.5 theme.
However it doesn't work with the excellent LightWord theme, which I would like to use. The code box looks strange with the right border at the end of the actual code:
My thoughts:
I have tried investigating this with Firebug without any success. The CSS from the WP-Syntax plugin should be the same in all three theme cases. So the fact that it looks wierd with this theme has to do with some inherited CSS property from the LightWord theme.
This in turn probably means that the WP-Syntax plugin should reset something more for its CSS to work correctly.
Help!
Advanced CSS isn't something I'm good at. But I would very much like to resolve this problem as soon as possible. I'm also curious from a technical view point what could be causing this behavior? I hope someone with good CSS skills will be able to help out!
We (you if you want to, me if you don't feel like it) could then file a bug report in the appropriate place, to get these components working together.
To resolve this I understand you need more than screenshots. I have a link with the problem theme, which could be used to investigate further.
Web site where the problem may be experienced (Taken down as the problem is solved)
Edit: In response to a comment I'm also including a link to the working web site using the classic theme and the same plugin setup: Link to a working theme with these plugins (Taken down as the problem is solved)
Thank you for reading!
Summary of problems I'd like to solve:
What's the best way to get rid of the right and bottom inner border in the code box? I first noticed the right border, but the bottom border is also an eye sore.
The code box right border isn't visible. It's due to .wp_syntax {width:100%;} and if I set it to 99% it's visible again. Do you consider this to be a problem with the theme or the plugin?
Making changes in the theme (style.css) or the plugin (wp-syntax.css) would be preferred if that's possible, so one of them could be standard. But which one? And how?
The problems you are having are due to the stylesheets of WP-Syntax and LightWord interfering with each other. I don't really think that the problems are with the theme or the plugin, they are just down to how the two interact with each other.
To make all of the required changes, ideally you would edit styles in both wp-syntax.css and style.css. You can however cheat a little.
In style.css add the following:
.wp_syntax { width:auto; }
.wp_syntax table { border:0 !important; }
.wp_syntax table td { border:0 !important; }
These changes should solve all of the problems, with the benefit of keeping all of the changes localised to a single file (style.css of the LightWood theme). The other tables in the example should all remain unchanged as well.