WordPress.org

Support

Support » Themes and Templates » Theme: Forever/Ever After Mashup Child Theme Help

Theme: Forever/Ever After Mashup Child Theme Help

  • The Background Info:
    I started my website using Ever After by Automattic, but decided to use its parent Forever in the end because I needed a sidebar for my site. However I preferred the look of my site using Ever After so I decided to create a kind of Franken-theme using visual elements from ever after in the Forever theme.

    Now that I’ve gone and figured all that out, I realize that I really liked the responsive capabilities of Ever After.

    So my question is this: how do I get the responsive capabilities (I.e. different layout and small menu) from Ever After into my child theme?

    Website is http://www.the-beauty-geek.com

    I know HTML and CSS but I’m just starting to dip my toes into PHP.

    Any help or suggestions would be very much appreciated.

    Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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.

    WPyogi

    @wpyogi

    Forum Moderator

    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?

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    WPyogi

    @wpyogi

    Forum Moderator

    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?

    WPyogi

    @wpyogi

    Forum Moderator

    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!

    WPyogi

    @wpyogi

    Forum Moderator

    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:

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

    CSS Media Queries & Using Available Space

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

    I’ll look into all of those, thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Theme: Forever/Ever After Mashup Child Theme Help’ is closed to new replies.