WordPress.org

Ready to get started?Download WordPress

Forums

Pilcrow
[resolved] Insert a (easing slider lite) to pilcrow header (11 posts)

  1. ilevelmf@charter.net
    Member
    Posted 8 months ago #

    I'm trying insert a slider (easing slider lite) into my header.
    I'm not sure where to place the code in the header php.
    Any help would be much appreciated...thx

  2. paulwpxp
    Font hero
    Posted 8 months ago #

    All modifications that need template editing need to be done via child theme.
    http://codex.wordpress.org/Child_Themes

    Once you got the child theme up and running, copy over header.php into it and replace this block of code starting from line#45 to line#58
    http://themes.trac.wordpress.org/browser/pilcrow/1.5.1/header.php

    <div id="pic">
    	<!-- lots of stuff here -->
    </div><!-- #pic -->

    with this

    <div id="pic">
    	<?php if ( function_exists( "easingsliderlite" ) ) { easingsliderlite(); } ?>
    </div><!-- #pic -->

    This is a link to plugin installation page for reference of function name.
    http://wordpress.org/plugins/easing-slider/installation/

  3. ilevelmf@charter.net
    Member
    Posted 8 months ago #

    First of all thanks so much for your quick response. I'm a graphic designer with enough css knowledge that can make me dangerous. And obviously not enough to solve all of the problems.

    I did already have my child theme in place and had copied the header.php into my child theme(dumb luck on my part).

    I proceded to make the changes to the code and got a couple of unexpected outcomes.
    1... The navigation doesn't work.
    2...There's no bottom padding in the new slider div and the text/post and the sidebar info move up & under the slider div about a 1/4in.

    here's the site...http://www.theframemakerclarksville.com/

    Can't seem to find where to make the padding adjustments and the I'm blank on the navigation.

    Any thoughts...thx

  4. paulwpxp
    Font hero
    Posted 8 months ago #

    The reason is that #nav is floated, so the #pic needs a clear.

    /* ----- clear because of floated #nav -----*/
    #pic { clear: both; }

    Use this selectors to control the position of arrows, or display none if not wanted.

    /* ----- change the value as needed -----*/
    #pic .easingsliderlite-prev.outside { left: -40px; }
    #pic .easingsliderlite-next.outside { right: -40px; }
  5. paulwpxp
    Font hero
    Posted 8 months ago #

    Please remove CSS code from header.php, and put in child theme stylesheet.

  6. ilevelmf@charter.net
    Member
    Posted 8 months ago #

    My ignorance is showing...Where do I place this clear?
    Every place I tried was wrong.
    Thanks for your patience.

    Not a big fan of the arrows, thanks for the tip.

  7. paulwpxp
    Font hero
    Posted 8 months ago #

    The code must be used in child theme stylesheet, the file is style.css in child theme folder reachable via Appearance > Editor > style.css when child theme is active.

  8. ilevelmf@charter.net
    Member
    Posted 8 months ago #

    I'm sorry, I've got everything set up in my child theme, I just don't know exactly where to place this code...

    /* ----- clear because of floated #nav -----*/
    #pic { clear: both; }

    you've been very helpful.

  9. paulwpxp
    Font hero
    Posted 8 months ago #

    Things you must do.

    • Delete php code from child theme stylesheet.
    • Clean up child theme stylesheet, leave in only needed CSS code.
    • Put that code in.

    Are those CSS in child theme stylesheet put there by you ? Are those for customization, code to overwrite parent style ? If not, delete it.

    The php code must not be in stylesheet, so delete it.

    In case, you don't have any customization works in this stylesheet that needs to be saved at all, do this.

    1. Go here Appearance > Editor and click on style.css
    2. Delete everything in it, don't click save yet.
    3. Copy this code below and paste into it and click save.
    /*
    Theme Name:     pilcrow-child
    Description:    Pilcrow child theme
    Author:         admin
    Template:       pilcrow
    */
    
    /* ----- this line must be here always -----*/
    @import url("../pilcrow/style.css");
    
    /* ----- clear because of floated #nav -----*/
    #pic { clear: both; }
  10. ilevelmf@charter.net
    Member
    Posted 8 months ago #

    Mucho thanks...I'll be back on it tomorrow...

  11. ilevelmf@charter.net
    Member
    Posted 8 months ago #

    It's soup!

    Thanks so much you've been very helpful.

    I did make some customizations in the code to overwrite the parent.
    There might be a couple of unnecessary lines but not much. I'll try and clean up.
    Good or bad I'm responsible for any mess.

    Again, thanks for all of your help. Excellent problem solver.

Reply

You must log in to post.

About this Theme

About this Topic