custom animated text header - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

April 11, 2015 at 12:04 pm #200256

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,

April 11, 2015 at 12:46 pm #200258

Paulie_D

Member

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

April 11, 2015 at 10:43 pm #200262

typo_78

Participant

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

April 12, 2015 at 1:21 am #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>.

April 12, 2015 at 4:32 am #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.

April 12, 2015 at 7:44 am #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.

May 3, 2015 at 1:04 am #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 <header> 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,

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The forum ‘Back End’ is closed to new topics and replies.