What on earth happened to my styles?

(@thorhammer)

Situation: I have made a child theme from twenty twelve. I am using this on the front page of my multisite install. The front page is a page with its own header and its own page template. Suddenly my styles just … got drunk.
http://www.litteraturbloggen.no
The left sidebars content is hard-coded into the template. The right sidebar contains a styled widget which closes as it should. But the middle columns have totally lost their styles, the header style and the navigation style just shrunk into nothing, while the second level navigation is as before. I have no idea what happened, the style sheet is just like before, the styles are closing as they should …
A short code example, the site header:

<div class="gridContainer clearfix">
      <div id="xrqheader">
	<header id="masthead" class="site-header" role="banner">
			<hgroup>
				<h1 class="site-title"> ...etc</h1>

And here is the relevant styles in my child theme (for these):

body {
    padding: 0;
    margin: 0;
    font: 1em/1.4 Cambria, Georgia, sans-serif !important;
    color: #000000;
    line-height: 1;
    background-color: #eaeaea;
}
#xrqheader {
	clear: both;
	float: left;
	margin-left: 0;
	width: 100%;
	display: block;
	background-color: #3b5998;
}
.site-header {
	padding-left:5px;
}

.site-header h1  {
	font-family: 'Headland One', serif !important;
	font-size: 2.2em !important;
	font-style: normal;
 	font-weight: bold;
 	text-transform: uppercase;
}
.site-header h1 {
	text-align: left;
}

.site-header h1 a {
	color: #ffffff;
	display: inline-block;
	text-decoration: none;
}

.site-header h1 a:hover {
	-webkit-transition: all 0.4s ease-in;
	transition: all 0.4s ease-in;
	-moz-transition: all 0.4s ease-in;
	-o-transition: all 0.4s ease-in;
	text-decoration: none;
    color: #ce9e41;
}

.site-header h1 {
	font-size: 24px !important;
	font-size: 1.714285714rem !important;
	line-height: 1.285714286;
	margin-bottom: 14px;
	margin-bottom: 1rem;
}

And here is the main navigation li:

.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px !important;
	font-size: 0.857142857rem !important;
	line-height: 1.42857143;
}

And still the front page looks like it does???? What on earth?

Viewing 5 replies - 1 through 5 (of 5 total)

WPyogi
(@wpyogi)

11 years, 3 months ago

It looks like a stylesheet for a plugin for latest posts isn’t linked correctly?

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.litteraturbloggen.no%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
Thread Starter ThorHammer
(@thorhammer)

11 years, 3 months ago
Oh no!

This plgin is meant to get the styles from the child theme stylesheet… here is the code in the plugin:
```
public function addCss()
	{
		if( is_admin() )
		{

		}
		else
		{
			wp_enqueue_style('snlp-css', SNLP_PLUGIN_URL . '../style.css');//var /css/feedstolpene.css
		}
	}
```
This code chunk…it should look in the child theme folder for the style.css, but maybe it doesn’t? To my great horror I can see that I have an additional style sheet in a separate folder in this plugin …
Thread Starter ThorHammer
(@thorhammer)

11 years, 3 months ago

Actually…I can remove these lines of code from the plugin. I think. Or shouldn’t I think that?
Cause all the styles the plugin puts out is defined in the child themes style sheet.

WPyogi
(@wpyogi)

11 years, 3 months ago

It also looks like you have multiple CSS sections with the same selectors — so those may be overriding the ones you want to show on the page. Are you using Firebug to look at what’s happening with the CSS? That should help you track down what’s showing up and what’s not — and where the styles are coming from.

WPyogi
(@wpyogi)

11 years, 3 months ago

Cross posted with you — yeah, it looks like the child styles do have the plug-in styles. So try using Firebug.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘What on earth happened to my styles?’ is closed to new replies.

Tags