Change text color of hyperlinked author on post

Support
#1

Hi. You guys just helped me change my posts to list modified date and hyperlink the author. I would have just continued the conversation on that thread but it is now locked. Here it is for your reference.

Now, I’d like to change two things:

  1. Remove the pencil icon
  2. Make the text of the hyperlinked author’s name red instead of black.

What code would I need for that? I assume it would be modification of this below. (You provided me with the full code in the other support thread I linked above)

//
// Author.
//

$author = sprintf( __( 'by %s', '__x__' ), get_the_author() ) . '</span>';

$author = sprintf( 'by <a href="https://barbellrehab.com/about/" title="Post by %1$s"><i class="x-icon-pencil" data-x-icon="&#xf040;"></i> %1$s</a></span>',
  get_the_author(),
  get_the_author_link()
);

I’ve attached pic of what it looks like now. Again, just want to remove the pencil icon and make the author’s name (Dr. Michael Mash) red instead of black. Thanks

author name example
author name example1048×306 78.7 KB

#2

Hi Michael,

1.) Add the following CSS on Theme Options > Global CSS:

.archive p.p-meta i,
.single-post p.p-meta i {
    display: none;
}

It will delete the pencil icon on both archive and single post page. Adjust as needed.

2.) Use this custom CSS too:

.archive .p-meta span a,
.single-post .p-meta span a {
    color: red;
}

Please check the following guide on how to inspect an element:

#3

Hi. Thanks! This worked perfected for mobile, but didn’t change anything on desktop variation. How do I make sure it displays like I want it to on both?

#4

Hello Michael,

The code did not work because you have inserted it in the wrong css block:

@media (max-width:767px){
    .x-topbar{
        background-color:#121212 !important;
    }
    hr{
        background-color:rgba(0,0,0,0);
    }
    .x-container>.offset{
        margin:75px auto;
    }
    .archive .p-meta span a,.single-post .p-meta span a{
        color:red;
    }
    .archive p.p-meta i,.single-post p.p-meta i{
        display:none;
    }

Please have the code updated and use this instead:

@media (max-width:767px){
    .x-topbar{
        background-color:#121212 !important;
    }
    hr{
        background-color:rgba(0,0,0,0);
    }
    .x-container>.offset{
        margin:75px auto;
    }
}

.archive .p-meta span a,.single-post .p-meta span a{
    color:red;
}

.archive p.p-meta i,.single-post p.p-meta i{
    display:none;
}

Please let us know how it goes.

#5

I moved the original code that @lely provided from Globall CSS to X – Child Theme: Stylesheet (style.css) and it’s now working on both mobile and desktop. Thanks!

#6

Hi Michael,

That means there is a syntax error somewhere on your Global CSS, more likely its a missing closing bracket for the @media (max-width:767px). You need to address that or else all custom CSS added on your Global CSS will be inside the @media (max-width:767px) block and will only take effect on mobile.

Here use this tool to check all your custom CSS, you can ignore the warnings but you need to address all found errors

Thanks,

#7

Fixed. No errors now. Thanks

#8

You are most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.