masthead, contact form

amturner

Hello, I'm enjoying the JA Impact template - thank you.
I have a couple of questions re: masthead. I cannot seem to get the text content to align left. Additionally, is there any way to also specify the masthead image alignment to the top, so that when it is a reduced size, it doesn't cut off the image inappropriately?

With regards to the hero image on the home page, is there a way to remove the dark image mask on this module?

With regards to the contact page, I cannot find where to remove the "Drop Us a Line
Want to reach out? We’d love to hear from you!" text. Additionally, the "Contact" box links continues to display even when set to hide.

Any assistance is gratefully received.

saguaros

amturner Hi

For the masthead, I added this custom css for you:

.ja-masthead {
    background-position: top !important; /*align background image to top*/
}
.ja-masthead .ja-masthead-detail {
    text-align: left; /*left align masthead title*/
}
.ja-masthead .ja-masthead-detail .breadcrumb {
    justify-content: left; /*left align breadcumb*/
}

.acm-hero.style-1 .acm-hero-item::after {
  background: none !important; /*remove bg hero home*/
}

amturner With regards to the contact page, I cannot find where to remove the "Drop Us a Line
Want to reach out? We’d love to hear from you!" text. Additionally, the "Contact" box links continues to display even when set to hide.

In the file: /templates/ja_impact/html/com_contact/contact/default_form.php

and removed this:

  <?php echo '<h3 class="header-form mt-0">' . Text::_('COM_CONTACT_HEADER_FORM') . '</h3>'; ?>
  <p class="my-0"><?php echo Text::_('COM_CONTACT_DESCRIPTION_LABEL'); ?></p>

Also, I updated this file to remove that contact box section: /templates/ja_impact/html/com_contact/contact/default.php

defaultphp.zip

2kB

amturner

Thanks very much Saguaros. You've solved my contact form issue and the hero mask perfectly. I better understand how it is achieved now for future sites.

In the masthead, is it possible to also have the title (etc.) left aligned in tablet and phone view, in line with the logo? It seems on a tablet/phone, the alignment is left aligned hard up to the side of the device screen. It appears it is auto adjusting (responsive), but if the text is always left aligned, it should not be a problem if it is always left aligned in line with the logo.

Thank you.

saguaros

You mean the alignment for masthead's title, right?

You can try the following custom css:

@media (max-width: 1024px){
.ja-masthead .ja-masthead-detail {
    padding: 8rem 2rem !important;
}
}