Customize header text

Hello,

please explain a little bit more what you want to achieve. That way I can understand what you’re trying and what would be the best to achieve it.

Hi,

In want edit 2 things in this section:

1. Adding a divider

2. On my website the first line shows ‘hallo’; i will change this text ‘by time’
Example: -in the morning: show ‘Good morning’, -in the afternoon: show ‘Good afternoon’,…

That’s the reason why trying hook in the header section.

You can add a divier with a little bit of css:

.header-image-heading {
  position: relative;
}
.header-image-heading::after {
content: "";
background-color: #fff;
height: 2px;
position: absolute;
bottom: -10px;
left: 50%;
width: 40px;
margin-left: -20px;
}

Regarding the second question, you could try to modify the file inc/functions/functions-header.php in a child theme or use a jQuery workaround like this. Add it in a child theme file or custom js plugin.

jQuery(function($) {
  var now = new Date();
  var hours = now.getHours();
  var msg;
  if (hours < 12) msg = "Good Morning";
  else if (hours < 18) msg = "Good Afternoon";
  else msg = "Good Evening";
  $('.header-image-heading').html(msg);
});

I didn’t really tested this very much, but it should work.

Maybe I will add the functionality to override functions in the next updates of Meteorite. That way you would be able to copy only the function with the header content in a child theme and replace some scripts to your needs.

Hi,

Thats awesome ??

Your support is amazing!

All your code works perfect!

I add some little php that only shows the greetings on the homepage:

<?php 	// When Homepage 612 (ID) is being displayed.
if (is_page( 612 )) {
echo '<script>';
echo 'jQuery(function($) {';
echo 'var now = new Date();';
echo 'var hours = now.getHours();';
echo 'var msg;';
echo 'if (hours < 12) msg = "Goeiemorgen";';
echo 'else if (hours < 18) msg = "Goede namiddag";';
echo 'else msg = "Goeie avond";';
echo '$(".header-image-heading").html(msg);';
echo '});';
echo '</script>';
}
?>

See it in action on my homepage: https://webkust.be/

Regards,
Christophe

• This reply was modified 7 years, 7 months ago by ctuxboy.

Hi,

I do little changes.
Adding the jQuery snippet in my child theme’s functions.php and hooked in the header:

function custom_header_text() {
 if (is_page( 612 )) { // if page id = 612 (homepage)
  echo '<script>';
  echo 'jQuery(function($) {';
  echo 'var now = new Date();';
  echo 'var hours = now.getHours();';
  echo 'var msg;';
  echo 'if (hours < 12) msg = "Goeiemorgen";';
  echo 'else if (hours < 14) msg = "Goede middag";';
  echo 'else if (hours < 18) msg = "Goede namiddag";';
  echo 'else msg = "Goeie avond";';
  echo '$(".header-image-heading").html(msg);';
  echo '});';
  echo '</script>';
 }
}
add_action('meteorite_after_header','custom_header_text');

Works perfect ??

Hi Christophe,

great that it worked! ?? I forgot to apply that only on the front page – nice solution.

And thank you for your review, I really appreciate every feedback.

Hi,

Thanks to you, for the awesome support!

The positive review is with pleasure ??

PS: Maybe this snippets can inspire or help other users.

Regards,
Christophe

Your site’s looking great, Christophe. The pink and the animated link underlinings are nice!
And agreed about the snippets– I’m learning a bit already!

~ Caelan

Hi @ctuxboy,

Maybe I will add the functionality to override functions in the next updates of Meteorite. That way you would be able to copy only the function with the header content in a child theme and replace some scripts to your needs.

As mentioned above I added the some code to let users override the functions from inc/functions/functions-header.php. Make sure to update the theme if you want to use these functions.
Just copy the function code inside of if ( ! function_exists() ) : and endif; into your child themes function.php and do your changes there.

Regards,
Terra Themes

• This reply was modified 7 years, 7 months ago by terrathemes.

Hi @permaea,

Thanks for the compliment.
The pink color was a try ??

Happy that i can help you (and maybe others) with this snippet.
The underlined effect can you find on this website https://codepen.io/

If you want this effect, paste it in your Child themes styles.css:

/*PRIMARY MENU UNDERLINE EFFECT*/
#main-nav li a:hover {
  color: #ffffff !important;
}

#primary-menu a:before, a:after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -2px;
  background: #f0077b;
}
#primary-menu a:before {
  left: 0;
}
#primary-menu a:after {
  right: 0;
  background: #f0077b;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#primary-menu a:hover:before {
  background: #fff;
  width: 100%;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#primary-menu a:hover:after {
  background: transparent;
  width: 100%;
  transition: 0s;
}
/*.PRIMARY MENU UNDERLINE EFFECT*/

(If you want change the pink color, change this: #f0077b)

I have my own small webdesign business and the last months i found no inspiration for building my own website, but then finding this awesome Meteorite theme and gives me inspiration for start over a new website ??

The last years working with several page-builders (Divi, Visual Composer,…), and for my personal experiences is SiteOrigins pagebuilder the best choice. Why i think that: it has not al the bells and wistles, but for the most websites it is more then enough! And very important it is a robust, lightweigt, and stable builder.

Hi @terrathemes,

Thats great!

So you can read in my previous answer to @permaea, your theme gives me inspiration and motivation ??

Regards,
Christophe

Hi Christophe,

Thanks for the code, I’ll check it out!

~ Caelan