Custom Header

[bradlow 0]

Any one that can help as quickly as possible! I just purchased and installed Platform Pro and I need to add a custom header to my page. I need to add the header from this website: www.poreotics.com I am designing their new website, and I need that header on PlatForm Pro! Can someone help me out and tell me exactly where and in which file to put it in?

[timlinson 3]

Hi Brad, I don't think any file adjustments are necessary.. should be as simple as going to PlatformPro > Settings > Global Options > Custom Header Image.

[bradlow 0]

The only thing is, is that I have scripts for when you hover over each one of the guys, their picture shows up and it isn't just a glowing silhouette.

[timlinson 3]

Do you have the code they use? PPro helps you style WP sites, but it's not going to support something like that natively..

[bradlow 0]

Yes, the website they have up now I built. I just need to convert it to wordpress, using PlatForm and keeping my header.

[timlinson 3]

Ok then since you're familiar with the code, you can insert stuff into the branding with a hook. Activate PlatformBase as your theme and put something like this in the platformbase/functions.php file: ` add_action('pagelines_inside_top_branding', 'brads_header'); function brads_header() { //your header } ` Some more customization methods here you may find useful: http://www.pagelines.com/docs/base-child-theme

[bradlow 0]

I can't see to get it to work. It's a mixture between javascript, and HTML and tables I guess. Can you email me by any chance? I don't want to clog up this forum! [email protected]

[catrina 103]

I'm not sure if you were e-mailed or not, but can you please try pasting it here so that everyone can see it? Just so that other moderators who come across this topic know what code you're talking about if they're assisting you. Thanks!

[bradlow 0]

I add it in the functions.php file and then nothing on my page will load. I get a syntax error. Here's the test site I'm building it on: http://www.bradlowentertainment.com/blog/ Here's the code, too, I think I'm doing it right: <?php // Setup -- Probably want to keep this stuff... // Set up action for section registration... add_action('pagelines_register_sections', 'base_sections'); /** * Hello and welcome to Base! First, lets load the PageLines core so we have access to the functions */ require_once('setup.php'); // For advanced customization tips & code see advanced file. //--> require_once(STYLESHEETPATH . "/advanced.php"); // ==================================================== // = YOUR FUNCTIONS - Where you should add your code = // ==================================================== // ADDING CUSTOM SECTIONS ------- // // Register a Drag&Drop HTML Section for the admin. // A pullquote section was created here for demonstration purposes // Sections should be named: section.[your section name].php and placed in the sections folder. function base_sections(){ /* Your custom sections get registered in here... PageLines Register Section Arguments: 1. Section Class Name, 2. Directory name (or filename if in root of 'sections' folder), 3. Init Filename (if different from directory name), 4. Section setup and variable array */ pagelines_register_section('BasePullQuote', 'pullquote', null, array('child' => true) ); pagelines_register_section('BaseSidebar','sb_base', null, array('child' => true) ); } add_action('pagelines_inside_top_branding', 'brads_header'); function brads_header() { //your header // // <SCRIPT LANGUAGE="JavaScript"> loadImage1 = new Image(); loadImage1.src = "images/Dumbo_Hover.jpg"; staticImage1 = new Image(); staticImage1.src = "images/Dumbo.jpg"; loadImage2 = new Image(); loadImage2.src = "images/Can_Hover.png"; staticImage2 = new Image(); staticImage2.src = "images/Can.png"; loadImage3 = new Image(); loadImage3.src = "images/Charles_Hover.png"; staticImage3 = new Image(); staticImage3.src = "images/Charles.png"; loadImage4 = new Image(); loadImage4.src = "images/Law_Hover.png"; staticImage4 = new Image(); staticImage4.src = "images/Law.png"; loadImage5 = new Image(); loadImage5.src = "images/Jet_Hover.png"; staticImage5 = new Image(); staticImage5.src = "images/Jet.png"; loadImage6 = new Image(); loadImage6.src = "images/Chad_Hover.png"; staticImage6 = new Image(); staticImage6.src = "images/Chad.png"; loadImage7 = new Image(); loadImage7.src = "images/Danny_Hover.png"; staticImage7 = new Image(); staticImage7.src = "images/Danny.png"; </script> </head> <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (poreo tron v3 layout hover.psd) --> <table id="Table_01" width="1215" height="619" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"> </td> <td colspan="3" rowspan="5"> </td> <td colspan="2" rowspan="4"> </td> <td colspan="3" rowspan="4"> </td> <td colspan="3" rowspan="4"> </td> <td colspan="3" rowspan="3"> </td> <td colspan="2" rowspan="2"> </td> <td> </td> </tr> <tr> <td colspan="4" rowspan="5"> </td> <td> </td> </tr> <tr> <td colspan="2" rowspan="5"> </td> <td> </td> </tr> <tr> <td colspan="3" rowspan="5"> </td> <td> </td> </tr> <tr> <td colspan="8" rowspan="4"> </td> <td> </td> </tr> <tr> <td colspan="3" rowspan="3"> </td> <td> </td> </tr> <tr> <td colspan="4" rowspan="2"> </td> <td> </td> </tr> <tr> <td colspan="2"> </td> <td> </td> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td rowspan="2"> </td> <td colspan="2"> </td> <td rowspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td rowspan="2"> </td> <td colspan="2"> </td> <td rowspan="2"> </td> <td colspan="2"> </td> <td rowspan="2"> </td> <td colspan="2"> </td> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2"> </td> <td colspan="4"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td colspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td></td> </tr> </table> } // ABOUT HOOKS --------// // Hooks are a way to easily add custom functions and content to the Platform theme. There are hooks placed strategically throughout the theme // so that you insert code and content with ease. // HOOKS EXAMPLE --------// // Below is an example of how you would add a social media icon to the icons in header (branding section) // We have placed a hook at the end of the icon set specifically add new icons without modifying code or having to worry about your edits // getting thrown out during the upgrade process. The way to use hooks goes a little like this: // add_action('hook_name','function name'); // ---> uncomment to load //add_action('pagelines_branding_icons_end', 'add_icons_to_branding'); // function name function add_icons_to_branding(){ // This hook adds a stumbleupon icon to the header of your theme. The class referenced in the link can be seen in the style.css // and is the image from the CSS is placed in the images folder ?> <?php } // end function // ABOUT FILTERS ----------// // Filters allow data modification on-the-fly. Which means you can change something after it was read and compiled from the database, // but before it is shown to your visitor. Or, you can modify something a visitor sent to your database, before it is actually written there. // FILTERS EXAMPLE ---------// // The following filter will add the font Ubuntu into the font array $thefoundry. // This makes the font available to the framework and the user via the admin panel. add_filter ( 'pagelines_foundry', 'my_google_font' ); function my_google_font( $thefoundry ) { $myfont = array( 'Ubuntu' => array( 'name' => 'Ubuntu', 'family' => '"Ubuntu", arial, serif', 'web_safe' => true, 'google' => true, 'monospace' => false ) ); return array_merge( $thefoundry, $myfont ); } // ADDING NEW TEMPLATES --------// // Want another page template for drag and drop? Easy // 1. Add File called page.[page-id].php to Base // 2. Add /* Template Name: Your Page Name */ and Call to 'setup_pagelines_template();' to that file (see page.base.php) // 3. Add 'pagelines_add_page('[page-id]', '[Page Name]');' to this functions.php file // Add Base Page if ( function_exists( 'pagelines_add_page' ) ) pagelines_add_page('base', 'Custom Page'); // OVERRIDE SECTION TEMPLATES --------// // Want more customization control over any of the core section templates in PlatformPro? Just override the template file. // To do that, just add a file called template.[section-id].php to this child theme and it will override the section templates // for the section with that ID. For example, template.boxes.php will override the boxes templates. // Once overridden you can copy the code from that section, paste it there and edit to your heart's content.

[timlinson 3]

You need to use the `?>` delimiter any time you start using non-php code. Then when you start php again, you need `<?php` e.g. ` // php stuff here ?> <?php // more php ?> <?php // etc `

[bradlow 0]

I don't know what I would do without the help of you guys! Hopefully last question about the header: All the images are super spaced out? What will get rid of that? Do I need to deleted the < tr > 's or the < tb >'s?

[catrina 103]

I believe so. Those are a lot of

<td></td>

's in the code from what I see posted above, so you may want to remove the ones with no images inside them.

[bradlow 0]

I've tried removing them all, and then individually and it messes up the flow and moves all the images around?

[catrina 103]

Hmmm, it's difficult to see the entire code since the forum post is probably inaccurate. Can you please paste the code into http://www.pastie.org/ and send me the URL so I can view the code there in its entirety?

[bradlow 0]

http://www.pastie.org/1957725

[bradlow 0]

I've almost got it fixed, but now the last guy on the right is suppose to be down lower and the "poreotics" is a little messed up. But I took out the <td rowspan="2"> and </td> infront and at the end up the links and images. I just need to get the managers character and the words realigned!

[kastelic 6]

I pasted your code into a fresh static html page and it was all out of alignment. If i were you I would do exactly that and fix the alignment before you try to put it in your Platform theme.

[bradlow 0]

My codes are the same, except I just got ride of the tr's and td's. Compare them, they are the same. http://bradlowentertainment.com/preview2.html and the pastie for that: http://www.pastie.org/1958400 And: http://bradlowentertainment.com/blog/preview2.html and the pastie: http://www.pastie.org/1958404 Everything goes haywire after I start eradicating the tr's and td's.

[bradlow 0]

So close! I just can't get the last guy to move down and the logo over to the left! Any ideas?

[Kate 3]

Hi Brad, Because of the black space, you mean? I believe that's an extra image, no? Here it is in the code: `` BTW: You should use the "alt" attribute on your images. And, you should have a closing tag for the image (either by using

</img>

or

/>

at the end instead of just the closing bracket.

[bradlow 0]

I put in the closing </img> tags. I think that black square helps push down the last guy. It's almost all there, I just need "poreotics" moved to the left and the last guy pushed down!

[bradlow 0]

I un-centered the header, and it aligned the poreotics but danny's little character is still floating up and he should be down. How can I center it and still keep it all aligned?

[Kate 3]

Hey Brad, The link you gave doesn't seem to be working anymore...

[bradlow 0]

I have tried almost everything and I just can not get the poreotics under the first character. Can anyone help or suggest something? http://www.bradlowentertainment.com/blog/

[bradlow 0]

Now I've got poreotics over, but there's a noticeable gap and I still can't get the last guy pushed down! -___- ::rips out chunk of hair::