Jump to content
Sign in to follow this  
aabatangle

Use CSS buttons instead of image for callout

Recommended Posts

aabatangle

I want to use a CSS-generated button instead of an image for my callout button. I'm not sure what I need to modify in the Base child theme to do this. Help, please?

Share this post


Link to post
Share on other sites
catrina

Have you already looked at the hooks available for the Callout Section? (i.e. pagelines_inside_top_callout or pagelines_inside_bottom_callout)


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
javierojuel
Could you please give us more information about how you did it? I want also to introduce a CSS button instead of the image.

Share this post


Link to post
Share on other sites
seriousprod
Just a quick note in case someone else needs this. Assuming the Callout section has been activated, I used the hint @catrina provided and did the following: 1. Create a CSS button with an online generator (google 'css buttons', sans quotes). 2. Copy the CSS code into the Custom Code section of Settings. Note the button's class name, and click Save Options. 3. Using the very thorough explanation at http://www.pagelines.com/forum/discussion/4295/add-telephone-number-image-in-main-header/p1, add the section hook... a. Choose the appropriate hook under Callout Section | Advanced setup in Template Setup. In my case, I wanted pagelines_inside_bottom_callout. b. Go to Appearance | Editor and select Theme Functions from the right column c. Using the chosen hook (and the previous post for guidance), add the custom function to the bottom of the Theme Functions page. I wanted a button with a phone number on it, so my code looks like this: [code] //Add CSS button to Callout Section add_action('pagelines_inside_bottom_callout', 'add_phone_css_to_callout'); function add_phone_css_to_callout() { $phone_number = "503.555.4242"; ?>

Share this post


Link to post
Share on other sites
seriousprod
One small tweak to the code so that the href reflects the URL set in Template Setup | Site Header | Callout Section Advanced setup | Callout Section Image Link. Replace: [code] href="#" [/code] with: [code] href="" [/code]

Share this post


Link to post
Share on other sites
seriousprod
Because I hate hiding settings in the code, I made another change so that the phone number (read: CSS button text) is pulled from the Callout Header field which I wanted to remove/ignore anyway. So this: [code] $phone_number = "503.555.4242"; [/code] ...is replaced with this: [code] $phone_number = pagelines_option('pagelines_callout_header'); [/code] So full code in Theme Functions now looks like: [code] //Add CSS button to Callout Section add_action('pagelines_inside_bottom_callout', 'add_phone_css_to_callout'); function add_phone_css_to_callout() { $phone_number = pagelines_option('pagelines_callout_header'); ?>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×