Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End custom animated text header

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #200256
    typo_78
    Participant

    I have a situation trying to find a way to replace an existing .png logo with an animated logo text http://codepen.io/anon/pen/LEKreX (originally made by RJ McCollam) in the header area without touching the menu buttons.

    The problem is that the theme have a pretty complex defined header style. At this point I am not so sure:

    1) which part of the <head> should I remove/edit in header.php;

    2) which part of the Header section of the style.css file, should I remove/edit after I’ll add the above mentionedcss code;

    3) Also, the most tricky part, how can I inject/call the JavaScript code into the header.

    Header section looks like this:

    /*------------------------------------------------------------------
    Header
    */
    .header {
      height: auto;
      position: static;
      top: 0;
      left: 0;
      background: #fff;
      width: 100%;
      z-index: 101;
      line-height: 40px;
      padding: 15px 22px 15px 30px;
      -moz-transform: translateZ(0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    @media only screen and (min-width: 40.063em) {
      .header {
        position: fixed;
        height: 80px;
        padding: 20px 60px;
      }
    }
    .header.row {
      max-width: 100%;
    }
    .header.style2 .logo {
      text-align: left;
    }
    @media only screen and (min-width: 64.063em) {
      .header.style1 .logo {
        text-align: center;
      }
    }
    .header .logo {
      display: table;
      min-height: 1px;
    }
    .header .logo .logolink {
      display: table-cell;
      vertical-align: middle;
      max-width: 100%;
    }
    .header .logo .logoimg {
      display: inline-block;
      max-height: 40px;
    }
    .header .menu-holder {
      text-align: right;
    }
    .header .menu-holder > a {
      vertical-align: middle;
    }
    .header .menu-holder > a + a {
      margin-left: 5px;
    }
    @media only screen and (min-width: 40.063em) {
      .header .menu-holder > a + a {
        margin-left: 15px;
      }
      .header .menu-holder > a + a:after {
        display: block;
      }
    }
    .header .menu-holder > a + a:after {
      content: '';
      display: none;
      position: absolute;
      width: 1px;
      height: 9px;
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAASCAYAAABxYA+/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACVJREFUeNpiLC4uTmMAAiYGKGD8//8/A4oInMFSUlJCd8UAAQYADLQTH7miXlMAAAAASUVORK5CYII=");
      top: 11px;
      left: -10px;
      -moz-background-size: 1px 9px;
      -o-background-size: 1px 9px;
      -webkit-background-size: 1px 9px;
      background-size: 1px 9px;
    }
    .header .menu-holder #quick_search {
      display: none;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    @media only screen and (min-width: 40.063em) {
      .header .menu-holder #quick_search {
        display: inline-block;
      }
    }
    .header .menu-holder #quick_search #search_icon {
      top: 4px;
      position: relative;
    }
    .header .menu-holder #quick_cart {
      position: relative;
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
    }
    .header .menu-holder #quick_cart #cart_icon {
      position: relative;
      overflow: visible;
    }
    .header .menu-holder #quick_cart .float_count {
      display: block;
      width: 30px;
      height: 20px;
      position: absolute;
      bottom: 5px;
      left: 0;
      line-height: 24px;
      font-size: 10px;
      font-weight: 600;
      text-align: center;
    }
    .header .menu-holder #quick_cart:hover, .header .menu-holder #quick_cart:focus {
      color: #151515;
    }
    @media only screen and (max-width: 40.063em) {
      .header .menu-holder #quick_cart:after {
        display: none;
      }
    }
    

    head section looks like this:

    <head>
        <title><?php wp_title( '|', true, 'right' ); ?></title>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <meta http-equiv="cleartype" content="on">
        <meta name="HandheldFriendly" content="True">
        <?php if( $favicon = ot_get_option('favicon')){ ?>
            <?php if (is_ssl()) {
                $favicon_image_img = str_replace("http://", "https://", $favicon);      
            } else {
                $favicon_image_img = $favicon;
            }
            ?>
        <link rel="shortcut icon" href="<?php echo $favicon_image_img; ?>">
        <?php } else {?>
        <link rel="shortcut icon" href="<?php echo THB_THEME_ROOT; ?>/assets/img/favicon.ico">
        <?php } ?>
        <?php do_action( 'thb_handhelded_devices' ); ?>
        <?php 
            $id = get_queried_object_id();
            $page_menu = (get_post_meta($id, 'page_menu', true) !== '' ? get_post_meta($id, 'page_menu', true) : false);
            $header_style = (isset($_GET['header_style']) ? htmlspecialchars($_GET['header_style']) : ot_get_option('header_style', 'style1'));
            $menu_mobile_toggle_view = (isset($_GET['menu_style']) ? htmlspecialchars($_GET['menu_style']) : ot_get_option('menu_style', 'style1'));
            $footer_style = (isset($_GET['footer_style']) ? htmlspecialchars($_GET['footer_style']) : ot_get_option('footer_style', 'footer-standard'));
            $left_bar = sanitize_text_field(ot_get_option('left_bar'));
            $right_bar = sanitize_text_field(ot_get_option('right_bar'));
            $site_bars = (isset($_GET['site_bars']) ? htmlspecialchars($_GET['site_bars']) : ot_get_option('site_bars', 'on'));
            $header_cart = ot_get_option('header_cart');
            $header_search = ot_get_option('header_search');
            $menu_footer = ot_get_option('menu_footer');
            $smooth_scroll = (ot_get_option('smooth_scroll') != 'off' ? 'smooth_scroll' : '');
            if (get_post_meta($id, 'header_override', true) == 'on') {
                $header_cart = get_post_meta($id, 'header_cart', true);
                $header_search = get_post_meta($id, 'header_search', true);
            }
            $logo = (ot_get_option('logo') ? ot_get_option('logo') : THB_THEME_ROOT. '/assets/img/logo.png');
            $footer = ot_get_option('footer', 'on');
        ?>
        <?php
            $class = array();
            if($site_bars == 'off') {
                array_push($class, 'site_bars_off');
            }
            if($footer == 'off') {
                array_push($class, 'footer_off');
            }
            array_push($class, $footer_style);
            array_push($class, $smooth_scroll);
        ?>
        <?php 
            /* Always have wp_head() just before the closing </head>
             * tag of your theme, or you will break many plugins, which
             * generally use this hook to add elements to <head> such
             * as styles, scripts, and meta tags.
             */
            wp_head(); 
        ?>
    </head>
    

    Any thoughts? Thank you,

    #200258
    Paulie_D
    Member

    I’m not up on PHP but <head> is not the same as <header>.

    #200262
    typo_78
    Participant

    Hello there Mr. Paulie_D, very true. I’ve exposed the whole &lt;head&gt; .. &lt;/head&gt; of the php file in order to cover all header sections because I’m not so sure which part should I edit/cut/replace.

    #200269
    Paulie_D
    Member

    You misunderstand me.

    The head and header are entirely different things.

    Now it might be that your head.php is actually outputting the required HTML but it seems to be going about it in an odd way.. But as I said I’m not up on PHP.

    What we actually need is the output HTML of the <header>.

    #200276
    typo_78
    Participant

    sorry and thank you for clarifying this.

    <!-- Start Header -->
            <header class="header row no-padding style2" data-equal=">.columns" role="banner">
                <div class="small-7 medium-4 columns logo">
                                        <a href="http://domain.com" class="logolink">
                            <img src="http://domain.com/wp-content/../img/logo.png" class="logoimg" alt=""/>
                        </a>
                                </div>
                            <div class="small-5 medium-8 columns menu-holder">
                                                                                    <a href="#" data-target="open-menu" class="mobile-toggle always">
                        <div>
                            <span></span><span></span><span></span>
                        </div>
                    </a>
                </div>
            </header>
            <!-- End Header -->
    

    I hope this helps.

    #200297
    Paulie_D
    Member

    Well, it seems clear that this is the logo section

    <div class="small-7 medium-4 columns logo">
       <a href="http://domain.com" class="logolink">
             <img src="http://domain.com/wp-content/../img/logo.png" class="logoimg" alt=""/>
        </a>
    </div>
    

    So that’s what would have to be replaced.

    #201526
    typo_78
    Participant

    Hello there and thank you for your feed-back.

    In html it’s pretty obvious; unfortunately, in this situation, the header.php generate the &lt;header&gt; section in the html file and I have to recreate somehow in reverse the php code having the result, as we can see in the above shown codepen.

    Meanwhile I’ve found an answer to point 3) learning how to call/inject the js code into the header.php file.

    Getting back to points 1) and 2) some code lines should be replaced but although css/html could be more or less intuitible languages, php no matter how hard I try, looks pretty hard to understand without the background knowledge.

    Best regards,

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘Back End’ is closed to new topics and replies.