WordPress.org

Forums

[resolved] Links not Appearing as Links After Post is Published (26 posts)

  1. SandyMcDonald
    Member
    Posted 2 years ago #

    The links in my blog posts are highlighted in the editor but not in the preview and published modes. The links actually work. The problem is that the reader has no idea they are clickable links.

    Examples can be found in the last paragraph of the post below. 'Facebook', 'Twitter', 'Pinterest' and 'Comfort Climate Service' are all clickable links.

    The 2nd problem is that by default, the links do not open up a new tab. What is the best practice for changing this default? Now, I have to go into the text editor of the post and insert target="blank" for each link. Is there an easy way in the post editor that I am missing?

    Thanks for your help.
    Sandy

  2. SandyMcDonald
    Member
    Posted 2 years ago #

    Please help. I have still not been able to solve this problem.

  3. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Without a link to your site, there's really no way for anyone to begin to help.

  4. SandyMcDonald
    Member
    Posted 2 years ago #

    Duh! I'm sorry I forgot that. http://comfortclimateservice.com

  5. WPyogi
    Forum Moderator
    Posted 2 years ago #

    No problem - easy to do :). But I'm not sure where those links are - can you be more specific? Sorry if I'm out to lunch here.

  6. SandyMcDonald
    Member
    Posted 2 years ago #

    I'm the one that was out to lunch and forgot the links. Here's the link to the post

  7. WPyogi
    Forum Moderator
    Posted 2 years ago #

    I've looked at this a bunch, and it's certainly problematic - not sure why, but I'd start by fixing the CSS errors here:

    <style type="text/css">PICK AN ELEMENT NOW - or type CSS selector(advanced) {
    font-size: 30px !important;
    color: #444 !important;
    }
    PICK ELEMENT FIRST! {
    font-size: 20px !important;
    color: #222 !important;
    }
    </style>

    See this:
    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fcomfortclimateservice.com%2Funderstanding-hvac-energy-efficiency-ratings%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

    Not all of those are problematic, but the above ones might be. You also have quite a few mark-up errors that could be a problem as well:

    http://validator.w3.org/check?uri=http%3A%2F%2Fcomfortclimateservice.com%2Funderstanding-hvac-energy-efficiency-ratings%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    Did you, by chance, move an old site to WP - there's a lot of outdated, deprecated HTML - so that may be problematic too.

  8. SandyMcDonald
    Member
    Posted 2 years ago #

    I have to say I'm overwhelmed at this point :) I definitely didn't move an old site to WP. Now, I'm trying to wrap my brain around understanding why there's so much outdated HTML code. I'm using the Andrina Lite theme and have only made the following (3) changes to the CSS.

    .index-info .index-info-three{
    margin-left:75px;
    }
    
    .widget_inner.last{
    margin-left:150px;
    }
    
    #menu li a {
        margin-left:20px;
        padding:7px;
    }

    I am using some plugins to enhance the editor. How do we trouble shoot where the problems are coming from? Thank you for your help.

  9. SandyMcDonald
    Member
    Posted 2 years ago #

    From what I can tell the editor-style.css file changes the behavior of the editor. Do you think the problems are in that file? Do all themes have to have a file to change the editor behavior or is the functionality part of the base WP? I don't see a way to attach a file, so I'm including the content below.


    [No need for all that CSS]

  10. WPyogi
    Forum Moderator
    Posted 2 years ago #

    No no, you don't want to mess with that at all.

    It's probably using an editor plugin - basically it's adding a whole lot of inline CSS code -- which really isn't ideal. For example, a whole bunch of text is like this:

    <p style="text-align: left;"><span style="font-size: 16px;"><b>

    It's just always better to use external CSS code - easier to maintain, better coding, faster loading, etc.

    And there's a bunch of this kind of font tags for color - that's deprecated. Again, not sure where it's coming from.

    <div class="textwidget"><FONT COLOR="#000000">

    I think some of the mark-up errors are due to plugins - they tend to do that... but they may not be a big deal.

    It's up to you whether to try to fix the problems. Your site actually looks really great :). So far as the links, what's weird is that changing the CSS here:

    a {
        color: #454444;
        text-decoration: none;
    }

    works - but that will likely change other links on your site. But trying to isolate the links in your text doesn't work - maybe I'm missing something.

    Try this - in the HTML for those links add a class:

    <a class="speciallink" target="blank" href="http://www.faceboo.com/comfortclimateservice" title="Facebook">Facebook</a>

    Then add to the CSS:

    a.speciallink {
       color: red;
    }
  11. SandyMcDonald
    Member
    Posted 2 years ago #

    I added the following code to the custom css but it didn't change the link color in the posts. Just to make sure I cleared the cache. `a {
    color: #454444;
    text-decoration: none;
    }
    `
    Since the default editor is so limited, I've been experimenting with the following editor plugins. 1) EditorFontsize; 2) Font; 3) Ultimate TinyMCE

    I even disabled all of them, created a draft post with 4 links but the links are still not highlighted. They work but not noticeable. HTML for the example is <a href="http://comfortclimateservice.com/wp-admin/post.php?post=833&action=edit">http://comfortclimateservice.com/wp-admin/post.php?post=833&action=edit</a>

  12. WPyogi
    Forum Moderator
    Posted 2 years ago #

    The links are now blue - this CSS IS working:

    a, a em, a strong {
        color: #1B8BE0;
        text-decoration: none;
    }
  13. SandyMcDonald
    Member
    Posted 2 years ago #

    OK, this is very strange. I took the following code for links from the editor-style.css and pasted it in the custom css.

    a,
    a em,
    a strong {
        color: #1b8be0;
        text-decoration: none;
    }
    a:focus,
    a:active,
    a:hover {
        text-decoration: underline;
    }

    Now magically, all the links work. What would cause the same code in the editor-style.css not to work when it works fine if I add it to the custom css?

    BTW, the code you suggested above for adding a class to each link then adding the code to the custom css did work. I of course would like to avoid having to do that for every link in every post.

  14. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Probably a CSS error is preventing all the CSS from working OR it's getting overridden by other, more specific CSS. That's why I was puzzled -- I was trying to add CSS to the stylesheet (in Firebug) and it was not working at all. That's also one reason why internal CSS is a problem - it just makes more layers of CSS to try to handle :). But if it's working (more or less), cool. And yes, you certainly don't want to have to add that class every time if you don't have to.

  15. SandyMcDonald
    Member
    Posted 2 years ago #

    I noticed one more strange behavior. Before I put the link code from the editor-style.css into the custom css, the tags were black. Now that code changed all the tags to blue as well as the links. Why did this happen as well?

  16. SandyMcDonald
    Member
    Posted 2 years ago #

    The Categories are all blue now as well.

  17. SandyMcDonald
    Member
    Posted 2 years ago #

    I'm wondering if this is not an Andrina bug because the fact that the Categories and tags were not colored. I'm also saying this because I created that test post after I disabled all the editor plugins and the links still did not work.

    Why would the code work in the custom css and not in the original place?

  18. WPyogi
    Forum Moderator
    Posted 2 years ago #

    That's what I was worried about - when you just use "a" that means any link on the page. Try this insteac in the custom CSS:

    .post_content a,
    .post_content a em,
    .post_content a strong {
        color: #1b8be0;
        text-decoration: none;
    }
  19. SandyMcDonald
    Member
    Posted 2 years ago #

    I will try to report the problem to InkThemes. Thank you so much for your help on this. I really appreciate it :)

  20. SandyMcDonald
    Member
    Posted 2 years ago #

    The links in posts and tags are still blue with the code above, but the categories are now black again.

    Do I want the tags the same color as the links?

    And what if I have a link on a page? Will the code above work there as well?

  21. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Okay, this should get the tags out:

    .post_content p a,
    .post_content p a em,
    .post_content p a strong {
        color: #1b8be0;
        text-decoration: none;
    }

    Which is which color is really up to you. The code above will make any link that is inside a paragraph tag that is inside post content blue. Any other link should stay the black. If you want it to do the same on page, see if this works:

    .page-content p a,
    .page-content p a em,
    .page-content p a strong {
        color: #1b8be0;
        text-decoration: none;
    }
  22. SandyMcDonald
    Member
    Posted 2 years ago #

    I just looked and the link on a page is still not displaying as a link. Also, no links appear blue in the preview. Does this seem like a theme issue to you?

  23. SandyMcDonald
    Member
    Posted 2 years ago #

    Link color fixed in posts - check
    Link color fixed in pages - check
    Tags still appear black - check
    Categories still appear black - check

    Now, all I have to do is to create content and add links normally in the editor and they will work. Thank you very much.

    I do think this is a theme problem, although I haven't seen any other posts reporting it.

  24. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Yes, well to be honest, I've seen quite a few rather strange CSS "quirks" in InkThemes themes. Generally, with a bit of CSS knowledge they can be fixed...maybe not so elegant, but hopefully gets the job done. Come back if it looks like something is still amiss.

  25. SandyMcDonald
    Member
    Posted 2 years ago #

    I am a perfectionist...LOL so I would hope they will fix the issues. They just released an update that fixed a significant problem I found in this last release. With the help of this forum, I was able to correct it in the meantime. It was ugly before the fix. I was active in their forum but they decided to stop using it and create another completely separate forum for paid versions only. To be very honest, I love the look of the Andrina Theme, but they have lots of room to improve in the support area. I would gladly donate to them for their work, but I will not upgrade to the 'pro' version because the support here is far superior.

    I love WordPress so far and definitely love this forum. Although, I am new to HTML and PHP, I do have development experience (mainly backend SQL Server), as well as business analysis, testing and pm of web projects experience. I'm looking forward to the time when I will bring more to the table here in the form of help. I love open source and the community. It's actually very empowering :) Thank you!

  26. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Lovely sentiments - I certainly agree with you. Sorry you've gotten a bit suckered on their support - you're not the only one, FWIW. I'm actually pretty new here myself and yes, it's truly an inspiring, wondering project and community. You're ahead of the game with any experience, and obviously up for learning whatever else you need and want to. Glad you'll be around :).

Topic Closed

This topic has been closed to new replies.

About this Topic