Five noob questions (part 1)

Thank you! I see.. But at the same time I see sites that changed that color somehow. I feel that my plugin Fourteen Colors affecting the color of author. I just went to Dashboard -> Appearance -> Customize -> Colors -> “Accent color” and changed green to a random yellow color. Now I see that author color changed to yellowish.

yellow…

I’ll try to deactivate this plugin. Let’s see what happens…

I forgot to answer your question regarding the !important clause. Unfortunately, I see it used mostly by beginning developers who do not understand CSS specificity. !important pretty much adds so much weight to the rule that the property value will almost always be used. However, it is considered bad style to use !important unless it is absolutely necessary. It makes it more difficult to override the property with another rule. The only time I use !important is if I’m trying to override an inline style (using !important is the only way to override an inline style), or if there’s an existing use of !important that I’m trying to override. In just about every case, you should be able to override an existing rule by either using an identical selector, or tweaking the selector to add more weight (selectivity) to it.

I didn’t see where inline: -1 was being used.

I see “inline: -1” in the “Rules” section (right side of Inspect Element window).

So if open Firefox and you click on my name in the comments section (where I left my comment “test”) and open Inspector (Inspect Element) then you will see this in the Rules section:

Rules

If you uncheck the checkbox in front of “color” then you will see that author name becomes blue like it should be:

blue author name

And you can see “inline” on the right. When I click on “inline” I see this”

inline

I even don’t understand where this style “.publisher-anchor-color a” is located…

I wonder how to add a separators between posts (regardless if they have thumbnails or not)?

I used this code:

.hentry, .no-results {
    border-bottom: 1px solid #DDDDDD;
}

But it only added a horizontal line between post and comments (inside post). And on my home page my 2 posts are not separated, so they look like 1 post. I mean that I need a separator after “Continue reading”.

Ah, OK, I was using Chrome DevTools, which doesn’t display inline in the right pane. That particular inline means the CSS rules are in the HTML of the page itself and not stored inside an external file. As you discovered, if you click on any of the links in that right pane (like inline, it will take you to the Style Editor pane, where you will see a list of the external style sheets, as well as the inline sections (it will say “inline style sheet #n”) on the left. This allows you to see where the CSS rule is stored. Click on the Inspector menu item at the top to get back to the code pane.

Notice, though, than when you click on the inline link for .publisher-anchor-color a, it displays the rule for .recentcomments a. I think Firebug is mistaken. What I think Disqus does is to create that CSS rule using JavaScript when the page loads, which is why Chrome DevTools doesn’t display a link for it, it doesn’t really exist in an external file or even an inline stylesheet. What I think is happening is that the JavaScript is taking the properties for the default a element and using that to create the rule for .publisher-anchor-color a. I experimented with that by creating this rule in my test site:

a {
   color: #f00;   /* red */
}

And it changed the Disqus links (the author name and the colored bar under the number of comments), so try adding that to the end of your child theme’s style.css file to see if it makes the same change to your Disqus comments.

I wonder how to add a separators between posts (regardless if they have thumbnails or not)?

The problem is due to this rule:

.full-width.home .site-content .hentry.has-post-thumbnail {
   margin-top: -72px;
}

What happens is that all of the .hentry elements get shifted up by 72px, which causes each post to overlap the post above it, which covers up the bottom border. Here are two possible solutions:
1) override the above rule by copying it into your child theme style.css, but set margin-top to 0 so there’s no overlap.
2) Set the border-top property instead of the border-bottom property:

.list-view .site-content .hentry,
.list-view .site-content .hentry.has-post-thumbnail {
    border-top: 1px solid #DDDDDD;
}

Thank you!

I didn’t have time to check this code, so let me try it now.

It worked! Thank you! When I added a style for “a” then color changed. So as I just tested this rule also changed the color of links. Ok, no problem.

And changing margin-top to 0px worked too, but it only moved a post with thumbnail lower, so my post without thumbnail now has tags and a separator on the bottom. Though I completely don’t understand what I did. I mean I don’t understand what does it mean:

.full-width.home .site-content .hentry.has-post-thumbnail

So I think that I’m closer to a “production” version, though I have a list of things that I need to change, before start working with my blog. I will post a list this evening.

Hmm.. This PAGE gave me some explanation about “.class1.class2” and “.class1 .class2”. So the first style is for elements with 2 classes: class1 and class2 and the second style is for element with class2 that is a direct child of class1.

I guess that this code

.full-width.home .site-content .hentry.has-post-thumbnail

Means that:

Some elements with 2 classes (.hentry and .has-post-thumbnail) which are children of an element with 1 class (.site-content) which is a child of an element with 2 classes (.full-width and .home).

But the problem is that I don’t understand all this classes in style.css. I wonder where can I get an explanation regarding what each class means and what is a purpose of each class. I just scrolled through Twenty Fourteen style.css and it’s huge and not clear.

Here is a list of changes that I need to make:

<li>test1</li>
<li>test2</li>

This PAGE gave me some explanation about “.class1.class2” and “.class1 .class2”. So the first style is for elements with 2 classes: class1 and class2 and the second style is for element with class2 that is a direct child of class1.

Close. The explanation for the first selector, .class1.class2 is correct, it refers to an object that has both class1 and class2 assigned to it. The second selector, though, means any object which has a class of class2 that is a descendant of class1, not only direct child. So in these situations:

<div id="level_1" class="class1">
   <div id="level_2" class="class2">
      <div id="level_3">
...
<div id="level_1" class="class1">
   <div id="level_2">
      <div id="level_3" class="class2">

level_2 would be considered a direct child of level_1 because it is in the next nested level. level_3 is an ancestor of level_1, but not a direct child because it is another level of nesting deeper. So .class1 .class2 would affect level_2 DIV in the first scenario, and it would affect level_3 in the second scenario, even though level_3 isn’t a direct child.

Suppose you had this scenario:

<div id="menu">
   <ul>
      <li>Menu Item 1</li>
         <ul>
            <li>Menu Item 1a</li>
            <li>Menu Item 2a</li>
...

This rule:

#menu ul {
   background-color: red;
}

would set the background color of both ul elements to red because each ul element is a descendant of the #menu container.

This rule:

#menu > ul {
   background-color: red;
}

Would set the background color of just the first ul element to red, because the > operator means to target just the direct ancestor.

There’s a nice guide to different selectors here.

I guess that this code

.full-width.home .site-content .hentry.has-post-thumbnail

Means that:

Some elements with 2 classes (.hentry and .has-post-thumbnail) which are children of an element with 1 class (.site-content) which is a child of an element with 2 classes (.full-width and .home).

Correct.

I wonder where can I get an explanation regarding what each class means and what is a purpose of each class.

There is no standard convention among different web sites as far as what IDs or classes to assign to different web elements. With WordPress sites, some elements will have a standard class name, but it’s up to the theme developer as to whether or not to call the correct functions to output them. For example, theme developers should be calling the post_class() function to assign different classes to a post depending upon the context in which the post is being displayed. Developers should also be calling body_class() to assign different classes to the body element so that CSS rules can be targeted to specific pages. The class entry-title should be assigned to post & page titles. Most themes assign site-title to the site title, but others do not. It just depends on the theme, so CSS which works for one theme will often not work with another.

Here is a list of changes that I need to make:

Somehow your list of changes got cut off.

CrouchingBruin

Thank you for your help!

I tried to edit my post containing list, but after couple minutes I got a message that “it’s too late to edit”. So my last post just destroyed this thread.

I wonder how can it be fixed? I really don’t see any option here in Support section to report a bug.

…

Oh, I just found “trac” servive. Let’s see how it works. Next time I will manually create a list using text, but not list tags…

No, don’t use TRAC for that.

Also please don’t use <li> tags without an <ol> or <ul> around them. It’s bad HTML to start with.

Great! Thank you Mika!

So I will post my list soon. With screenshots.

I grouped all TODO items into 4 groups:

1) Unreadable fonts. On the pic below you can see what I mean. Simply, I need to make text fonts same as on Autoblog.com. As you can see on that site fonts are clear, readable and regular size. In my blog fonts look different in Firefox and Chrome, plus in Chrome fonts are TOO smooth and in Firefox are sharp. Plus size is different. And I think type too.

PIC 1

2) Post preview structure. I need to change structure of all posts previews, so that all posts previews in my blog should be created with a new structure. I described that structure in a pic below.

PIC 2

3) Post structure. Same thing as with post previews.

PIC 3

4) Slow comments. I noticed that either Disqus is SLOW or my hosting is slow, but when I add a new comment then the number of comments stays the same for a LONG time. A attached a pic that shows 4 comments in Disqus frame and 3 comments on top.

PIC 4

When you open each link you need to click on a pic to magnify it.

I understand that all my TODO items may take long time, but I need to do that.