[Resolved] Element – Header adjustments etc

[Jacob]

Hi GP-team, thanks for all your help!
I am making my own elements and have som questions here:

1. Would it be possible to keep the standard layout with the feautured image inside the content-box and with the Header above the image? (That is how it is for me without the header-element. But I want to pull in author image and name etc that should be above / in front of / covering the feautured image.
2. Either way I also would like to know – If I make a page header as in your tutorial and add Author elements, can I separate these so I get the H1 in the top of the futured image and the Author-info in the bottom? (I have been trying to experiment with the backgroun position, but only seems to give me options for lower and central areas).
3. How can I change color of the text in the Author name and size of the image of the author?

Thanks again for everything! You give amazing service!

[Tom]

Hi there,

1. There should be an option to disable the featured image in your Header Element (in the Page Hero settings). Is that checked for you? If so, uncheck it.

2. For sure, you just need to:

1. Give the Page Hero equal top/bottom padding.

2. Add this CSS:

.page-id-1388 .inside-page-hero {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.page-id-1388 .page-hero {
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

.page-id-1388 .inside-page-hero .hero-meta {
    margin-top: auto;
}

3. To change the color, adjust the link color in the Page Hero settings.

For the other stuff, try this CSS:

.hero-meta {
    display: flex;
    align-items: center;
}

.hero-meta img {
    max-width: 50px;
    margin-right: 10px;
}

[Jacob]

Hi Tom, thanks for your help. Something strange happened though..
1. First, when I uncheck the “Disable Featured Image” I get 2 images in the top and the author and header is pulled into upper one. How could I keep only the lower feautered image inside the content box (deafault) + with the header or author info covering the image?
2. I tried the CSS Code but all the text in the content changed into pink and when I deleted the code my background image (that I only want to use in the header) got pulled in as a background on the whole page. I have been trying all things to get it back to stay in the Header but I can not figure out what went wrong? I even deleted the Element and created a new one but the image still stays in the background (full Screen but the merge function is set to No-merge). How can I get it back to stay in the top with the title?
3. I will try as soon as I managed to get back the former settings of the element. One question here, should I add the CSS in “Simple CSS” or in “additional CSS”? Not sure what the difference is?

Thanks again!

[Tom]

Hi there,

1. Did you fix this? I’m seeing the featured image inside the content (not on top).

2. Not sure I understand – my CSS turned the text pink? It sounds like maybe you have some broken CSS elsewhere on the site, do you have much custom CSS? Adding my CSS shouldn’t have done that, and removing it should have brought things back to the way they were before it was added.

3. It doesn’t matter. The one difference is that Simple CSS minifies the CSS for you.

[Jacob]

Hi Tom.

1. No it is not fixed. I have now inserted your CSS and also unchecked the box “Disable Featured Image” . But I can see something is not right. I have 2 images 1 that is full screen and lays in the background of the whole page (looks terrible). 1 one that is just an image that lays inside the content (but the h1 title and author is inte uper image that is also in the background. It is really strange..

2. Yes, something happened when I added that code. the content turned ping (my default link collor). I took it away and now I added your code again and the text did not change this time. However nothing happened either. The author stays the same etc..

I have some CSS for buttons and underlined links I found on GeneratePress. The only other thing I have is a second author box that I used a CSS code for:

Author box CSS + button:
.author-box {
padding: 3%;
padding-bottom: 10px;
margin-top: 60px;
font-size: 0.9em;
background-color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 5px;
box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}
.author-box .avatar {
width: 250px;
height: auto;
border-radius: 100%;
margin-right: 30px;
}
h5.author-title {
margin-bottom: 0.1em;
font-weight: 600;
}
.author-description {
line-height: 1.6em
}
.author-links a {
margin-top: -1.5em;
font-size: 2em;
line-height: 2em;
float: left;
}

@media (max-width: 768px) {
.author-box {
padding: 20px;
padding-bottom: 0px;
margin-top: 100px;
flex-direction: column;
text-align: center;
}
.author-box .avatar {
margin-right: 0;
margin-bottom: 10px;
width: 100%;
margin-top: -35px;
}
.author-box .avatar img {
max-width: 100px;
}
.author-links a {
float: none;
align-self: center;
}
.author-description {
margin-bottom: -1.1em;
}
}

button,
html input[type=”button”],
input[type=”reset”],
input[type=”submit”],
a.button,
a.button:visited,
a.wp-block-button__link:not(.has-background) {
border-radius: 9px;
}

3. Ok, thanks. (Minifies in terms of making the page load faster?

Thanks Tom. Kind of worried about this now.

[Jacob]

I also have this additional CSS:

/* GeneratePress Site CSS */ .inside-article,
.sidebar .widget,
.comments-area {
border: 1px solid rgba(232, 234, 237, 1);
box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
}

/* Featured widget */
.sidebar .widget:first-child, .sidebar #nav_menu-3 {
background-color: #e86000;
color: #fff;
}
.sidebar #nav_menu-3 a, .sidebar #nav_menu-3 .widget-title {
color: #ffffff;
}

.sidebar .widget:first-child .widget-title,
.sidebar .widget:first-child a:not(.button) {
color: #fff;
}

.sidebar .widget li {
margin-bottom: 15px;
}

.button.light {
background: #e86000;
color: #000;
}

.button.light:hover {
background: #cc2e72;
color: #222;
}

.separate-containers .page-header {
background: transparent;
padding: 20px 0;
}

.page-header h1 {
font-size: 30px;
}

@media (min-width: 769px) {
.post-image-aligned-left .post-image img {
max-width: 300px;
}
} /* End GeneratePress Site CSS */

.entry-content a:hover {
text-decoration: underline;
}

.button.sun-flower,
.button.sun-flower:visited {
background: #cc2e72;
color:#FFF;
}

.button.sun-flower:hover,
.button.sun-flower:active {
background: #e86000;
color:#FFF;
}
.button.light {
border-width: 1.5px;
border-style: solid;
border-color: inherit;
}

@media (min-width: 769px) {
#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 1px; /* Adjust this change sticking position */
}
}

[Jacob]

Can I send you a screenshot?

[Tom]

I believe this is happening because you have broken HTML in your page hero. Can you share your page hero content so I can inspect it?

Let me know 🙂

[Jamal]

Jacob, might this be what you would like to achieve? Either using the normal featured image or using the page header with both container set to contained?

[Jacob]

Hi, thanks everybody. Here is the page hero content:
<h1>
{{post_title}}
</h1>

[avatar] {{post_author}}

[Jacob]

Please note that I use a plugin for images of my avatars.

Thanks!

[Tom]

That’s your full HTML in the page hero?

[Jacob]

Hey Tom. I’m not 100% sure what you mean by full HTML? But that is the only codes I put in the content field. I just want to learn how it works, so that’s all for now. Maybe I need to add something before: “[avatar] {{post_author}}”?

Thanks!

[Tom]

Weird, something is breaking the HTML. Does the background image issue go away if you remove the [avatar] shortcode?

[Jacob]

Hi Tom. Thanks. I cleared my cache and it turned out there was a Div> -thing that I could not see in the content I sent you. Sorry about this. I don’t use any cache plugin or CDN so I thought this could not happend.

No I have only this in the content area:
<h1>
{{post_title}}
</h1>
{{post_author}}
[avatar]

And the messed up image disappeared. However, the former problems still remains:

Here are your answers (please fing my commenst below each):

1. There should be an option to disable the featured image in your Header Element (in the Page Hero settings). Is that checked for you? If so, uncheck it.

– I have unchecked it and have now 2 images. (the upper 1 is with the auhor and stuff in it)

2. For sure, you just need to:

1. Give the Page Hero equal top/bottom padding.

– Does not work. Have tried padding 8 x 8 %, 10 x 10 % and 20 x 20%. Seems to stay the same.

2. Add this CSS:

.page-id-1388 .inside-page-hero {
display: flex;
flex-direction: column;
flex-grow: 1;
}

.page-id-1388 .page-hero {
min-height: 600px;
display: flex;
flex-direction: column;
}

.page-id-1388 .inside-page-hero .hero-meta {
margin-top: auto;
}
3. To change the color, adjust the link color in the Page Hero settings.

For the other stuff, try this CSS:

.hero-meta {
display: flex;
align-items: center;
}

.hero-meta img {
max-width: 50px;
margin-right: 10px;
}

I have added both codes and the H1 color + author remains the same no change in author image either..

Strange..

I’m one of thies unlucky gutýs when it comes to these kinds of things. Thanks for helping!

[Author]

Posts