Support » Theme: Modality » Add text to header

  • Can anybody please help me with some css to add a few lines of text on the right side of the white header? I want to put the hours of operation under the telephone number and e-mail address. There seems to be space, maybe a lot of padding, but not a way that I can see in customizing the child theme.
    Thanks!
    This is my site:
    http://www.hersheylibrary.org

Viewing 5 replies - 1 through 5 (of 5 total)
  • First of all I hope you have created your own child theme.

    If so, copy top-header.php from wp-content/themes/modality folder to your theme folder’s root.

    For example, if your child theme folder is named as modality-child then copy the above file to root of modality-child folder.

    Now open the file from your child theme folder and after Line number 14, create a blank container <div></div> and put your desired text inside it.

    So now the HTML should like like:

    
    <div class="top-right right">
       <span class="top-phone"><i class="fa fa-phone"></i><?php echo esc_attr($modality_theme_options['header_phone']); ?></span>
       <span class="top-email"><i class="fa fa-envelope"></i><a href="mailto:<?php echo esc_attr($modality_theme_options['header_email']); ?>"><?php echo esc_attr($modality_theme_options['header_email']); ?></a></span>
       <div>Put your text here...</div>
    </div>
    

    Remember, you may need to add a fixed width for the container you are putting text in as I don’t think <div class="top-right right"></div> has a width set.

    I hope this should be it!

    Thank you so much. Yes, I have a child theme but am only used to adding css to the style sheet in the Modality child theme editor. I can see how to change the file to the header. php but am afraid of messing it up. Is there any way I can send you a screenshot and you can “talk me through it”, please?

    Screenshot of what? If it is from your website, I can access it already. If this is something else you are referring to, you can send it.
    Thank you!

    child theme header php

    It sounds like I need to create a container to make this change. That explains <div></div>.
    Does this go in the child theme editor header.php file? If so, where? Line 14 you mention, I can only see when I view the the html of website’s page source. I get the following goes inside:

    <div class="top-right right">
       <span class="top-phone"><i class="fa fa-phone"></i><?php echo esc_attr($modality_theme_options['header_phone']); ?></span>
       <span class="top-email"><i class="fa fa-envelope"></i><a href="mailto:<?php echo esc_attr($modality_theme_options['header_email']); ?>"><?php echo esc_attr($modality_theme_options['header_email']); ?></a></span>
       <div>Put your text here...</div>
    </div>

    Just know where to put it. If you can see from the image link I sent of the child theme editor, it might explain something. Alternatively, there is this, the “Edit the Theme Modality Child Header (header.php)” editor page?

    <?php
    /**
     * The Header of the theme.
     *
     * Displays all of the <head> section and everything up till <main id="main">
     *
     * @package Modality
     */
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>">
    	<meta name="viewport" content="width=device-width">
    	<link rel="profile" href="http://gmpg.org/xfn/11">
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    	<?php wp_head(); ?>
    </head>
    <body <?php body_class(); ?>>
    <div id="grid-container">
    	<div class="clear"></div>
    		<?php $modality_theme_options = modality_get_options( 'modality_theme_options' );
    		if ($modality_theme_options['header_top_enable'] == '1') {
    			get_template_part( 'top', 'header' );
    		} ?>
    		<?php if (get_header_image()!='') { ?>
    			<div id="header-holder" style="background: url(<?php echo esc_url(header_image()); ?>) 50% 0 no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
    		<?php } else { ?>
    			<div id="header-holder">
    		<?php } ?>
    			<div id ="header-wrap">
          			<nav class="navbar navbar-default">
    					<div id="logo">
    						<?php if ( $modality_theme_options['logo'] != '' ) { ?>
    							<a href="<?php echo esc_url( home_url( '/' ) ) ?>"><img src="<?php echo esc_url($modality_theme_options['logo']); ?>" alt="<?php echo esc_attr($modality_theme_options['logo_alt_text']); ?>"/></a>
    							<?php if ($modality_theme_options['enable_logo_tagline'] == '1' ) { ?> 
    								<h5 class="site-description"><?php echo esc_attr(bloginfo('description')); ?></h5>
    							<?php } ?>
    						<?php } else { ?>
    							<a href="<?php echo esc_url( home_url( '/' ) ) ?>"><?php esc_attr(bloginfo( <code>name</code>)); ?></a>
    							<?php if ($modality_theme_options['enable_logo_tagline'] == '1' ) { ?> 
    								<h5 class="site-description"><?php echo esc_attr(bloginfo('description')); ?></h5>
    							<?php } ?>
    						<?php } ?>
    					</div>
            			<div class="navbar-header">
                			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                  			<span class="sr-only">Toggle navigation</span>
                  			<span class="icon-bar"></span>
                  			<span class="icon-bar"></span>
                  			<span class="icon-bar"></span>
                			</button>
    				</div><!--navbar-header-->
              			<?php get_search_form(); ?>									
    				<div id="navbar" class="navbar-collapse collapse">
    					<?php 
    					if (has_nav_menu('main_navigation')) {
    						
    						$modality_default_menu = array(
        						'theme_location'  => 'main_navigation',
    							'menu'       => 'main_navigation',
        						'depth'      => 0,
        						'container'  => false,
        						'menu_class' => 'nav navbar-nav',
                    			'fallback_cb'       => 'wp_page_menu',
        						'walker'     => new wp_bootstrap_navwalker(),
    						);
    					
    					} else {
    						
    						$modality_default_menu = array(
        						'theme_location'  => 'main_navigation',
    							'menu'       => 'main_navigation',
        						'depth'      => 0,
        						'container'  => false,
        						'menu_class' => 'nav-bar',
                    			'fallback_cb'       => 'wp_page_menu',
    						);
    						
    					} 
    					
    					wp_nav_menu( $modality_default_menu );
    					
    					?>
    					
              			</div><!--/.nav-collapse -->
            
          </nav>
    			</div><!--header-wrap-->
    		</div><!--header-holder-->

    Is this what you called the “root’?

    The image can be viewed if you right click and open in a new tab.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Add text to header’ is closed to new replies.