- This topic has 12 replies, 3 voices, and was last updated 5 months ago by
David.
-
AuthorPosts
-
September 30, 2020 at 3:45 pm #1466168
Jatin
Hi Guys,
I think it may be possible to show the Post Title and Meta Information over Featured Image which will be a clean way to show the single page. Do you know if there is any custom CSS i can use to achieve this. Is it even possible via Generate Press.
Example Pics are in Private Info Box.
September 30, 2020 at 6:17 pm #1466284Elvin
StaffCustomer SupportYou can definitely do that with PHP filters.
add_filter( 'generate_before_content' ,function($output){ if(is_single() && has_post_thumbnail()){ echo '<div class="generate-merge-featured-with-entry-header">'; } else { return $output; } }, 1, 1); add_filter( 'generate_after_entry_header' ,function($output){ if(is_single() && has_post_thumbnail()){ echo '</div>'; }else { return $output; } }, 9999, 1); add_action( 'wp_head', function () { if(is_single() && has_post_thumbnail()){ ?> <style> .single .generate-merge-featured-with-entry-header{ position:relative; } .single header.entry-header{ position:absolute; bottom: 5%; left: 5%; top: auto; right: auto; } </style> <?php } } );
What this does is, it wraps the featured image and the entry header in one div if the page is a single post page and has post thumbnail. It then styles the newly wrapped elements to display similar to your reference image.
Further styling will be needed for other things incase you want to add more.:)
A wise man once said:
"Have you cleared your cache?"September 30, 2020 at 11:41 pm #1466519Jatin
Thanks Elvin which section of my site code this needs to be added ?
Can you please provide some direction on how to add the code. Is it in a hook ? Or functions file?October 1, 2020 at 1:36 am #1466664Jatin
Hi Elvin, I searched around the forum and found a Plugin call pluginception now. I have adjusted the height and width etc. But how can i change the background of the text. Its not visible properly so i wanted a white background to the text to fix this and also to the Meta. Screenshot sent in private info box.
Also Adjustment of the text as its touching the borders of the image on both sides of image.> It does not look good on Mobile as well
> Can i show top header bar as links rather than hamburger menu as it shows on my desktop.October 1, 2020 at 4:24 am #1466917David
StaffCustomer SupportHi there,
can you provide a link to your site so we can help solve the issue?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 5:57 am #1467043Jatin
Site link
October 1, 2020 at 8:51 am #1467560David
StaffCustomer SupportHmmm… i am not sure this is the best way to do this.
Instead of that – it may be easier to create a Header Element for your single posts:https://docs.generatepress.com/article/header-element-overview/
By default this will appear above the main content.
But we can move it to the position of the Featured Image with this PHP Snippet:
add_filter( 'generate_page_hero_location', function( $location ) { if ( is_single() ) { $location = 'generate_before_content'; } return $location; } );
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 12:34 pm #1467932Jatin
Thanks David. I have read about the Header Element and adjusted it to make it work with your code. However, two things if you can help me with.
1) I added a black background color to the header element for H1 tag and paragraph tag as you can see in the screenshot: https://imgur.com/ig2RSGG. The information background is spanning the who image. I want to span it only till the Information is written. https://imgur.com/FAXAaNj
2) Can i make the header and meta background transparent [best to have it, if not possible then still ok]
October 1, 2020 at 5:44 pm #1468224Elvin
StaffCustomer Support1) I added a black background color to the header element for H1 tag and paragraph tag as you can see in the screenshot: https://imgur.com/ig2RSGG. The information background is spanning the who image. I want to span it only till the Information is written. https://imgur.com/FAXAaNj
Add inline block so it doesn’t take 100% of the container.
display: inline-block;
2) Can i make the header and meta background transparent [best to have it, if not possible then still ok]
It’s definitely possible.
Change the
background-color
from black torgba()
values so you can use alpha/transparency.Example:
background-color: rgba(0,0,0,0.5);
This rgba color value is of black color with 0.5 or 50% opacity.
You can try picking your rgba color value here. http://www.menucool.com/rgba-color-picker
A wise man once said:
"Have you cleared your cache?"October 2, 2020 at 12:43 am #1468572Jatin
Thanks Elvin, It worked fine for Paragraph tag but not for H1 tag. The Bold Code in H1 tag does not work.
So Meta info is displaying correctly now, just the header bit is left.<h1 style=”background-color: black”; display: inline-block;>
{{post_title}}
</h1>
<p style=”background-color: rgba(0,0,0,0.5); display: inline-block;>
{{post_author}} | {{post_date}} <br/>
{{post_terms.category}}
</p>Some more info in Private info box.
October 2, 2020 at 4:31 am #1468847David
StaffCustomer SupportEdit your Header Element HTML and wrap the H1 in a div like so:
<div class="heading-wrap"> <h1>{{post_title}}</h1> </div>
Then add this CSS:
.heading-wrap h1 { display: inline-block; background-color: #000; }
Note this also adds the background color as well – so no need to add it as an inline style.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 2, 2020 at 4:48 am #1468880Jatin
Perfect Thanks David.
October 2, 2020 at 6:05 am #1469004David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.