Change Link Color in Entry, Reposition Byline

  • Unknown's avatar
    daryldalzell · Member ·

    The site I would like some help with is Someone Who’s Cool, it uses the Editor theme. There are two aspects of my website that I’ve been trying to change:

    1) Remove the byline from front page and individual posts, or position it to below post title and remove the author. Also, closing the space between the title and the featured image would be nice.

    2) Change the color of links in posts ONLY. Would also like to remove hover effect for all links.

    For the byline issue, I previously had CSS set up that removed the byline from showing up on the front page, but when viewing a single post it would return and also shows the author. I would prefer to do away with the byline entirely, but showing the date of each post is nice. But there is such a huge margin between the post title and the above image it just doesn’t look good.

    For the link colors, I have used some CSS that successfully changed the color of links, but all links, not just those in the posts. I want my titles and navigation links to remain normal body text color, but I want the links in posts to stand out more by being a different color.

    I don’t know a thing about CSS so I’ve just being copy/pasting code I’ve found online to solve these issues and none of them get it quite right.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    nizamilputra · Member ·

    Hi there, let me try to help you

    1) Remove the byline from front page and individual posts, or position it to below post title and remove the author. Also, closing the space between the title and the featured image would be nice.

    .single .byline{
  display: none;
}
.featured-image{
  margin-bottom: 0;
}

    2) Change the color of links in posts ONLY. Would also like to remove hover effect for all links.

    I’m not sure about this. Which links do you want to change the color? I tried to apply it for all links in the home page.

    .home a{
  color: #f00;
}
.home a:hover{
  color: #f00;
}

    Let me know if you need another help.

  • Unknown's avatar
    daryldalzell · Member ·

    The byline code worked great, I definitely appreciate that. I adjusted the margin to be a bit larger than 0 and added the code to remove the date. I think it’s a bit cleaner now, but wonder if there’s a way I can add the date elsewhere, maybe on the little sidebar of each post? Also, what would be the code to adjust the margin between the title and post? Everything I have tried I can’t seem to make it smaller. The code I am currently using is: 

    .single .byline,
.entry-date	{
	display: none;
}

.featured-image {
	margin-bottom: 10px;
}

    As for the links, I want to change the color for the links only in the actual posts themselves. Links for the title of the post, navigation and such I want to be normal text color. The code you gave me change the color of all links on the site.

    After doing a little more searching I found that I needed to add .entry-content to all the link color code to make it just the post and not the whole page. I did keep your code, though, to eliminate the hover effect on the title and navigation and to keep the color the same as the body, but maybe there is an easier way to do that? The code I am using for that is: 

    .home a:link,
.home a:hover	{
  color: #404040;
}

.entry-content a:link,
.entry-content a:visited,
.entry-content a:active,
.entry-content a:hover
{color:#c00; text-decoration: none}
  • Unknown's avatar
    nizamilputra · Member ·

    That was great adjustment :)

    but wonder if there’s a way I can add the date elsewhere, maybe on the little sidebar of each post?

    I hope this code is the answer; 

    .entry-header{
    position: relative;
}
.entry-date{
    position: absolute;
    width: 100%;
    margin-bottom: 0;
    z-index: -1;
}
.home .entry-date{
    bottom: -30px;
}
.single .entry-date{
    bottom: 0px;
}
.entry-meta{
    margin-top: 4.5%
}

    Here is the preview: https://cloudup.com/cQHRzq-y3xs

    also, what would be the code to adjust the margin between the title and post?

    You can add margin in .entry-title. Eg: 

    .entry-title{
  margin-top: 20px;
  margin-buttom: 20px;
}

    I did keep your code, though, to eliminate the hover effect on the title and navigation and to keep the color the same as the body, but maybe there is an easier way to do that?

    Actually the selector to edit the title is “.entry-title a”, so you can use it like this; 

    .entry-title a,
.entry-title a:hover{
  color: #404040;
}

    But if you use “.home a” it’s mean you will change all links on homepage. It’s ok if you still use it.

  • Unknown's avatar
    daryldalzell · Member ·

    I hope this code is the answer; 

    .entry-header{
    position: relative;
}
.entry-date{
    position: absolute;
    width: 100%;
    margin-bottom: 0;
    z-index: -1;
}
.home .entry-date{
    bottom: -30px;
}
.single .entry-date{
    bottom: 0px;
}
.entry-meta{
    margin-top: 4.5%
}

    Here is the preview: https://cloudup.com/cQHRzq-y3xs

    With a little work, I was able to get the site to look just as it does in the image, but the position of the time changes depending on browser, screen resolution and device. The problem is that the timestamp’s position is relative to the title rather than poart of .entry-meta. What I need is to make it part of .entry-meta, which I don’t think is possible.

    The margin adjustment of .entry-title worked great, though. I tried adjusting .entry-data margin-top, but apparently I needed to adjust the title.

  • Unknown's avatar
    nizamilputra · Member ·

    What I need is to make it part of .entry-meta, which I don’t think is possible.

    It’s not possible to make timestamp to be part of entry-meta, because we are unable to edit theme code.

    I think it will be better when we change “.entry-meta” margin with px value instead of percent. Try to use this code below; 

    .entry-header{
    position: relative;
}
.entry-date{
    display: block;
    position: absolute;
    width: 100%;
    margin-bottom: 0;
    z-index: -1;
    bottom: -20px;
}
.single .entry-date{
    display: block;
}
.entry-meta{
    margin-top: 40px;
}
  • Unknown's avatar
    daryldalzell · Member ·

    That is perfect, thank you. I adjusted the spacing a bit, and if I’m feeling up to it I might try to get it more precise, but that looks exactly as I wanted. Much appreciated!

    I actually think I might stick with the default link color scheme for posts, but I’m glad I have the code to change that in the future if desired.

  • The topic ‘Change Link Color in Entry, Reposition Byline’ is closed to new replies.