Support » Theme: Twenty Seventeen » Change header look

Change header look

  • Resolved extreme4all

    (@extreme4all)


    2 years, 3 months ago

    I have a bootstrap header that looks great and I need it in this theme how can i do it.
    image of header
    so they can still upload an image but then this shadow has to go over it:

    #page-sub-header{
    position: relative;
    padding-top: 5rem;
    padding-bottom: 0;
    text-align: center;
    font-size: 1.25rem;
    background-size: cover !important;
    box-shadow: inset 0 0 0 1000px rgba(35, 220, 160, 0.6);
}

    for the dynamic element i have used this:
    https://codepen.io/LeonGr/pen/yginI
    but i changed the following in js
    (page-sub-header) is the header i want it to go over

    canvas.width = document.getElementById('page-sub-header').clientWidth;
canvas.height = document.getElementById('page-sub-header').clientHeight;

    and i changed the css

    #canvas{
    position:absolute;
    top:0px;
    left:0px;
}

    i can’t get this to work. i see an obvious diffrence; i do the following for the header image.
    <div id="page-sub-header" <?php if(has_header_image()) { ?>style="background-image: url('<?php header_image(); ?>');" <?php } ?>>

    what i think i need to do is get that uploaded image to the background and the background just as big as it needs to be for logo and uploaded text. Could you guys give me a helping hand?

    EDIT: i can change the height of the header with:
    great post that helped me its not as dynamic as i want but okay

    • This topic was modified 2 years, 3 months ago by extreme4all. Reason: grammar
    • This topic was modified 2 years, 3 months ago by extreme4all. Reason: EDIT 1: Header size

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    2 years, 3 months ago

    I’m not sure what you’re trying to do, can you go into more detail in words or even a bullet point list of what you’re trying to achieve?

    Thread Starter extreme4all

    (@extreme4all)

    2 years, 3 months ago

    Header height needs to be dynamic with with the content inside of the header.

    Shadow over header image.

    Canvas over header image.

    Thread Starter extreme4all

    (@extreme4all)

    2 years, 3 months ago

    I did the following to achieve this: (http://www.akkade.be)
    Extra CSS

    
.wp-custom-header{
	outline: 100vh solid rgba(35, 220, 160, 0.6) !important;
	  outline-offset: -100vh;
	  overflow: hidden;
	  position: relative;
	height:50vh;
  
}
.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe{
	  position:static;
}
/*Computer screen */
@media screen and (min-width: 48em) {
	.twentyseventeen-front-page.has-header-image .custom-header-image {
	/*height: 1200px;*/
	/*height: 100vh;*/
	height: 50vh;
	/*max-height: 100%;*/
	/*overflow: hidden;*/
	}
}

/* Mobile screen*/
.has-header-image.twentyseventeen-front-page .custom-header {
	/*display: table;*/
	/*height: 300px;*/
	/*height: 75vh;*/
	height: 50vh;
	/*width: 100%;*/
}

/* Computer screen with logged in user and admin bar showing on front end*/
@media screen and (min-width: 48em) {
	.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
	/*height: calc(100vh - 32px);*/
	height: calc(50vh - 32px);
	}
}
.site-branding {
	text-align:center;
}
.site-branding {
	text-align:center;
}
#canvas{
    position:absolute;
    top:0px;
    left:0px;
      
}

    i moved (template-parts/header/site-branding.php):
    <?php the_custom_logo(); ?>
    inside
    <div class="site-branding-text"> //HERE </div>

    added some javascript for the canvas (width & height = getElementById(“custom-header”). width & height
    https://codepen.io/LeonGr/pen/yginI
    and added the canvas under custom-header and gave custom-header id=”custom-header”
    in the template-parts/header/header-image.php

    My problem now is that this does not work on anything other then the first page.

    Thread Starter extreme4all

    (@extreme4all)

    2 years, 3 months ago

    resolved other question for new issue

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change header look’ is closed to new replies.

Topic Tags

Views