My child theme is loading the stylesheet twice… ?

saucer78
(@saucer78)

9 years, 11 months ago
Not sure if this is theme specific, but I’m apparently having some issues with a recently installed child theme.

This is my site as it sits now: http://getsrsly.com/

A little history:

A couple of days ago, after reading of the importance of doing so, I installed a child theme plugin to create a Hatch child. Very cool plugin with great features, but my page formatting was a little buggy and I feared I was experiencing some plugin conflicts. So this morning I decided to disable and delete the child theme plugin (via the WordPress interface) and create a child theme “by hand” via FTP. I followed a simple tutorial, activated the child theme within WordPress, and went back to work on my site.

However, just a bit ago I posted regarding another issue and was informed by a moderator that my child theme seems to be loading a stylesheet twice.

I do not know if this is how the Hatch theme is intended to work, as below the CSS input box in Appearance>Theme Settings>Custom CSS it says “It would overwrite any default or custom theme settings.”

Does this mean that this inbred ability to tweak CSS within the theme is, in a way, already creating a child? Is a child theme not necessary if I customize my CSS via this window? (I am so new to all of this, I still don’t have a grasp on how the child interacts with the default theme.)

To add to this, I’m having trouble finding some custom CSS I added earlier in the week – possibly via the child theme plugin. I cannot find these code snippets, but the effects are still active! (Faded hover effect for my home page images.)

So do I possibly have three stylesheets in operation?

Here’s the code I’ve added over the past week via my Custom CSS box within the Hatch theme Settings:
```
.home.singular-page .hentry .entry-title {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
}
.home.singular-page #content { width: 68.0851%; }
.home.singular-page.page-template-fullwidth #content { width: 100%; }
.home.singular-page .hentry { width: auto; height: auto;
}
#menu-primary {
	font-size: 1.40em;
	font-style: none;
        width: 60%;
	margin: 60px 0 0 0;
	float: right;
	position: relative;
	z-index: 99;
}
#menu-primary li a {
	line-height: 1em;
	margin-left: 1em;
	display: block;
	font-weight: bold;
        margin: 0 5px;
        padding: 0px 10px;
}
#header {
	clear: both;
	float: left;
	width: 100%;
	margin: 40px 0 0 0;
        border-bottom: solid;
}
#header a img:hover {
     opacity: 1;
}
.menu .sf-with-ul {
   background: none;
}
```
And here’s the image hover code that I now cannot find:
```
a img{
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

a img:hover{
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
```
I have not touched the actual CSS within the new child theme.

Thanks so much for any help!

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

mrtom414
(@mrtom414)

9 years, 11 months ago

css stands for cascading style sheet.

Whenever you add a new rule the new rule overrides the rule that existed before it. If you loaded the same rule twice it would just replace the old rule with the same rule which would not effect anything.

When you create a child theme you are pulling in the css code from the parent theme. The statement @import url(….) does exactly that. This statement pulls everything from the style.css file and includes it in your current theme.

Whatever rule is applied to your theme last is the rule that will be used.

There only a few ways to load the style sheet more than once.

The first would be the <link type=’stylesheet’ href=’….’>
if you have the same link statement in your header it would load the same sheet twice which would not effect the appearce of your website. It would just add to your time in loading the page.

The second is the @import statement if you imported the same style sheet twice.

to answer your question can you have more than 1 style sheet loading. Yes you can have a large number of style sheet loading and probably do. Just remember whatever rule is applied last it will override the old rule.

Thread Starter saucer78
(@saucer78)

9 years, 11 months ago

Thanks for the reply.

A mod in here told me my page was loading a stylesheet twice – that’s all I know – but assumed it was a bad thing since he brought it up, haha.

I went ahead and performed a full reinstall, as I feared I had several bits of css in different files (but I don’t understand how these changes are written or stored, so I thought things were getting jumbled). What’s so confusing about this to me (total noob) is that I have half a dozen different options for inputting custom code – of which I probably used four different methods before the reinstall. Within my theme (Hatch), there are 3 different methods for editing CSS within the Apperaance tab alone!

Since the reinstall, I have not created a child theme and have made sure to place ALL of my custom coding in the Custom CSS box in the Settings of my the Hatch theme.

I don’t know if this has done anything to affect performance, but my site is finally nearing completion if you feel like taking a look at the code:

http://getsrsly.com/

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

The topic ‘My child theme is loading the stylesheet twice… ?’ is closed to new replies.

Tags