Friday, 5 October 2012

Adding 'Find Out More' Here text to the Info button in Folio Two Wordpress Theme

In the Folio Two theme it was mentioned by some that the Info button in the Project slides wasn't very easy to find.  So what we need was some text showing us the way.

The solution to this wasn't that straight forward; as the page moves dynamically when enlarged or decreased ( mean a static CSS placement would be useless )  and also as the info button is created in Javascript many changes would need to be made to the css to accommodate this.  The following code uses a '-' value may not work in every browser; however as far as I've tested it works in every browser supported by Folio Two.

Here's what our image looks like now on

OPEN  wp-content/themes/folio-two/js/fulldivgal-v2.js

on line 23

var fdgInfo = $('Info')


var fdgInfo = $('


OPEN  wp-content/themes/folio-two/style.css 


    background: url("images/skins-items/Find-out-more.png") no-repeat scroll 0 0 transparent;
    height: 34px;
    margin-left: -185px;
    margin-top: 20px;
    position: fixed;
    width:  199px;


Feel free to make your own PNG and change the CSS values as needed.

No comments: