Blog bylines

Support
#1

Hello!

I was wondering if there’s a way to add the author byline to my blogs. At the moment I have some code in place to remove the date entirely and nothing else shows up under the title.

I only would like my blog’s author information to show up after the blog title. I want to keep the author information hidden from the “Featured Blogs” section in the homepage.

This is an example of what I’m envisioning.

Is this possible? Thank you so much! I really appreciate your time and help!

#2

Hello Nadia,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.p-meta>span:nth-child(2), .p-meta>span:nth-child(3), .p-meta>span:nth-child(4){display:none;}

.p-meta>span:after{display: none;}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Unfortunately, that code didn’t work. :confused:

I notice the codes say: {display: none;}
I only want my blog author to appear under the blog, nothing else and nowhere else (no dates, etc) . I’m not sure if another code on my site is hindering this code that you just provided for me?

My website is https://crisisequipped.com

Thank you for your time and help!

#4

Hi There,

Thanks for the clarification and URL.

Please go to Theme Option -> Blog and enable the post meta option.

After that please add this CSS to your theme option -> CSS

.p-meta>span:nth-child(2), .p-meta>span:nth-child(3), .p-meta>span:nth-child(4) {
display:none;
}
.p-meta>span:after{
display: none;
}

Hope this helps!

#5

Now it worked!
Thank you very much ! :slight_smile:

#6

Sorry, one last thing!
I hate to be so picky… is there any way to change the pencil icon? I would prefer it to say “by” or otherwise nothing at all… but I don’t like the icon. :confused:

Thank you!!!

#7

Hello Nadia,

Thanks for updating the thread.

You can add following CSS to remove the icon under X > Theme Options > CSS:

[data-x-icon-s]:before{display: none;}

If you would like to display By please add following CSS under X > Theme Options > CSS:

[data-x-icon-s]:before{content: "By";}

Thanks.

#9

Hello!
The code is doing funky things to my site. I’ll show you.
When I put in the first code, it removes all the icons from my page:

When I use the second code, this is what happens:

Help :frowning:
Thank you again!

#10

Hi again,

That will change the icons globally, please use this code instead:

.entry-header .p-meta .x-icon-pencil:before {
    content: 'By';
    font-weight: normal;
    font-family: "Lato",sans-serif;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#11

That code worked perfectly !

Thank you and the X-Theme team SO much ! You guys have the best support. I really appreciate your help always!
Have a great weekend :slight_smile:

#12

Hi again,

Thank you for your nice words, we’re glad we could help.

Cheers!

#13

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