Theme: Forever/Ever After Mashup Child Theme Help

Tried re-posting this in another section but someone deleted it. Thanks for that. Should I be deleting here and re-posting elsewhere to get help? Would really appreciate if someone would help me out with this.

Looks like your child theme has a bunch of copied code from the parent theme? You really only should put CHANGES you’ve made in the child theme.

Also, these kinds of changes may not be that simple – generally, you will probably need to use media queries to modify the CSS for the new template layout – are you familiar with how those work?

Tried re-posting this in another section but someone deleted it. Thanks for that.

Yes, duplicate threads are deleted per the forum guidelines.

I copied a lot of selectors etc. from the parent code because I liked the look of the site when I created it with Ever After and wanted to re-create it in Forever. I’m still learning and copying and then modifying the code was the easiest way to make sure that I was making changes that would actually work.

As for media queries, I know what they are and how they work but don’t really know how to create them. I’m also worried about putting code into the wrong places and completely screwing up the entire site.

Duplicate code actually makes it MUCH harder to keep track of what you have changed and it creates duplicate code which can slow down your site.

I’m a little bit confused about which theme you are actually using – looks like a forever child theme? Is the parent forever theme unmodified?

I’m also worried about putting code into the wrong places and completely screwing up the entire site.

Probably WILL happen :). That’s another reason for not having unnecessary code in the child theme…it’s harder to see what you’ve changed. Also be sure you make VERY frequent back-up copies of the style.css file.

Sorry…

It’s a forever child theme. As far as I know the parent theme is unmodified.

So now that we’ve pointed out everything that I’ve done very wrong so far, any advice on how to fix any of it?

Yep, first make a copy of the style.css file as a back-up. Then go through and remove any of the CSS in the child theme that’s not doing anything.

I’m also not sure what you want to change – if it’s styling from Ever After, look at the CSS for those parts.

I’ll have to look at this in more detail in a couple of hours – I’m not on a computer I can easily do that on and have to get off the forums for a while right now.

It’s not so much the styling that I want to change.

What I’m trying to replicate from Ever After is the responsive layout for different screen sizes.

Not sure if this can be fixed with CSS or if I need to create another PHP file for it (which I am still kind of clueless about).

Thanks!

CSS should be fine for changing responsive layouts – looks like you need a media query (or possibly a couple for different width devices) – in those set minimum widths for the content and sidebars and remove the float from the sidebar for the smaller devices –

A rough starting point:

@media (max-width: 650px) {
    #content {
         min-width: 600px;
     }
    #secondary {
         float: none;
         min-width: 600px;
}
}

You could also look at the CSS code for themes that have this kind of layout and how the media queries are set up.

Assuming you are using a browser tool like Firebug for this work?

Also see:

https://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

https://css-tricks.com/css-media-queries/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

I’ll look into all of those, thanks!