• Hi folks. I’ve been having a few “issues” with my site, such as being unable to change hyperlink colors despite using CSS that works for others, and having strange problems with sidebars being replaced with footer widgets when making changes to the Child Theme that otherwise work fine when made to the Parent theme (I know it’s a no-no to change the Parent, which is why I want to get whatever is wrong sorted out).

    I have tried installing fresh versions of Twenty Twelve, and have been through trouble-shooting steps suggested by people here and Codex. I am wondering if there might be some errors in my Stylesheet. I’ve been peering at it for days, but can’t locate anything. That doesn’t mean there are not errors staring me in the face that I’m not seeing.

    I wonder if someone would mind taking a look through my CSS and seeing if anything pops out as wrong, please?

    I’ve got this at the top (took name out for privacy reasons)

    /*
    Theme Name:     Twenty Twelve Child
    Theme URI:      https://example.com/
    Description:    Child theme for the Twenty Twelve theme
    Author:         XXXXYYYY
    Author URI:     https://perthpunk.com
    Template:       twentytwelve
    Version:        0.1.0
    */
    @import url("../twentytwelve/style.css");

    Then, the rest is as follows:

    /* Images */
    .alignleft {
    	float: left;
    }
    .alignright {
    	float: right;
    }
    .aligncenter {
    	display: block;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    .site-info {
       display: none;
    }
    
    .site-content {
        margin: 1rem 0 0;
    }
    
    body .site {
    padding: 0 40px;
    padding: 0 2.857142857rem;
    margin-top: 0px;
    margin-top: 3.428571429rem;
    margin-bottom: 48px;
    margin-bottom: 3.428571429rem;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    }
    
    #masthead .main-navigation ul.nav-menu,
    #masthead .main-navigation div.nav-menu > ul {
    	border-bottom: 0px;
    	border-top: 0px;
    }
    #masthead .main-navigation li ul li a {
    	background: lightgrey;
    }
    #masthead .main-navigation a {
    	color: darkblue;
    }
    #masthead .main-navigation li ul li a:hover {
    	background: #FF9933;
    }
    #masthead .main-navigation a:hover {
    	color: #660033;
    }
    #masthead .main-navigation ul.nav-menu,
    #masthead .main-navigation div.nav-menu > ul,
    #masthead .main-navigation li ul li a {
    	border-color: rgba(yellow, 0.1 );
    }
    
    @media screen and (min-width: 600px) {
     .site-content article {
      margin: 3em auto;
     }
    
    .site-header h1 {
       font-size: 2.85714rem;
    line-height: 1.84615;
    font-weight: bold;
       text-align: center;
    }
    
    .site-header h2 {
       font-size: 1.3rem  ;
       text-align: center;
    }
    
    .headerimg {width:960px; margin:0 auto;}
    }
    
    @media screen and (min-width: 600px) {
    .main-navigation ul.nav-menu,
        .main-navigation div.nav-menu > ul {
            display: inline-block !important;
            text-align: left;
    	margin-left: 40px;
            width: 100%;
        }
    
    .widget img {
        border-radius: 0;
        box-shadow: none;
    }
    
    .footlinks {
        text-align:center;
    }
    
    .entry-header .entry-title {
        text-align: center;
    }
    
    /* this removes the margin/space above the menu */
    .main-navigation {
    margin-top:0px;
    }
    
    body.page-id-85 {
     background: url("/wp-content/uploads/2013/05/HY-damned-look.gif") !important;
    }
    
    body.page-id-237 {
     background: url("/wp-content/uploads/2013/05/HY-damned-look.gif") !important;
    }
    
    body.page-id-215,body.page-id-234 {
     background: url("https://www.perthpunk.com/wp-content/uploads/2013/07/Orphans-background-550.jpg") !important;
    }
    
    body.page-id-631 {
     background: url("https://www.perthpunk.com/wp-content/uploads/2013/06/Lloyd-Memoirs-1650-3.jpg") !important;
    }
    
    body.page-id-318,body.page-id-401,body.page-id-1029,body.page-id-325,body.page-id-368,body.page-id-418,body.page-id-335,body.page-id-365,body.page-id-333,body.page-id-410,body.page-id-424,body.page-id-361 {
     background: url("https://www.perthpunk.com/wp-content/uploads/2013/06/Personal-Perspectives-backg.jpg") !important;
    }
    
    .page .site-title,
    .page .site-description {
     display: none;
    }
    
    /* Assuming this is your home page */
    .home .site-title,
    .home .site-description {
     display: block;
    }
    
    .entry-title
     {
      display: none;
    }
    
    .page .header-image {
     display: none;
    }
    
    .home .header-image {
     display: block;
    }
    
    .wp-caption .wp-caption-text,
    .gallery-caption,
    .entry-caption {
    	text-align: center;
    }
    
    .site-header {
    padding-bottom: 0rem;
    }
    
    .header-image {
        display: block;
     margin: 2rem auto 2em;
    }
    
    .nav-menu li > a:after {
        color: #888;
        content: ' ?';
    }
    
    .nav-menu li > a:hover:after {
        color: #444;
        content: ' ?';
    }
    
    .nav-menu li > a:only-child:after {
        content: '';
    }
    
    .box {
       float: none;
       width: 90%;
       padding: 15px;
       margin: 10px auto;
       min-width: 200px;
       border: 3px solid black;
    }
    
    .boxlloyd {
       float: none;
       width: 90%;
       padding: 15px;
       margin: 10px auto;
       min-width: 200px;
       border: 3px solid black;
       background-color:#9f9;
    }
    
    .boxletter {
       float: none;
       width: 90%;
       padding: 15px;
       margin: 10px 10px 3.42858rem;
       min-width: 200px;
       background-color: #EEE8AA;
       border: 3px solid black;
    }
    
    @media screen and (min-width: 978px) {
    .parawrapnot {
    clear:both;
    margin-bottom: 1.71429rem;
    }
    
    }
    }
    
    .ednotes {
        color: #0000FF;
        font-size: 0.8rem;
        line-height: 1.1rem;
        text-align: justify;
        position: relative;
        left: 16px;
        margin-top: -1.75rem;
        margin-right: 32px;
        margin-bottom: 1.71429rem;
    }
    
    .ednoteslist {
        color: #0000FF;
        font-size: 0.8rem;
        line-height: 1.1rem;
        text-align: justify;
        position: relative;
        left: 50px;
        margin-right: 100px;
        margin-bottom: 1.71429rem;
    }
    
    .edcomments {
        color: #0000FF;
        font-size: 0.9rem;
        line-height: 1.2rem;
        text-align: justify;
        position: relative;
        left: 50px;
        margin-top: -0.75rem;
        margin-right: 100px;
        margin-bottom: 1.71429rem;
    }
    
    .quotes {
      font-size: .9rem;
      line-height: 1.1rem;
      text-align: justify;
      position: relative;
      left: 16px;
      margin-right: 32px;
      margin-bottom: 1.71429rem;
    }
    
    .quotes2 {
      color: #FF0000;
      font-size: .9rem;
      line-height: 1.2rem;
      text-align: justify;
      position: relative;
      left: 40px;
      margin-right: 80px;
      margin-bottom: 1.71429rem;
    }
    
    .quotes3 {
      color: #FF0000;
      font-size: .9rem;
      line-height: 1.2rem;
      text-align: justify;
      position: relative;
      left: 40px;
      margin-right: 80px;
      margin-bottom: 3.4rem;
    }
    
    .entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
        border-radius: none !important;
        box-shadow: none !important;
    }

    Not expecting a detailed analysis – just thought more tech-savvy folk might notice any obvious errors immediately.

    Cheers
    Ross

Viewing 15 replies - 31 through 45 (of 51 total)
  • Thread Starter RossB

    (@rossb)

    Hi Michael, and thanks for your response. Excellent.

    A final question, please. How do I style the footer widgets placed in your Custom Footer Widget? I want the text at the top (“Download Geeks Album” and “Download Orphans album”) to appear as it does with the footer widgets at the moment. ie: all caps, same font and colour, and same spacing between text and the Bandcamp players. Would also like to centre the text, rather than have it left-aligned.

    I’ll leave you in peace after this!

    Cheers!
    Ross

    Hey Ross,

    Again no worries! I really do enjoy helping when I can.

    In the code I gave you previously to put in functions.php, change where it has <h2> to be <h3> instead (all 4 places) and then put the following code in your style.css . . .

    .custom-footer-widget h2 {
    margin-bottom: 1.714285714rem;
    text-transform: uppercase!important;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    font-weight: bold;
    text-transform: uppercase;
    color: #636363;
    text-align: center;
    }

    Let me know if there is anything that still doesn’t match the current widget headers.

    Cheers!

    Michael

    Thread Starter RossB

    (@rossb)

    Michael, did you mean the ‘h2’ in the first line of the code above to be ‘h3’? I assume so, since when it is h2 there is no change to the text font, but when I change to h3, the text font changes to be identical to the standard widget font, as was the aim.

    Anyway, I followed your directions and put the above code into my stylesheet with h2 changed to h3, but there are some problems as follows:

    1. The Bandcamp players now appear in the footer area left aligned, one under the other, rather than side by side as before.

    2. They now appear at the foot of all pages, including the default template pages – I had them not displaying there, intentionally.

    3. The font of the text above the players is now identical to the original widget font (yay!), but the text is centred in the middle of the page (and thus stuck out on its own), not centred relative to the players.

    If you’re fine with modding things to address 1-3 above, most appreciative! In the meantime, I’ve changed back to what I had before, so you can see the intended display (except that if I had my druthers, the text – ‘Download Geeks Album’ and ‘Download Orphans album’ – should be centred over the embedded Bandcamp players, not left-aligned).

    Cheers!
    Ross

    Hey Ross,

    I might be a little confused as to what is going in those footers and what needs to be styled. Possible to put it back on the Home Page so I can take a look at it live and figure out the code for you?

    As for the <h2>, I was actually talking about the code in the functions.php file, but either way will work just fine!

    Cheers!

    Michael

    Thread Starter RossB

    (@rossb)

    OK Michael – have reinstated widgets from First Front Page Widget Area to Footer Widget Area 1, and put your code back into the Stylesheet.

    Re the h2/h3 stuff, I did understand that you were talking about the code in the functions.php file. I guess what I was referring to was that I assumed that whether I had <h2> or <h3> in the functions.php file, your CSS would only work if the same ‘h’ was in the CSS. That is as clear as mud, no doubt! Anyway, the effects can be seen on the site at the moment. I’ll leave it that way until tomorrow (currently 9pm my time), if that’s long enough for you to check it out. THANKS.

    Cheers
    Ross

    Thanks Ross! Makes it much easier to test the code. Add the following to your style.css

    #custom-footer-widget-1 {
    float: left;
    margin: 0 62px;
    }

    and let me know if that is what you were looking for. We will probably have to do some additional css to account for mobile devices but let’s make sure the full size is correct first ??

    Cheers!

    Michael

    Thread Starter RossB

    (@rossb)

    Hi Michael,

    The appearance of the footer widgets is now exactly as I wanted, thanks – when the site is at full size. As you suspected, at reduced size, there are some issues:

    1. The players don’t reduce in size.
    2. The players move one under the other, which of course is fine, but stay centered instead of moving to the left like the text and images on rest of the page above.
    3. There is not enough gap between the bottom of the top player and the ‘Download Orphans album’ text referring to the bottom player.

    4. Aside from whether the site is at full size or reduced, the footer widgets still appear on all pages, including the ‘Default Template’ pages – I would like to ensure they do not display on these pages.

    Amazing support from you. Thanks yet again.

    Cheers
    Ross

    Thread Starter RossB

    (@rossb)

    Michael, I’ll leave the site up with your coding changes for another 24 hours. It looks fine, except when reduced, and then only the footer widgets are affected. So, readers can live with that a while longer!

    Re the Default Template pages displaying the footer widgets when I don’t want them to, if fixing this is complicated maybe this is an instance where I should use that plugin you mentioned?

    Cheers
    Ross

    Hey Ross,

    I am curious, on my version of the twentytwelve theme that I have on my test site I am not seeing any standard footer widget areas as part of the theme? What am I missing?

    Thanks,

    Michael

    Thread Starter RossB

    (@rossb)

    Hi Michael

    The standard footer widget area I was using pre your coding was ‘First Front Page Widget Area’. Came with the Twenty Twelve theme. I shifted the widgets out of there into your Custom Footer Widget 1 area.

    Does that answer your question? If not, I can take a screenshot of my widget page.

    Cheers!
    Ross

    Thanks for the response Ross. But I am getting a bit confused here as to what you actually want to do. I tried reading back through the thread but couldn’t be sure so . . . which pages do you want to have footers on? I added content to the Front Page Widget Areas like you mentioned and they do not show up on any of the other pages . . . so are you only looking to have footer widgets on the Full Width No Sidebar template that you are using as your home page?

    Let me know and I should be able to wrap this up for you ??

    Cheers!

    Michael

    Thread Starter RossB

    (@rossb)

    Hi Michael

    From my end, the content on the Front Page Widget areas does show up on all other pages on my site – that’s the only remaining problem.

    Please note, my home page uses the Default template, not the Full Width No Sidebar template. I don’t want the footer widgets to show up on any page using the Default page template. If you can make it so the Default page doesn’t display the widgets, that’s the final hurdle negotiated.

    Thanks for your amazing persistence!

    Cheers
    Ross

    Ross,

    Let’s go back to the beginning for a second. Your original goal was to be able to use the Front-Page template but have comments on it correct? I am actually curious as to why Christian1012’s suggestion of adding

    <?php comments_template( '', true ); ?>

    to the front-page template is not working on your site. Adding that code to the front-page template on my test site, with my home page set to be a static page produces the results you are looking for. See the test site.

    The process for this, just for clarity, is to open the front-page.php file (found in the twentytwelve theme’s page templates folder) and add the above line of code between the following two lines of code . . .

    <?php get_template_part( 'content', 'page' ); ?>

    and

    <?php endwhile; // end of the loop. ?>

    save the changes and then upload it back to the server overwriting the previous version of the file. Can you try that again and see what happens?

    Thanks!

    Michael

    Thread Starter RossB

    (@rossb)

    Hi Michael. We have a long weekend over this way, and I’ve been offline until now. Sorry for this delay in responding.

    Your original goal was to be able to use the Front-Page template but have comments on it correct?

    Correct.

    I am actually curious as to why Christian1012’s suggestion of adding

    <?php comments_template( ”, true ); ?>

    to the front-page template is not working on your site.

    That code does, indeed, work if I put it between the two lines of code you specify in the FP Template file of the Twenty Twelve parent theme. However, when I copy the FP Template file over to my Child Theme and add the code mod there, there are unwanted effects with the sidebars on pages using the Default template. That is, all the widgets in the sidebar on the pages using the Default template disappear, and in their place the footer widgets appear!

    Before our exchanges in this thread, I had decided to commit the big no-no of making that mod to the parent theme, and had resigned myself to having to keep making it every time there was an update to the Twenty Twelve theme. Of course, I’d much rather do it the right way by modding my Child Theme – I just couldn’t figure out why doing so was messing up my sidebars on the Default templates. If you can, would be terrif!

    Cheers
    Ross

    Hey Ross,

    Mine is completely done through the child theme and works properly, so my first question is when you copied the front-page.php file over to your Child Theme did you make a sub-directory for it called page-templates?
    So your structure would look like . . .

    Child-Theme-Folder
    –screenshot.png(optional)
    –style.css
    –page-templates(folder)
    —-front-page.php(inside the page-templates folder)

    Let me know if this was the way you had it, and if you are going to try and set it up this way, you should remove the code we added to your child theme functions.php (or just delete it if that is the only code in there) and delete the child theme version of footer.php.

    Thanks,

    Michael

Viewing 15 replies - 31 through 45 (of 51 total)
  • The topic ‘Are there any obvious errors in my stylesheet?’ is closed to new replies.