Support » Theme: Reykjavik » Customizing Header on Home Page

Customizing Header on Home Page

  • Resolved Velanche

    (@velanche)


    1 year, 6 months ago

    Hi There:
    I’ve been using the Reykjavik for awhile, and it’s serving my needs. But there have been a few things I’ve been putting off, and now I’d like to resolve them.

    Both have to do with the header image on the home page, which is about twice as tall as the displayed area. While I plan to crop the image to shorten the height, I have two objectives:

    One, I’d like to get rid of the dark layer, as it is making an already dark image that much more dark, and hard to see.

    Two, I’d like to adjust the height of the display area so that my image can be displayed. The image itself is currently 960×720. Again, I plan to crop the height, but too much will take away the important elements of the image.

    By the way, I have the image as a “featured image,” so not sure if that’s the correct way to display it.

    I’d appreciate any help to resolve this; thanks, very much!
    Velanche

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Dev1.addweb

    (@snehalb890)

    1 year, 5 months ago

    hey Velanche,

    To remove the dark layer go to Appearance ā†’ Customize ā†’ Additional CSS and enter the following code:

    .intro-special .wp-custom-header::before {
  background-color: transparent;
}

    and for image add below css code

    .intro-special {
  padding: 0;
  background-size: cover;
  background-position: 50% 25%;
  height: 600px;
}

    Hope above will help.
    Thanx.

    • This reply was modified 1 year, 5 months ago by Dev1.addweb.
    Velanche

    (@velanche)

    1 year, 5 months ago

    Thank you again, Snehal! I put all of this off for awhile, so Iā€™m really happy with how the page looks…much, much better.

    Have a good week, and again many thanks!
    V.

    Theme Author WebMan Design | Oliver Juhas

    (@webmandesign)

    1 year, 5 months ago

    Hi,

    Please use official support forum at https://support.webmandesign.eu for faster resolution turnaround.

    First, please note that the special intro was not designed for such usecase of yours. The image in special intro on homepage should be only decorative, not informative. If you need to display informative image in its full size on the page, and full width of content area, I suggest using a page builder instead. You can do much more with page builders. You can then simply use “No intro” page template to disable the default theme intro.

    As for the intro section overlay, you can only remove it with a custom CSS:

    .intro-special .wp-custom-header::before {
  display: none;
}

    However, you can also just control the overlay color and opacity in theme options in Appearance → Customize → Theme Options → Colors: Intro.

    Regards,

    Oliver

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Customizing Header on Home Page’ is closed to new replies.

Topic Tags

Views