One of the latest HTML 5 child themes for StudioPress is named Centric Pro. In this post, i’ll answer a question relating to customizing the Centric Pro theme. Here’s the question:
Hi,
I would like to replace the arrow button on the homepage with a text button. Any ideas?
Thank you,
Tom
Here’s the default which uses the arrow:
If you open up the home.js file located inside the js folder of the Centric Pro theme, you’ll find this Javascript code:
What you need to do is change the code on line 8 so the entire code block looks like this:
Here’s the result:
Basically all we’ve done here is swap out the class for the arrow Dashicon with a class for the button. The class for the button will use your themes existing CSS to style the button so no extra CSS code is needed.
From this:
To this:
A simple and effective solution don’t you think?
Add Arrow Icon To Button
Another option is to add a arrow icon before your button text using Dashicons. Here’s the result first and then the code:
And here’s all the code:
How would you go about adding the Centric Pro button to another theme. Namely, Parallax Pro? Is it as easy as switching .home-featured & .home-widgets-1 to .home-section-1 and dropping in the home.js? Or is it more involved than that?
There’s a bit more involved. You’ll also need to add the PHP to load the jQuery and CSS to add and position the arrow. And, you’ll need to modify the js and HTML for the first widget in the front page template.
I’ll publish a tutorial on this soon. Here it is https://wpsites.net/web-design/add-centric-pro-scroll-arrow-to-parallax-pro/
Members only http://wpsites.net/registration/
Hi Brad,
This is awesome! But I was wondering, how to create two buttons (side by side) instead of just one? I’m creating a job board site — one button links to job seekers and the other button to post jobs.
Also, if I want to change the colors of these buttons, should I just do that in CSS?
Thanks again,
Warren