Are there any obvious errors in my stylesheet?

  • RossB

    (@rossb)


    10 years, 8 months ago

    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:      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");

    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("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;
}

@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 - 1 through 15 (of 51 total)
1 2 3 4
  • Moderator t-p

    (@t-p)

    10 years, 8 months ago

    Try validating your style.css using W3C CSS Validation Service

    Thread Starter RossB

    (@rossb)

    10 years, 8 months ago

    Thanks, Tara. I had tried validating, but couldn’t work out how to fix the errors identified. After peering at them, and googling about the types of things picked up, I have concluded that most are minor things that I can’t do much about (eg: the Social Media plugin I’m using, Digg Digg, seems to bring up a lot of errors associated with new coding that is not accepted by current browsers, or something like that).

    There are html errors I know how to change, but I can’t find where in WordPress to change them!

    But there is one CSS error that I am sure I can change, since it is on the Stylesheet. Would someone mind having a look at it in the context of the full stylesheet posted above? I am not sure what’s wrong. I suspect there are too many curly brackets, but some close off media queries above, and I’m not sure which should go and which should stay – if indeed, one or more of these brackets is the problem. Anyway, the code I’m referring to is:

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

}
}

    Oh, and my site URL is http://www.perthpunk.com.
    Cheers
    Ross

    eGriffinWebDesign

    (@egriffinwebdesign)

    10 years, 8 months ago

    Hey Ross,

    In looking at your CSS it looks like you are correct about the curly brackets. To my eye the 4th one in the snippet above needs to go at the very end of the stylesheet, assuming that all of that code is supposed to apply to screen widths of 978px or higher. Not sure what you use to write your CSS, but I definitely recommend Notepad++ (it is free). In addition to not adding the extra spacing that traditional text editors sometimes do, it provides a wealth of visual information about your code that allows you to see things much more clearly. For instance, if you put your cursor right after a curly bracket, it will highlight the matching curly bracket in red so you can see if the correct code is contained within. If it isn’t you can move it where it needs to be and repeat to double-check.

    Hope that helps!

    Michael

    eGriffinWebDesign

    (@egriffinwebdesign)

    10 years, 8 months ago

    Hey Ross,

    Following my own advice I just pasted your code into Notepad++ and noticed a couple of things. First, I am probably wrong in my assumption that the one curly bracket needs to be moved to the end. If you could indicate which portions of code go with which media queries I can help you pinpoint the problem. Second, there are two media queries for min-width:600px. Even if all of that does apply to that media query, be sure to put it all in one to minimize your css. And finally, your order is reversed, at least to my understanding. You have the min-width:600px media query before the min-width:978px media query. Which means that if there are any css elements that are defined in both queries, the 978px will take precedence because it comes last. I always go from highest to lowest, so that the styles cascade down so to speak.

    Again, hope some of this helps!

    Michael

    Thread Starter RossB

    (@rossb)

    10 years, 8 months ago

    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

    eGriffinWebDesign

    (@egriffinwebdesign)

    10 years, 8 months ago

    Hey Ross,

    No worries. We all started learning somewhere, and there were many people that helped me along the way as well.

    Regarding Notepad++, if you are editing your stylesheet in the WordPress dashboard then yes you would do a copy and paste. One important step is that when you are typing your code into Notepad++ blank document, you will need to save it as a .css document before the “helpful hints” will start showing. So you enter your .css code, save the document as <filename>.css, and then the color coding will show up as Notepad++ now knows to interpret the data as actual .css coding. This is one reason that I prefer to create and edit my stylesheets in Notepad++ and then upload them directly back to the server (via Filezilla) rather than editing them in the WordPress dashboard. I you need help setting up ftp access to your server I will be happy to help you with that as well if you want to try that route.

    Back to your current problem though, can you give me a link to your site if it is live? It would be hard for me to guess where you want some of this .css without seeing the site. Below is my best initial guess, but it could be completely wrong, so be sure to backup your currently style.css before replacing it with this code.

    Let me know how close this is or isn’t 😉

    /*
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");

/* 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 );
}

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

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

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

@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;}
}
    Thread Starter RossB

    (@rossb)

    10 years, 7 months ago

    Hi Michael

    Bit delayed getting back to you due to some time-draining distractions. Sorry about that – and thanks a lot for your ongoing help.

    My site URL is http://www.perthpunk.com

    I know how to FTP files to my server via Filezilla, but ta for the offer of assistance.

    Re creating and editing your stylesheets in Notepad++, then FTPing them directly back to the server with Filezilla rather than editing the original stylesheet in the WordPress dashboard:

    Would you mind clarifying this a little, pls? I have always assumed that the way WP was set up required all css coding and editing to be done on the Stylesheet accessible via the Dashboard. If using Notepad++ instead, do you have to delete the original WP Stylesheet so WP knows which css document to apply? If so, I assume you’d name the Notepad++ document ‘style.css’ – ie: using the same name as the WP original which is now deleted?

    I’m just about to look through your replacement code to compare your changes with my messy original version! Think I’ll wait until you get back, now that you have my site URL, before I paste your code to my Stylesheet – terrified of breaking something, although I have no doubt your code is fine. Just paranoid about technicals I don’t understand.

    Thanks again for your terrific assistance.

    Cheers
    Ross

    eGriffinWebDesign

    (@egriffinwebdesign)

    10 years, 7 months ago

    Hey Ross,

    Happy to help! First thing, in Filezilla you should go to Edit>Settings>File Editing and check Use Custom Editor under the Default Editor section and Browse to wherever the Notepad++ application file is on your computer. Mine is at “C:\Program Files (x86)\Notepad++\notepad++.exe” if that helps you find it. Yours should be somewhere similar. This will allow you to right click on any .php, .html, .css, .js, etc. files and choose Edit from the menu to quickly view and edit them with Notepad++.

    Accessing style.css via Notepad++ is no different than accessing it via the Dashboard. Simply 2 different ways of looking at the same thing. Actually as a security best practice it is recommended that you turn off file editing via the WordPress dashboard, but that is another topic – LOL! You will want to connect to your server via Filezilla and open up the style.css in your Child theme’s folder. Since you are opening an existing .css file, Notepad++ will recognize it as such immediately and you are good to start editing. When you are done simply close the file. Notepad++ will prompt you to save, and then when you go back to the Filezilla screen it will prompt you to upload the file back to the server. The other advantage of doing it this way is that before you start editing the file, you can download a copy of the current working file to your hard drive. This way, if any of your changes really mess something up, you just upload the good copy back to the server, overwriting your edited copy and everything is back to the way it was in seconds.

    It is tough for me to tell which code should be where without knowing what elements you are trying to change, and when they should change. Could you give me some specifics on your current site and I can recommend the .css code modifications? I will be available for about 3 hours from the time I post this today, so if you can do some testing in that time period I will be here to help. The code below does not contain very much in the responsive sections, so you could even comment that out temporarily and see how it affects the site and pinpoint what needs to happen at what sizes. Also, I noticed another extra curly bracket in the code that I pasted to you above, so I have included another version below that I believe is 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");

/* 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 );
}

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

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

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

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

    Last thing for now, I noticed that you are implementing your CSS in reverse order from what I am used to, which seems counter-intuitive to me. I am used to having the full screen CSS, followed by various sized media queries using primarily max-width, but I see that you are using min-width instead. Not saying that is wrong, I have not seen it done that way before however. Usually the only time I see solo min-width media queries is as the first media query to correct an oddball style issue. Just throwing my 2 cents out there in case it helps.

    Cheers!

    Michael

    Thread Starter RossB

    (@rossb)

    10 years, 7 months ago

    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

    eGriffinWebDesign

    (@egriffinwebdesign)

    10 years, 7 months ago

    Hey Ross,

    Give me just a few and I will be able to give you some better advice. I have some extra time today that will allow me to take a closer look at your site and your css. My quick first suggestion for you to try was based largely on the answer to Question 2 above which is Yes, media queries should generally be at the end of a stylesheet. The reason for this is the cascading nature of css. The main styles will be at the top and be read first. Elements lower in the stylesheet will override those higher up, so more specific elements will generally be found lower. So the main styles first, biggest width media query second, next biggest third, etc. The advantage of this is that some of the styles in your biggest width media query will apply to smaller ones as well, so you will not have to repeat them there (they will cascade down). You will only have to add css that is specific to the next sized media query, and on down the line.

    Hopefully that makes sense. An excellent source to learn more about CSS is http://www.w3schools.com/css/css_intro.asp. I go there frequently when I get stuck on something.

    As for your final question, by reducible I am assuming that you mean responsive (I don’t care what you call it I just want to make sure we are talking about the same thing). The theme is already responsive, and regardless of how many people might be reading it on a smaller device, it is a good best practice to give them the best experience you can along with your desktop and laptop users. Personally I don’t think your site looks “boring” on my smart phone. It is easy to read and access the most important asset on your website, the content. As for your friend’s older monitor, remember that CSS targets the screen resolution not the actual size of the monitor, so if your friend’s monitor is less than 800 x 600 than yes he may be seeing one of the responsive versions of the website. But the fact is that you can only account for so many possible devices and you have to decide what the majority of your readers will be viewing your site on. CSS media queries should be used to make adjustments to your site at whatever points break it, in order to provide the best possible experience to your users. So if something gets broken at 1280px or below, you should add a media query to address that issue and make it usable for visitors that might view it on devices of that size. I might have some suggestions after looking at your site at various sizes and seeing how the code affects it.

    I will be back soon!

    Cheers!

    Michael

    eGriffinWebDesign

    (@egriffinwebdesign)

    10 years, 7 months ago

    Hey Ross,

    Have had a little more time to review this, and again it is a little hard for me to say with any accuracy how you should style your pages without having the actual files to work with live on a server. Throw in the fact that I do not normally work with the 2012 theme or any of the built in themes, and they are using minimal min-width media queries (whereas I am used to working with max-width media queries that cascade down) and it makes it a bit tougher for me.

    Here are the general rules as I see them though. Since the parent theme codes it this way, it does appear that the min-width rules appear to need to be in reverse order from what I am used to, so you would actually go smallest to largest (i.e. min-width: 600px and then min-width: 960px). You have your general css at the top, then anything pertaining to screen sizes of 600px or larger, followed by anything pertaining to 960px or larger that needs to override anything in the previous media query (600px or larger). I have taken your original stylesheet that you posted, and added some comments to try and explain which code affects what. I believe the only change that I made was combining the 2 min-width:600px media queries that you had into a single media query, and removing any extraneous curly brackets. I would try this stylesheet on your server and then let me know what looks wrong to you and then I will be happy to help you figure out how to correct it. Hopefully this way you will get a better understanding of how this all works and it will benefit you in the future!

    Cheers!

    Michael

    [Excessive CSS moderated. All that is usually needed is a link to a site. If that is not appropriate, please use a pastebin.]

    Thread Starter RossB

    (@rossb)

    10 years, 7 months ago

    Damn – didn’t get back before your CSS was moderated out of existence. Sorry, Michael.

    What’s pastebin? Is that the effect attained by enclosing code using the key above the TAB key on a keyboard (as above in this thread)?

    Anyway, huge thanks for your last two posts above, Michael. You’ve really cleared up some stuff I was grappling with. And yes I did mean ‘responsive’ rather than ‘reducible’. I misremembered the terminology.

    I received your code that was moderated in an email notification, but it’s been messed up in the process. I’ll go through it and compare with your code above, and see if I can figure out how it appeared here originally, in your post above. Then I’ll paste it to my Stylesheet and see how things look. Back soon.

    Cheers
    Ross

    Thread Starter RossB

    (@rossb)

    10 years, 7 months ago

    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

    Thread Starter RossB

    (@rossb)

    10 years, 7 months ago

    OK, Michael, took the plunge and pasted the code above to my Stylesheet.

    After an initial glitch that I identified and fixed up, the appearance of the site looks fine. No difference from before – at least, not that I’ve picked up yet.

    Next step is to check the effect of re-sizing the pages down. I’ll do that as soon as I can squeeze in the time (next few hours), and report back.

    Cheers
    Ross

    eGriffinWebDesign

    (@egriffinwebdesign)

    10 years, 7 months ago

    Excellent Ross! I should be around most of the day, so if you run into any problems post them here and I will do what I can to help. If you do post, be sure to post what exactly it is that you are trying to change and the code you are using.

    Cheers!

    Michael

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