RossB

Just tried out your code, Michael – happy to report that it works brilliantly!

Cheers!
Ross

Hi Michael. The media query values currently in the coding were determined when I had the pics layout less simple than now (eg: one aligned left, with text wrapping right, and below another pic aligned right, with text wrapping left.) It looked good, but in the end I opted for the simple all-left-aligned look you see now. I suspect the current media query values (ie: widths) are now unnecessary.

Just one thing I would like to know how to do. When the site is reduced a lot – say, to something a bit wider than cellphone dimensions – the text wrapping around images is forced into a narrow column, and gets hard to read. Is this the sort of thing that can be altered with media queries? eg: Making the text stop wrapping at a certain width, so that it moves below the image instead of being forced into a narrow column?

Hope my description is intelligible.

Also, there must be some way of measuring the width of the site in pixels. Curious to know how you do this.

Sincerely, Michael, thanks a lot for all your help. Above and beyond, I must say.

Big cheers!
Ross

Michael, I think I’ve restored your code that was messed up in my notification email.

Hope I’m not breaking any WP Support rules by pasting it. If so, I guess it will be moderated. Anyway, here it is. Could you pls advise whether I have got it correct?

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme
Author:         XXXXYYYY
Author URI:     http://perthpunk.com
Template:       twentytwelve
Version:        0.1.0
*/

@import url("../twentytwelve/style.css");
/*ITEMS BELOW WILL OVERRIDE ANYTHING ABOVE THEM AND THEREFORE SHOULD BE 

MOVED TO THE TOP*/
.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;
}

/*EVERYTHING IN THIS SECTION SHOULD APPLY TO THE SITE AT ANY SIZE - CAN/WILL 

BE OVER WRITTEN BY THE MEDIA QUERIES BELOW*/
/* 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 );
}

/*END OF SECTION THAT SHOULD APPLY TO THE SITE AT ANY SIZE - CAN/WILL BE 

OVER WRITTEN BY THE MEDIA QUERIES BELOW*/

/*SECTION THAT SHOULD APPLY TO THE SITE AT SCREEN SIZES OF 600 PX OR LARGER 

(INCLUDING DESKTOP AND LAPTOP SCREENS - CAN/WILL BE OVER WRITTEN BY THE 

MEDIA QUERIES BELOW - YOU APPEARED TO HAVE 2 SECTIONS FOR THE SAME MEDIA 

QUERY - I HAVE COMBINED THEM INTO ONE SECTION*/

@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;
}

.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("http://www.perthpunk.com/wp-

content/uploads/2013/07/Orphans-background-550.jpg") !important;
}

body.page-id-631 {
 background: url("http://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("http://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;
}
}

/*END OF SECTION THAT SHOULD APPLY TO THE SITE AT SCREEN SIZES OF 600 PX OR 

LARGER - CAN/WILL BE OVER WRITTEN BY THE MEDIA QUERIES BELOW - YOU APPEARED 

TO HAVE 2 SECTIONS FOR THE SAME MEDIA QUERY - I HAVE COMBINED THEM INTO ONE 

SECTION*/

/*SECTION THAT SHOULD APPLY TO THE SITE AT SCREEN SIZES OF 978 PX OR LARGER 

- CAN/WILL BE OVERWRITTEN BY ANYTHING ADDED BELOW IT*/

@media screen and (min-width: 978px) {
.parawrapnot {
clear:both;
margin-bottom: 1.71429rem;
}
}

/*
END OF SECTION THAT SHOULD APPLY TO THE SITE AT SCREEN SIZES OF 978 PX OR 

LARGER - CAN/WILL BE OVER WRITTEN BY ANYTHING ADDED BELOW IT*/

Cheers!
Ross

Very clear explanation, Michael. I had no idea Notepad++ could be used like this with Filezilla, and I see now that when making coding changes in this way the changes are actually, in effect, being made to the WP stylesheet. I also didn’t realise there was any sort of security issue with having file editing enabled in the WP Dashboard. I’ll have to familiarise myself with Notepad++ and start doing the css coding this way. A bit of a challenge, I’m anticipating, but with your clear directions I should be able to manage. THANK YOU.

I have carefully studied your changes to the stylesheet coding layout. I am about to copy and paste them to my Stylesheet (after making a copy of my original, just in case). However, I have two questions.

1. I note that you have removed the media query code from above the following line:

.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
        display: inline-block !important;
        text-align: left;
	margin-left: 40px;
        width: 100%;
    }

Just wondering why? I’m not questioning your coding at all (good lawd no…why would I?) – just trying to understand.

2. As a general layout rule, should media query coding be at the end of the stylesheet?

And finally, a general query related to reducible smartphone-adaptable themes like Twenty Twelve:
In the case of a wordy site like this one of mine, do you think it might be better not to have it reducible? I’m thinking that not many people would try to read a site like this on a smartphone. I have had a complaint from a friend that the site looks boring and plain, and have determined the reason to be that he is viewing it on an old 15 inch monitor. Thus, he is not seeing the backgrounds. I noted similar on my old 17inch monitor. I designed the site for a 22 inch monitor and it looks good on mine. Do you think there is a case for having the backgrounds fixed, so the site looks the same in any sized monitor? I know that would mean lots of scrolling, but is that the only disadvantage, do you think?

Cheers!
Ross

Michael, thanks very much for your responses.

My relative coding ignorance is hampering me from properly following your observations in your second post. And I don’t know which portions of code go with which media queries. I may have understood for a short while when I was first given the advice to set up the code how you see it, but I have forgotten. If I’d had a better understanding of the basics in the first place, I probably could have re-traced my steps and recalled.

Would you mind setting out the code how you think it should go? I could try it, then see what effect it has on the way the different site pages appear when re-sized up and down?

I’ll definitely take your advice and try out Notepad++. May I just ask how you copy the code you write using Notepad++ across to the WP Stylesheet? Do you simply copy and paste? I’m assuming so, and that the coding done in Notepad++ would retain its format when pasted.

Cheers!
Ross

Thanks for that advice, Seacoast WD Member. I haven’t appplied it yet, because I need to grab myself enough time to do it all in one session. Hopefully, this weekend.

I did my site development on a subdomain (live) and when I thought it was ready, migrated it across to its own domain. These current templates issues came up after that, during what I would call the post-launch ‘tweak’ phase.

I did try designing another site locally using MS WebMatrix, but when it came time to go ‘live’ had all sorts of problems when I uploaded the site from my computer to the chosen domain. My host tech support spent ages troubleshooting all the things that went wrong in the migration. They subsequently told me to ditch WebMatrix, as it had conflicts with their servers (or something like that), and that it was better to use a sub-domain for development (as I did this time).

My host support are not WP experts, though, and they pointed the finger at WebMatrix specifically. So, I’m curious: what is the setup you recommend for designing locally?

I have often consulted the Codex, BTW, but find that I struggle to understand the directions in a lot of instances – due to my technical ignorance, no doubt. But I’ll check out the Codex Troubleshooting steps, as you advise.

Cheers
Ross

OK, just did some more experimentation.

I deleted the parent front-page.php and replaced it with a new one from a fresh copy of 2012 (downloaded on to my computer, as per WPYogi’s recommendation).

I then uploaded this new front-page.php file to my Child Theme, and made the ‘get comments’ code mod. Same result:
1. footer widgets replaced the sidebar widgets on the pages displaying sidebars
2. The Comments display disappeared from all pages using the FP Template.

I then made the ‘get comments’ code mod on the parent front-page.php – no change. That is, results 1 and 2 above remained unchanged.

I then deleted the front-page.php file from my Child Theme: voila!

Sidebar and Footer widgets restored to correct place, and Comments displayed correctly on pages using FP Template.

So, it seems that the ‘get comments’ code mod only works properly on the parent front-page.php – and then, only when the front-page.php file has been deleted from the Child Theme.

Just thought I’d document these experiments in the hope that they might provide some clue as to what is going on.

Cheers
Ross

Seacoast WD Member,

I don’t have any templates in the Child Theme. It must be using those from the parent. As mentioned, as soon as I copy the FP Template file over from the parent to the child, this sidebar problem occurs, where the footer widgets replace those in the sidebar. So, I then delete it and the sidebar returns to normal.

I have no doubt your view is correct that it’s a coding issue with the 2012 CT – I just don’t know how to begin identifying it, let alone correcting whatever is wrong!

This might be a clue. When I tried to copy the parent FP Template from parent to child from inside my Cpanel, it wouldn’t let me do it. I got some notification that I was copying to the same theme (the parent), even though I certainly had the child theme target correct. I tried this operation several times, checked and double-checked that I had the target destination right, and kept getting the same notification.

The only way I could copy the parent template over to the child theme was to first cut and paste the contents to notepad and save it to my desktop as a .php file with the same name as in the parent theme, then to upload it from the desktop to the child theme.

Dunno if any of that gives a clue as to what might be happening?

Cheers
Ross