Posted in: Newspaper
Jul 9, 2014 at 11:41 pm
Hello, how may i add numbers for headlines at the homepage like http://www.sozcu.com.tr
Jul 10, 2014 at 3:45 pm
Hi,
You can do it using Revolution Slider.
First create a Slider with posts that you want to be displayed in the slider. If you don’t know how to create a slider follow this steps:
https://forum.tagdiv.com/topic/revolution-sliders-source-post-not-working/#post-15382
Then you have to edit slider template and set the navigation type to bullet and the navigation style to round like this : http://screencast.com/t/VyfEV6kM
Last step, add this custom CSS in Theme Panel > Custom CSS:
/* change the bullet's default background */
.tp-bullets .bullet {
background: #000 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 3px;
}
/* adjust bullet background on mouse over */
.tp-bullets .bullet:hover {
background: rgba(0, 0, 0, 0.65) !important;
}
/* represents the numbers that will be shown */
.tp-bullets .bullet:after {
position: absolute;
top: 6px;
left: 9px;
color: #FFF;
font: bold 12px Arial;
}
/* First Bullet */
.tp-bullets .bullet:nth-child(1):after {
content: "1";
}
/* Second Bullet */
.tp-bullets .bullet:nth-child(2):after {
content: "2";
}
/* Third Bullet */
.tp-bullets .bullet:nth-child(3):after {
content: "3";
}
/* 4-th Bullet */
.tp-bullets .bullet:nth-child(4):after {
content: "4";
}
/* 5-th Bullet */
.tp-bullets .bullet:nth-child(5):after {
content: "5";
}
/* 6-th Bullet */
.tp-bullets .bullet:nth-child(6):after {
content: "6";
}
/* 7-th Bullet */
.tp-bullets .bullet:nth-child(7):after {
content: "7";
}
/* 8-th Bullet */
.tp-bullets .bullet:nth-child(8):after {
content: "8";
}
/* 9-th Bullet */
.tp-bullets .bullet:nth-child(9):after {
content: "9";
}
/* 10-th Bullet */
.tp-bullets .bullet:nth-child(10):after {
content: "10";
left: 5px;
}
/* 11-th Bullet */
.tp-bullets .bullet:nth-child(11):after {
content: "11";
left: 5px;
}
/* 12-th Bullet */
.tp-bullets .bullet:nth-child(12):after {
content: "12";
left: 5px;
}
/* 13-th Bullet */
.tp-bullets .bullet:nth-child(13):after {
content: "13";
left: 5px;
}
/* 14-th Bullet */
.tp-bullets .bullet:nth-child(14):after {
content: "14";
left: 5px;
}
/* 15-th Bullet */
.tp-bullets .bullet:nth-child(15):after {
content: "15";
left: 5px;
}
/* 16-th Bullet */
.tp-bullets .bullet:nth-child(16):after {
content: "16";
left: 5px;
}
/* 17-th Bullet */
.tp-bullets .bullet:nth-child(17):after {
content: "17";
left: 5px;
}
/* 18-th Bullet */
.tp-bullets .bullet:nth-child(18):after {
content: "18";
left: 5px;
}
/* 19-th Bullet */
.tp-bullets .bullet:nth-child(19):after {
content: "19";
left: 5px;
}
/* 20-th Bullet */
.tp-bullets .bullet:nth-child(20):after {
content: "20";
left: 5px;
}
/* 21-th Bullet */
.tp-bullets .bullet:nth-child(21):after {
content: "21";
left: 5px;
}
/* 22-th Bullet */
.tp-bullets .bullet:nth-child(22):after {
content: "22";
left: 5px;
}
Result: http://screencast.com/t/i2H6Hh4rd
Hope this helps!
Thanks
Viewing 2 posts - 1 through 2 (of 2 total)
The forum ‘Newspaper’ is closed to new topics and replies.