WordPress.org

Forums

Twenty Fourteen
Five noob questions (part 1) (31 posts)

  1. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    Hi guys!

    Here is my blog which is currently in test mode:
    sergeyrozhdestvenskiy.com

    I recently decided to go back to default theme and now I'm using Twenty Fourteen. So I have several questions regarding modifying it and fixing some issues:

    1) I activated Disqus plugin, but now when I go inside a post I see that comment area is not looking compact, but it is spread across the the usable area. I wonder how can I make it smaller and fit it into that 641px section. Or maybe there is a better comment system? Actually I see that discuss slowly updates the number of comments. Maybe it's just my slow hosting.

    2) Where(what file and line) can I change color of "Continue reading"? I installed plugin Fourteen Colors 1.1, but it doesn't allow to change color of "Continue reading" without changing all accent colors. Also it made my site title and tagline white and I can't change that white color.

    3) How can I completely remove all that oblique (diagonal) lines around images? I just need a solid color, because that lines look ugly. I tried to search it in Google, but only found couple patches which purpose I don't understand.

    4) How (what file and line) can I add a separator between posts even when both posts contain featured image? I need at list a tiny horizontal line to automatically separate all posts.

    5) How can I switch the fonts? The problem is that in Firefox and in Chrome fonts look either sharp and ugly (Firefox) of way too smooth (Chrome). I prefer fonts (size and style) on Autoblog.com where in Firefox and Chrome fonts are the same and readable.

    Thank you guys!

  2. CrouchingBruin
    Member
    Posted 1 year ago #

    All of the modifications that you've listed can be done using CSS. Since you say that you're a noob (although I don't know if you're a total noob when it comes to web design, or just a WP noob), here is what I suggest:

    1. Learn some basic HTML and CSS. You can find good, basic tutorials here.
    2. Learn how to use a web debugging tool like Firebug (a free extension for Firefox) or chrome developer tools (comes built-in with Chrome). I prefer Chrome DevTools, but both work very well. What these tools will allow you to do is see the structure of your site, and what CSS rules are currently affecting different elements on a page.
    3. Either create a child theme or install a CSS plugin like JetPack or Custom CSS Manager. You never want to edit the theme's files directly; if the theme gets updated because of feature enhancements, bug fixes, or security patches, then your changes will be lost. If you are just making CSS changes, then a plugin will suffice. If you're thinking about making changes which affect the actual content that is output (i.e., changes which require code modifications), then you should create a child theme.

    So once you master the first two items, and then either create a child theme or install a CSS plugin to hold your new CSS, it's very simple to make the changes you need. For example, by examining the Disqus section at the bottom of a post, you'll see that the section is contained within a DIV with an ID of disqus_thread, so all you need to do to add some spacing on the left & right sides (so it's not butt-up against the edges of the content area), is to add this CSS rule to either your child theme's style.css file, or to your custom CSS plugin:

    #disqus_thread {
       margin: 0 20px;
    }

    Same with the Continue reading links. If you inspect them, they are all anchor tags (i.e., link tags) with a class of more-link, so to change the color to red (for example), you can add a rule like this:

    a.more-link {
       color: #f00;
    }

    Once you master the above, there's virtually nothing you can't change, including the font family.

  3. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    So I decided to use Chrome dev tools to inspect elements. I also installed Filezilla for accessing FTP and Notepad++. After that I created and activated child theme.

    But unfortunately editing Style.css of my child theme didn't give me any results. Here is my child style.css:

    /*
     Theme Name:     Twenty Fourteen Child Theme
     Theme URI:      -
     Description:    Twenty Fourteen Child Theme
     Author:         -
     Author URI:     -
     Template:       twentyfourteen
     Version:        1.0.0
    */
    
    @import url("../twentyfourteen/style.css");
    
    /* =Theme customization starts here
    ------------------------------------------------------- */
    
    #disqus_thread {
       margin: 0 100px;
    }
    
    a.more-link {
       color: #f00;
    }
  4. CrouchingBruin
    Member
    Posted 1 year ago #

    Did you clear your browser cache? Hit Ctrl-F5 to refresh the page. I see the changes. The "Continue reading" links are red, and when you go to the individual post, the Disqus comments have spacing on either side. If you inspect one of the "Continue reading" links using DevTools, you should see the child theme's CSS rule at the top of the right pane.

  5. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    I see changes, but man it took 30+ minutes to update all this information after I uploaded my style.css file. Maybe it's my hosting which is slow, but I don't know how to explain this.

  6. CrouchingBruin
    Member
    Posted 1 year ago #

    As I said earlier, maybe it's your browser's cache. Try hitting Ctrl-F5 to refresh the screen after you've saved or uploaded your changes. I don't see a cache plugin installed on your site, so that's not a problem.

  7. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    I think that GoDaddy so called "WordPress Hosting" is not a good idea. Currently I have to "Flush Cache" in WordPress Dashboard every time I make changes and also Filezilla has so many failed attempts to connect to my ftp ("Connection time out. Couldn't connect to server"). Sometimes it connects quickly, but currently I see attempt #17 to connect to ftp. And what I'm trying to do is to upload the updated style.css. That's disgusting...

    So I changed "Continue reading" color to grey and tried to change the color of 2 more classes.

    Here is my current style.css:

    #disqus_thread {
       margin: 0 100px;
    }
    
    a.more-link {
       color: blue;
       font-weight: bold;
    }
    
    .post-message-container {
       color: #f00;
       font-weight: bold;
    }
    
    .author {
       color: blue;
    }

    I'm trying to change Continue Reading to blue and make it bold. Also I'm trying to change a color of disqus comment text (I have only 1 comment "Test") and also to change author from green to blue.

  8. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    Yup, I tried to press Ctrl+F5 several times and did Flush Cache several times. Currently I'm uploading style.css mentioned above.

  9. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    Just uploaded that style.css. So now Continue reading is blue and bold. Alright. But author name and comment itself didnt' change.

    Since I'm logged into Dashboard in Chrome then by some reason I still see the old style in Chrome where Continue Reading was green. Hmm...

    So now I started using Firefox "Inspect Element" feature which works better for me.

    And as I wrote before - after I did Ctrl+F5 2 times then nothing happened. I had to click on Flush Cache 2 times and only after that Continue reading became blue and bold.

  10. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    Maybe I did a mistake by trying to alter "Author" class.

    Unfortunately, I don't understand how to affect this in CSS:

    <a data-role="username" data-user="81973651" data-action="profile" href="#">
    
        Sergey Rozhdestvenskiy
    
    </a>

    This is what I see in Inspect Element. I thought that "a" tag is for hyperlinks, but what I see is "data-role" tag which is equal to "username". And "data-role" is a class not? Same thing about "username".

    So in order to change color of Sergey Rozhdestvenskiy I have to change style of "data-role" or "username"?

  11. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    Oh, I didn't pay attention to right side of Instect Element window!

    I see that author color is affected by this style:

    .publisher-anchor-color a {
        color: #24890D !important;
    }
  12. CrouchingBruin
    Member
    Posted 1 year ago #

    I think if you install WordPress through GoDaddy, it automatically installs a cache plugin. Take a look at your installed plugins to see if one is there, and then deactivate it. You can activate it once you've finished modifying your site. I have several WP sites hosted on GoDaddy, but I installed WP manually instead of through GoDaddy.

    Also, you can edit the style.css file directly if you wish by going to Appearance > Editor from the dashboard. Most developers (like myself) like doing the editing on their computers and uploading through FTP, but if you want to do try something quick, you can skip the FTP step and work directly from the dashboard. The nice thing about editing on your computer is that you can use a code editor, which often will have features like automatic indentation, color coding, and missing bracket/parenthesis detection.

    That's very strange, I don't see the same rule. I see this, which turns the author link green:

    .publisher-anchor-color a {
    color: rgb(36, 137, 13);
    }
  13. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    Yup, editors are much better than Dashboard editor.

    So, here is what I see when I use Inspect Element in Firefox:

    LINK

    On the right side I see that color is still green though I uploaded style.css with different color. I used this code to change a color:

    .publisher-anchor-color a {
        color: #305392 !important;
    }

    But it is still green. Though I don't understand what does it mean "!important" and "inline:-1" (you can see it on my pic).

  14. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    I give up on changing color of author. It seems that my style sheet doesn't override the original style. Or maybe I'm doing something wrong.

    Just curious, why post titles don't change color on main page, but only within posts?

    I added this code to style.css:

    .entry-title {
       color: red;
       font-weight: bold;
    }

    And as you can see the post titles are now bold on main page, but inside posts the titles are bold and red.

  15. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    Oh, I just added another code and it works:

    .entry-title a {
       color: red;
       font-weight: bold;
    }
  16. CrouchingBruin
    Member
    Posted 1 year ago #

    I give up on changing color of author. It seems that my style sheet doesn't override the original style. Or maybe I'm doing something wrong.

    I took a closer look and saw that the Disqus comments are embedded in an element called an iframe. You can't change the CSS of the content of an iframe if the contents are from another site, which is the case of the Disqus comments (the contents come from disqus.com).

    Sounds like you are learning lots, congratulations.

  17. Rozhdestvenskiy
    Member
    Posted 1 year ago #

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

  18. CrouchingBruin
    Member
    Posted 1 year ago #

    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.

  19. Rozhdestvenskiy
    Member
    Posted 1 year ago #

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

  20. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    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".

  21. CrouchingBruin
    Member
    Posted 1 year ago #

    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;
    }
  22. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    Thank you!

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

  23. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    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

  24. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    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.

  25. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    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.

  26. Rozhdestvenskiy
    Member
    Posted 1 year ago #

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

    <li>test1</li>
    <li>test2</li>
  27. CrouchingBruin
    Member
    Posted 1 year ago #

    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.

  28. Rozhdestvenskiy
    Member
    Posted 1 year ago #

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

  29. 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.

  30. Rozhdestvenskiy
    Member
    Posted 1 year ago #

    Great! Thank you Mika!

    So I will post my list soon. With screenshots.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic