WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
Newbie layout question (19 posts)

  1. leftlegforemost
    Member
    Posted 1 year ago #

    Hi all - this may have been addressed elsewhere but I'm not sure how to look for it, term-wise. I am working on this web site

    http://www.isabelbyron.com

    and could use some help. On the main page, and on every page at the bottom there is a light gray double line. It is similar to the horizontal lines above and below the menu options "About, Consulting, etc..." My goal is to get rid of those two lines. Would appreciate any assistance with this.

    Thanks so much,

    Ryder

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    You must create a child theme
    http://codex.wordpress.org/Child_Themes

    Or just download one from here
    http://quirm.net/themes/twenty-twelve-child

    After you have a child theme setup and activated properly, add this line in style.css of your child theme.

    .site-content article {border-bottom-color:transparent;}

    and also this below will get rid of shadow around the site logo

    #masthead img.header-image {border-radius:0;box-shadow:none;}
  3. leftlegforemost
    Member
    Posted 1 year ago #

    Thank you for the fast reply. I made a folder in wp-content/themes and added the child theme. I inserted both the .site-content line and the #masthead line you recommended in this section of the style.css file:

    */

    .site-content article {border-bottom-color:transparent;}

    #masthead img.header-image {border-radius:0;box-shadow:none;}

    /*

    So far so good? But when I activate the child them,e all of the layout preferences are gone, and there are only hyperlinks where each of the menu items stood before.

    I also read in the codex.com guide about the @import method, and gave that a go, to no avail.

    I appreciate your help.

    R

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    It's easier to just look at the real working example.

    So please dl the child theme from second link above and take a look at the style.css and compare to yours, see if there is something you have missed.

    If done right, those 2 lines of css (or whatever else you might have later on) will be down below the @import line.

    It's important that @import line must be there because child theme needs to import the whole parent's css and then override (overwrite) only the part that need changed.

    Also, when editing code, you must use plain text editor, like notepad or notepad2 or notepadd++.

  5. leftlegforemost
    Member
    Posted 1 year ago #

    Okay, I'm following your advice and I've downloaded the child theme. I have been using Textedit on a Mac.

    Altered the style.css to say:

    License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    */

    @import url("http://isabelbyron.com/wp-content/themes/twentytwelve/style.css");

    .site-content article {border-bottom-color:transparent;}
    #masthead img.header-image {border-radius:0;box-shadow:none;}

    /* Copyright 2012 Mel P.

    Still encountering the same result... thinking it might have to do with the @import url, but as is obvious I am very new at this.

    Thanks again.

  6. paulwpxp
    Font hero
    Posted 1 year ago #

    That's because you deleted the license comment but forget to take out one of the opening or closing css comment indicator, namely /* and */

    CSS comment
    http://reference.sitepoint.com/css/comments

    You have to make sure that the comment section is enclosed with /* AND */ , when one is missing, the css code will be misinterpreted as comments.

    From the look of what you posted above, I believe that if you just delete the last line OR put in the closing */ will fix the issue.

    EDIT: I just noticed the @import line, you can just use this (as in the example).

    @import url(../twentytwelve/style.css);
  7. leftlegforemost
    Member
    Posted 1 year ago #

    First of all, you are awesome to help with this.

    Secondly, I am hoping you don't mind looking at the entire css file, and telling me where to insert the code. I only copy and pasted a portion of the previous file to show how I had it formatted, but that is only confusing things - I'm still not confident about where this code should live. Here is the file without my having added the code:

    /*
    Theme Name:Twenty Twelve Child
    Version: 1.0
    Theme URI: http://quirm.net/themes
    Description: A basic starter child theme for Twenty Twelve
    Author: Mel Pedley
    Author URI: http://blackwidows.co.uk
    Template: twentytwelve
    License: GNU General Public License v2
    License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    */

    /* Copyright 2012 Mel P. (email : esmi@quirm.net)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License version 2,
    as published by the Free Software Foundation.

    You may NOT assume that you can use any other version of the GPL.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301
    USA

    The license for this software can also likely be found here:
    http://www.gnu.org/licenses/gpl-2.0.html
    */

    /* Import layout */
    @import url(../twentytwelve/style.css);

  8. paulwpxp
    Font hero
    Posted 1 year ago #

    those 2 lines of css (or whatever else you might have later on) will be down below the @import line.

    That's all.

    With the file above as is, just add css down below the @import line.

    Make sure the child theme is activated.

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    you are awesome to help with this.

    Totally agree!

  10. paulwpxp
    Font hero
    Posted 1 year ago #

    Hi Andrew, you and many others has been more awesome, we all like to contribute in some ways that we can.

  11. leftlegforemost
    Member
    Posted 1 year ago #

    I am sorry to say I'm still not getting it!

    Okay, child theme, activated. Here is the new file:

    /*
    Theme Name:Twenty Twelve Child
    Version: 1.0
    Theme URI: http://quirm.net/themes
    Description: A basic starter child theme for Twenty Twelve
    Author: Mel Pedley
    Author URI: http://blackwidows.co.uk
    Template: twentytwelve
    License: GNU General Public License v2
    License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    */

    /* Copyright 2012 Mel P. (email : esmi@quirm.net)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License version 2,
    as published by the Free Software Foundation.

    You may NOT assume that you can use any other version of the GPL.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301
    USA

    The license for this software can also likely be found here:
    http://www.gnu.org/licenses/gpl-2.0.html
    */

    /* Import layout */
    @import url(../twentytwelve/style.css);

    .site-content article {border-bottom-color:transparent;}

    #masthead img.header-image {border-radius:0;box-shadow:none;}

    Very thankful for the help.

  12. paulwpxp
    Font hero
    Posted 1 year ago #

    @leftlegforemost

    Please go to Appearance > header and background to reconfigure the settings.

    EDIT: please make sure you got child theme activated.

  13. leftlegforemost
    Member
    Posted 1 year ago #

    When I activate the child theme, even after reconfiguring header and background, the formatting problems are still there. Because it's hard to explain I will leave it implemented so you can see:

    http://www.isabelbyron.com

    Thanks.

  14. paulwpxp
    Font hero
    Posted 1 year ago #

    That's because you changed the link in @import line.

    Just use as is.

    @import url(../twentytwelve/style.css);

    Actually, you already got it right in your code above.

  15. leftlegforemost
    Member
    Posted 1 year ago #

    I'm afraid I don't follow. I have written the @import line in the following ways with the same result:

    @import url(../twentytwelve/style.css);

    and

    @import url(http://isabelbyron.com/wp-content/themes/twentytwelve/style.css);

  16. paulwpxp
    Font hero
    Posted 1 year ago #

    Yes, but that's not exactly the one you just used recently, that's why it didn't pull the parent's style.

    Now, the child theme is properly setup.

    Next, you must go and put in site name and description, leaving both empty will result in bad SEO and site accessibility. Put in site name and desc, then go to Appearance > Header and choose not to display the text, the theme will properly hide the text for you.

  17. leftlegforemost
    Member
    Posted 1 year ago #

    I have followed these directions and still the problems remain. :(

    Just to summarize.

    My style.css looks like this:

    /*
    Theme Name:Twenty Twelve Child
    Version: 1.0
    Theme URI: http://quirm.net/themes
    Description: A basic starter child theme for Twenty Twelve
    Author: Mel Pedley
    Author URI: http://blackwidows.co.uk
    Template: twentytwelve
    License: GNU General Public License v2
    License URI: http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    */

    /* Copyright 2012 Mel P. (email : esmi@quirm.net)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License version 2,
    as published by the Free Software Foundation.

    You may NOT assume that you can use any other version of the GPL.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301
    USA

    The license for this software can also likely be found here:
    http://www.gnu.org/licenses/gpl-2.0.html
    */

    /* Import layout */
    @import url(../twentytwelve/style.css);

    .site-content article {border-bottom-color:transparent;}

    #masthead img.header-image {border-radius:0;box-shadow:none;}

    Not sure what else to do, appreciate your help but beginning to think I will just live with the gray lines...

    The background is now everywhere, whereas in twentytwelve there is a big white area in the middle. It seems the child template has changed this. Also, the menu buttons are gone! Yikes.

  18. paulwpxp
    Font hero
    Posted 1 year ago #

    I downloaded style.css of TwentyTwelve (parent) from your site and compared to the original one, it's clear that you've edited the parent stylesheet.

    Also, during the time that I reloaded your site inspecting the child style's issue earlier, it's also clear to me that you got it right already.

    So just make sure you use original unedited version of all the parent theme files.

  19. leftlegforemost
    Member
    Posted 1 year ago #

    OK, I deleted and reinstalled the TwentyTwelve parent theme entirely, re-uploaded the TwentyTwelve-child theme with the added code, gave the site a name and description... but it appears something is getting lost in the mix.

    The same problems are present when I activate the child theme: the menu buttons are gone and are just hyperlinks, the background image occupies the entire screen instead of just the borders...

    This has been a long day of posting and I truly appreciate the help, but something isn't working. I'm going to give up for awhile as it's driving me a little nuts!

    Thank you again.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic