home page healine

Posted in: Newspaper
Post count: 1

Hello, how may i add numbers for headlines at the homepage like http://www.sozcu.com.tr

Post count: 6600

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.