WordPress.org

Ready to get started?Download WordPress

Forums

Ever After
Theme: Forever/Ever After Mashup Child Theme Help (11 posts)

  1. The-beauty-geek
    Member
    Posted 1 year ago #

    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!

  2. The-beauty-geek
    Member
    Posted 1 year ago #

    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.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

    Yes, duplicate threads are deleted per the forum guidelines.

  5. The-beauty-geek
    Member
    Posted 1 year ago #

    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.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  7. The-beauty-geek
    Member
    Posted 1 year ago #

    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?

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  9. The-beauty-geek
    Member
    Posted 1 year ago #

    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!

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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/

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

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

  11. The-beauty-geek
    Member
    Posted 1 year ago #

    I'll look into all of those, thanks!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic