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 www.wisemonkeymedia.co.uk



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


on line 23

var fdgInfo = $('Info')


CHANGE TO

var fdgInfo = $('
Info')



SAVE 



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

ADD 


div.clickhere{
    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;
}


SAVE



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

No comments: