[CSS] Change the size of comment ribbon (custom code provided by tagdiv)

Posted in: Newspaper
Post count: 317
mehedi
#15555
Jul 12, 2014 at 12:38 pm

Hi!

I want to change the size of comment ribbon. The code was provided by someone from tagDiv before. Here is the code:

.comments_p_single {
position: absolute;
right: 0px;
bottom: 2.5px;
z-index: 1;
color: white;
font-size: 25px;
font-family: 'Roboto Condensed', sans-serif;
width: 60px;
height: 37px;
line-height: 5px;
text-align: center;
background-color: rgba(77,178,236,0.9);
}
.comments_p_single p{
padding: 3.5px 7px 10px 7px;
margin: 0px;
}
.comments_p_single:after {
position: absolute;
bottom: -8px;
right: 0;
left: auto;
content: "";
width: 7px;
height: 8px;
background-color: transparent;
background-repeat: no-repeat;
background-position: -8px -87px;
background-image: url(http://cdn3.vox-cdn.com/images/verge/sprites/ribbongles.v51a515f.png);
}

I want to change the ribbon size. This is the ribbon:

I would like to make increase the height of it and change the colour to orange. You can see it live here.

Please help.

Thanks!

Post count: 6600
Lucian
#15592
Jul 14, 2014 at 1:15 pm

Hi,

Please add the custom CSS from below in Theme Panel > Custom CSS, like this: http://screencast.com/t/8tLnbdoW59

.comments_b10 {
height: 50px;
background-color: orange !important;
}

.comments_b10 p {
position: relative;
top: 15px;
}

Thanks

Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.