Shop Menu

How to: Add Graphic to PageLines Branding Section

This entry is part 6 of 6 in the series PageLines Framework 2.0 Case Study - BPE Law

Goal: Have a graphic in PageLines Branding section and have it aligned with the bottom of the site logo, as well as aligned flush-right.

PageLines Framework v2.1.3
WordPress v 3.3.1

1. Turn off RSS/social media icons:

WP admin -> PageLines -> Settings -> Header And Footer -> UNtick “Display the Blog RSS icon and link?”

2. Functions file: Add this to child theme’s functions.php. (Notice that we’re hooking into “pagelines_before_branding_icons”):

add_action('pagelines_before_branding_icons', 'add_phone_number_');

function add_phone_number_( ) {
?>
<img style="bottom:0;height:73px;position:absolute;right:0;width:223px;" src="http://bpelaw.designparc.com/wp-content/themes/bpelaw/images/phone-number.png" alt="Alt text" title="Title">
<?php
}

3. Upload graphic to: wp-content/themes/bpelaw/images/ folder

4. CSS file: Add the following CSS to allow the new phone number graphic to be on the same horizontal plane as the site’s logo

#branding .mainlogo-link, #branding .mainlogo-img {
display: inline;
}
Series NavigationHow to: Add Audio Snippets to WooCommerce Product Pages

, , ,

8 Responses to How to: Add Graphic to PageLines Branding Section

  1. Ian September 22, 2012 at 11:05 am #

    I added google adsense ad to the right of my pagelines logo in the branding section but when the google ad is clicked it just links to my homepage. The logo is on the left but it’s link area spans the full width of the header over the google ad. How can I fix this so that the logo link is only on the left or remove it altogether so that my google ad works ?

  2. Jon @ vodkitchen October 16, 2012 at 2:07 pm #

    Thank you for posting just about the only working example code on the internet for this. I had tried 4 or 5 variants found on the pagelines forums and nothing worked. Yours did.

  3. Jesse October 17, 2012 at 4:29 pm #

    How would I make the graphic link to something?

    • Jesse October 17, 2012 at 4:37 pm #

      Nevermind, I figured it out (sometimes the most obvious answers are the hardest to come up with)

  4. Maggie January 18, 2013 at 4:03 am #

    Sorry, I’m probably being completely dense but am learning as I go along and cannot find the “child theme’s function.php” mentioned in item 2 above. I assume it’s a file within WP but can’t locate it. Also can I be clear where I add the css. Is it on the site options / custom code of the dashboard. I am just using PageLines lite.

    • John February 3, 2013 at 6:19 am #

      Have you find the answer? I have the same problem :)

    • Reid Walley March 4, 2013 at 11:29 pm #

      Maggie & John, the “function.php” file is located in your child
      theme folder. I downloaded my child theme from the PageLines Store. It’s
      called Base Theme (WP admin > PageLines > Themes > Top Free
      > Base Theme). Your CSS file is also available in the child theme
      (Base Theme) folder.

      I just noticed, Maggie, that you mentioned you’re using PageLines
      Lite. I don’t think any of what I mentioned is available with the
      PageLines Lite version. I’m also not sure if PageLines Lite has child
      theme capabilities.

  5. Jason Dufair May 30, 2013 at 7:02 am #

    Thank you. This was helpful.

Leave a Reply

css.php