• 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!

Viewing 15 replies - 1 through 15 (of 30 total)
  • 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.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

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

    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.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    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.

    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.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    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.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

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

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    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.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    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”?

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

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

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

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

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

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    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.

    Thread Starter Rozhdestvenskiy

    (@rozhdestvenskiy)

    Oh, I just added another code and it works:

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

    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.

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘Five noob questions (part 1)’ is closed to new replies.