Support » Fixing WordPress » How to change header opacity on a specific page

  • Hello wordpress forums, I am new to the forum and to website building. I’m currently building a website for my business and have a little problem. I’m using the Tesseract Theme by Tyler and i would like to change the opacity of the header for the ”contact page” only. Is it possible, and if yes, how is it done? Thanks a lot

Viewing 7 replies - 1 through 7 (of 7 total)
  • Please help

    I know nothing about your theme, and since you didn’t provide a link to your site its hard to give you specific advice. However, changing the opacity of an element is pretty easy using rgba. Play around with this page and I think you’ll have your answer quickly.

    To apply that opacity to the header of only one page, view your page source to get the page-id, then use that to target your css.

    You’ll be looking in source code for something like this…
    <body class="home page page-id-28 page-template page-template-page-home page-template-page-home-php>

    You know, a link to the site would go a long way in getting the specific answer much faster.

    If you want to change the opacity for just one page, I think you will have to create a special contact page. If I were you, I would start by making a tesseract child theme and making any changes you want in your child folder.

    Create a folder and call it “mytesseractchild”.

    Type the following in to a simple text editor (notepad) and save it as “style.css”.

     Theme Name:   Tesseract Child
     Theme URI:    http://yoursiteURL
     Description:  Tesseract Child Theme
     Author:       You and Tyler Moore
     Author URI:   Your URL
     Template:     Tesseract
     Version:      1.0.0
     License:      GNU General Public License v2 or later
     License URI:
     Text Domain:  tesseract
    Tesseract was created by Tyler Moore ( and is based on Underscores, (C) 2012-2014 Automattic, Inc.

    Type the following into a simple text editor (notepad) and save it as “functions.php”.

    enqueue the child theme style.css file
    with parent's style.css to ensure that
    your child's style takes precedence
    function child_theme_enqueue_styles() {
        $parent_style = 'parent-style';
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ));
    add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );

    Make sure there are ZERO spaces before the opening “<?php” and after the closing “?>“.

    Put “functions.php” and “style.css” into the new folder and upload them to your wordpress theme folder. Activate the child theme.

    Now, it’s safe to start making changes that won’t be lost every time the parent theme is upgraded.

    I took a peek at Tyler Moore’s Tesseract theme files and do not see a specific contact page.

    So, if you want to have a different opacity for the header on your contact page, I think you will have to create a specific contact page. (More on that in a separate reply….)

    For more information about child themes, please see:

    You can use one of the two answers above, but i prefer to use the page body. Using the chrome elements inspector, you can see the page-id-# class in the body class, and the styling by CSS.

    Okay. I’ve now looked at Tyler Moore’s section on creating a contact page.

    You should be able to follow his instructions for making a contact page within your child of Tesseract theme. If you have more questions about how to do that, you can comment on Tyler Moore’s YouTube video. It seems not unlikely that he will be able to answer your question because he knows exactly how his theme works.

    Did you see this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to change header opacity on a specific page’ is closed to new replies.