Jump to content
Sign in to follow this  
pcon

How to move Callout to Branding

Recommended Posts

pcon

This stems from not understand how to use hooks. I hope through this example it will be easier to modify my themes. I'm trying to modify my Platform pro theme and move the callout section to fit inside branding before the icons. I've gone through the videos but can't decipher which is the correct code to insert in functions.php within the Base child theme. In callout I have set the css to hide the text, but I am unclear where to set the width so it will fit within the branding header. Would it be here?

#callout{ overflow:hidden;}
Next I've been working in the functions.php of the base theme. Here is the incorrect code I've guessed thus far. How can I tell what the functions name is and what to call it?
add_action('pagelines_before_branding_icons','callout');
	
		// ---> uncomment to load
		//add_action('pagelines_branding_icons_end', 'add_icons_to_branding');
	
		// function name
		function callout(){
	
		get_callout ()
	
		}

thanks for your help.

Share this post


Link to post
Share on other sites
Kate

Hey Patrick, Another approach: move the callout to the header section (in Settings->Template Setup->Site Header. Place it above the navigation (which it sounds like is where you want it?), and you should be good to go. As far as changing the width of the callout section: yes, I would try #callout first.

Share this post


Link to post
Share on other sites
pcon

Kate, I should have added that part in there. I currently have the callout section within the header. I'm trying to fit my custom callout image to align with the company logo and social media icons. Currently is sits below the icons and logo, adding too much white space.

Share this post


Link to post
Share on other sites
cmunns

Do you have a link to your site Patrick?

Share this post


Link to post
Share on other sites
pcon

I've uploaded the site here sample site I would like the Logo, callout, and social media icons to be on the same line.

Share this post


Link to post
Share on other sites
Kate

Hi Patrick, It's hard to give you the exact code because when you uploaded the site, you didn't bring the images with ;) But, to get you started:

.icons{top:0px !important;right:0px !important;}
	#callout{width:500px;margin-left:200px;margin-top:-50px;}

Now, keep in mind you'll have to modify those lines with the appropriate widths and margin values. But, that should get you on the right track. (Also, you can change the positioning of the "icons" in the admin panel Settings.)

Share this post


Link to post
Share on other sites
pcon

I've uploaded the pictures, sorry about that. Hard to see there properties when they're missing. When ever I try to adjust the width of the callout section it disappears. Here is the code I've inserted into the custom code section CSS.

body{}
	
	#callout{}
	#callout .callout_text { display: none; }
	#callout .callout_image { width: 35%; }
	
	.banner-title{margin-left:-15px;}
	.banner-content {padding-left:35px;}
	

Hope that helps clear things up.

Share this post


Link to post
Share on other sites
cmunns

I get a 403 on the link you provided.

Share this post


Link to post
Share on other sites
pcon

Adam, sorry I don't know how to delete the comment with the dead link. The correct link is in the comment below the link you tried. Or visit this link test site. Let me know if you any issues with this link.

Share this post


Link to post
Share on other sites
catrina

You can try adding

float: right;
to the inside of this code:
#callout{}

It will nudge the section to the right.


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
pcon

I think add float will keep the call out on the same line. Is there a way to add a hook and insert the callout into the branding? So the circled area in the picture would move to the red boxed area? 5yG19same picture

Share this post


Link to post
Share on other sites
cmunns

You need to use a hook here instead of relying on CSS. First we can actually just extract the callout code you are. Try something like this: ` add_action('pagelines_after_branding_wrap','calltoaction'); function calltoaction(){?> valet_quote_01.jpg <?php } ` Let me know what this does...add it to the functions.php file in -Base

Share this post


Link to post
Share on other sites
pcon

Maybe I'm doing something wrong. I added the code to the theme editor and update functions file in the base theme. But I don't see any difference in the site.

Share this post


Link to post
Share on other sites
catrina
I added the code to the theme editor and update functions file in the base theme. 

By theme editor you mean the theme editor for the functions file, yes? (If you added the code somewhere else in addition to the functions file, that might be the problem)


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
pcon

thats, correct I added the code suggested by Adam to functions.php in the child theme using the Word Press theme editor. But there was no change in the viewable page.

Share this post


Link to post
Share on other sites
cmunns

maybe not in the correct spot in that document. It should be marked where the other sample hook is...but if you want to go the css route or get frustrated try this in you custom css file ` #callout { position: absolute; top: 40px; left: 250px; } `

Share this post


Link to post
Share on other sites
vuuchalex

I am SOOO frustrated by Platform! All I want to do is have a few items of text with links above my nav on the right side of the page, a la http://www.addondata.com/. But to do so, I apparently need to be a CSS designer coder -- and even if I wanted to, I can't find the callout hooks and modifiers. Is there a simple way to just add a few links on at the far right of the header section?

Share this post


Link to post
Share on other sites
cmunns

I don't know why CSS was recommended in the first place as moving the entire callout block is an awful suggestion. Let's forget about all that and go back to the hook I provided. When you add a hook you must be using PlatformBase and it must go into the functions.php file where the commented code explains how to use hooks. again: ` add_action('pagelines_after_branding_wrap','calltoaction'); function calltoaction(){?> valet_quote_01.jpg <?php } ` Depending on where this is added you can either change the hook location e.g. from pagelines_after_branding_wrap to pagelines_inside_top_branding or add css from this point to do the work `a.mylink {}`

Share this post


Link to post
Share on other sites
rweiss

Adam I want to do something similar (move the callout into the branding section (my "brand" is just a square logo, so the branding area has too much white space. I was also confused as to why this conversation was trying to use css to solve the issue. However, I am now confused by your suggestion, and maybe it is a difference between Platform Base and Platform Pro. My function.php is quite minimal, as it appears that most functions were written into other files. The callout functions look to be in sections.callout.php Is there a way to have the theme combine the two sections using a split amount of real estate in the same area? Maybe that is where the css would come in? Rick

Share this post


Link to post
Share on other sites
cmunns

Yes it would probably be both. Generally speaking the callout is a fullwidth section so you will have to modify css to make it fit in the header. The functions.php file in the PlatformBase theme is where you want to add hooks and start building essentially a more-or-less custom child theme. If you just want to add a header banner or button there are other examples of that in this forum where people have added adsense banners to their header for exapmle.

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  

×