WordPress.org

Ready to get started?Download WordPress

Forums

elegantWhite
[resolved] Irregular link styles (4 posts)

  1. robrogan
    Member
    Posted 1 year ago #

    Some of my posts in this theme have a normal link style of blue font color, for example. Other posts however, have links that take on the same style that tags have. In a few cases, the post title (which is a link on the home page), and all of the links in the post body have a gray background with a lot of margin so that they look more like buttons.

    The HTML of of this post is the same as another post that has correct link styles. <a href="URL.com">Link Name</a>. Does anyone know of other possible reasons some links would be styled differently than others? This is a fresh theme install, the most recent version, and I haven't made any changes to the CSS.

    Thanks!

    Example posts:

    Has correct link style:

    Has incorrect link style:

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You might check the bad pages for mark-up errors - they can mess up how CSS is applied:

    http://codex.wordpress.org/Validating_a_Website

    Using Firebug (or other browser tool) may also help track this kind of thing down.

  3. robrogan
    Member
    Posted 1 year ago #

    Thanks, I'll try that now.

  4. robrogan
    Member
    Posted 1 year ago #

    Well, so far I have skimmed through the printout from the
    W3C Markup Validation Service and it looks like the majority of the errors relate to either the theme or wordpress. I did catch quite a few problems with the most recent post on my home page. I fixed the code with the post editor, and funny enough, this was one I had no problems with. The post that doesn't display correctly – third post on home page - didn't appear in the markup validation.

    Using the Chrome browser's Inspect Element I noticed that my regular html links (only using <a href="URL.com">Link Name</a> and no additional style tag, are receiving this div style:

    `div.tag-links a {
    background-color: #efefef;
    padding: 0px 10px;
    float: left;
    margin: 10px 10px 0 0;
    font-size: 14px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -khtml-border-radius: 5px;
    color: #515151;
    }`

    ... which is the style meant only for tags.

    The beginning of said post, has

    <div id="content">

    and within that, the post is described as

    <div id="post" class="post-355 post type-post status-publish format-standard hentry category-musings tag-cognition tag-color tag-links tag-medium tag-swatch">

    >.<
    Oh. My. God.

    I just realized in the middle of writing this post, the text from the tag names that belong to the post are included in the DIV CLASS for the post. Which means that because my post is about recommended links, and one of the tags is "links," this is being read by the CSS as <div id="post" class="blah blah tag-links blah blah">.

    tl;dr
    You cannot tag a post with the word "links" in this theme, or every link style in the post will inherit the tag style.
    Very weird, but at least it's an easy fix. I killed all tags "links."

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags