IE not following style rules - css

Creating a Wordpress-driven site for a client - http://www.2sleeptight.com
It looks OK in major browsers, except there are some serious problems in IE. Navigation will not display horizontally and the site title is the wrong color. There are 2 stylesheets, style.css (main style sheet) and custom.css (edits I have made to style.css)
The Wordpress theme even injects the title color style directly into the page header here:
#header .site-title a {font:bold 60px/1em 'Rancho', arial, sans-serif;color:#ffc600;}
But IE still picks up that grey color somewhere.

spogue, the problem is the order of your CSS. The values are being inherited by your other CSS files and because they are executed last they become the master.
Simply add this to the bottom of your CSS file.
.site-title a {color:#FFC600!important;}

Related

Change font size and weight of text in navigation menu on WordPress

I am looking to change the font size and weight of the navigation menu items on my WordPress site, I am using The Company theme, but I can't seem to figure out the CSS required
My site is www.thepowerwithin.org.uk
I am looking to make the items in the main menu at the top bigger and bold
I have reviewed your question. I think you want to apply CSS only on main-menu anchor text not on sub-menu anchor text. If I am right then you can do as:
ul.menu:not(.sub-menu) > li > a {
font-size: 16px;
font-weight: bold;
}
You should use children-selector > to apply CSS only on the direct children of ul
When use ul.menu:not(.sub-menu) it ignores sub-menu ul of li.
The best thing to do is learn how to use the developer tools in Firefox or Chrome or Safari or IE to see what's loading on your site and how to work with and change the CSS and HTML. Dev tools allows you to make temporary changes to the locally cached browser copy of the site. You can then add the CSS changes to the theme, either by adding new CSS in theme options or to the style sheet.
If the theme allows you to add custom CSS to modify the menu, that's good. If not, make a child theme so you don't lose your changes when the theme is updated. See Child Themes « WordPress Codex

Chrome develop tool can´t seem to find the background color

I use Chrome development tools to inspect a header color I want to change:
I have located it, and I can change it in the inspector view, but I want to change it for real, so I need to know where the CSS is … but it says that it is a index file (index) 573.
What does this mean?
It is a wordpress theme and more specifically it is the woocommerce plugin
You can try overriding in style sheet using more descriptors in CSS.
Maybe something like:
html body .woocommerce-page form table.shop_table thead {
background-color: #333333 !important;
}
You could click where it's indexed in the Element inspector to bring up the CSS file. It's probably min'd so I'd recommend using PrettyPrint. That should show you, unless I misunderstood.
Here's a screen shot album I put together. I have Devtools Author so ignore the silly UI http://imgur.com/a/4JrKA

Change font of WordPress theme "Zerif Lite"

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.

How can I change the colors (dropdown arrows, dropdown menus, etc.) of the main navigation bar of the WooThemes Resort Theme?

I seem to find the right code in layout.css, but when I add that to the style.css and change the colors nothing seems to happen, even after clearing cache. What is the recommended way to change the main nav bar colors for the Resort Theme? http://www.notketchup.com Thanks!!
Your WordPress theme's style.css needs a higher priority than the layout.css stylesheet.
In your theme's header.php, try moving the link to your style.css document to the line immediately before </head>
Failing that, try adding !important to your styles - e.g.
#myelement {
color: #888 !important;
}

Independent CSS for Fancybox

I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }

Resources