Community Forums › Forums › Archived Forums › Design Tips and Tricks › How get individual image-headers for each page, with special title-effect
Tagged: different headers, site-header
- This topic has 32 replies, 4 voices, and was last updated 8 years, 1 month ago by
Dan-cer.
-
AuthorPosts
-
December 26, 2016 at 5:33 am #198208
Dan-cer
MemberHi,
after installing Lifestyle Pro Theme in my test-site, I modified the header as an image. See here.
My goal is to relaunch my entire website, that is made with Avada Theme, with using Genesis + Lifestyle.
As You can see when visiting my website, there are several pages with individual image-headers. Click on each menu-item, and You see what I mean.My 1. question is: How and where can I customize the Child theme - code to get individual headers with Genesis for each page?
2. question: The used Avada "Fusion Slider" provides an effect for flowing-in of the header-title, optionally with semi-transparent background, as You can see on my website. How can I reproduce that with Genesis-code?Thank You in advance!
kind regards
http://www.genesis.jungvital.com
RainerDecember 26, 2016 at 6:35 am #198210Brad Dalton
Participant1. You can use a plugin like WP Display Header or custom PHP code.
December 26, 2016 at 7:36 am #198213Dan-cer
MemberThank You for Your reply, Brad!
I installed the plugin but can't see it. May be because my Child Theme has no header.php. Only function.php, frontpage.php, theme-defaults.php and page_landing.php.
In plugin-FAQ we read:
What do I need in the
header.php
file to make the plugin work seamlessly?
To make it work in your header.php file all you need is a header_image() call like so:
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
Can I put this code into the custom css? Or where to put in?
kind regards
RainerDecember 26, 2016 at 8:06 am #198215Brad Dalton
ParticipantDecember 26, 2016 at 9:15 am #198217Dan-cer
MemberMay be it is not working here?
See screenshotDecember 26, 2016 at 9:33 am #198218Dan-cer
MemberHi Brad,
sorry but I can't get it. To add an image into the content from a post or page doesn't provide a header as I want to have.
Maybe because the item 'header' is used in different modes there is a misunderstanding?
Look here: [img]http://up.picr.de/27835954uj.jpg[/img] at the screenshot, what kind of header-image I mean. Size is 1200x328 px.
In Lifestyle Pro Child Theme there is an option for 'header-image'. But with smaller size: 320x110 px. That isn't what I want.
In custom css I inserted this code:
.site-header {background:url("http://www.genesis.jungvital.com/wp-content/uploads/2016/12/orange-rose.jpg"); height: 328px;margin-top: -55px; no-repeat;}
And the URL of this background should be changeble. All other header-images are of the same size: 1200x328 px, as You can see on my website.December 26, 2016 at 3:17 pm #198232bluebird
MemberHi Rainer,
(Brad, tell me if this is the wrong approach, as I am still new to Genesis and its child themes)....
Another avenue to explore would be to add a custom body class to each page (via a custom template for each custom page) that you want to apply custom styles to like so:
add_filter( 'body_class', 'childthemeprefix_new_body_class' ); function childthemeprefix_spotify_body_class( $classes ) { $classes[] = 'new-page'; return $classes; }
Then select each header like so:
.new-page .site-header{ //your styles here..... }
I guess it all depends on how much customization you plan on implementing.
Cheers:-)
December 26, 2016 at 10:14 pm #198249Brad Dalton
ParticipantDecember 26, 2016 at 10:32 pm #198252Dan-cer
MemberThank You for Your answers, bluebird and Brad!
I will have a look on it in 3 days because now I'm going on a trip.kind regards
RainerDecember 29, 2016 at 3:41 am #198405Dan-cer
Member@braddalton
I can't modify the CSS by editing the child theme's style.css file. I tried to exchange my inline custom css for the new header-image with editing ".site-header", but although Í saved and updated the file, nothing happened.
Also the "Design Palette Pro"-plugin can't save anything. Saving is hanging. I gave the plugin support access to admin-panel and hope to clear that.
At the moment I would prefer to get a freelancer to do the whole job.
Could You recommend one?
A worked already with a freelancer who is used to Genesis but he is on holidays...kind regards
RainerDecember 29, 2016 at 4:24 am #198406Brad Dalton
ParticipantYes, contact me please and clarify exactly what you want [email protected]
As i understand it, you want to add different site headers for all single posts and single pages?
December 29, 2016 at 6:14 am #198408Dan-cer
MemberYes, I want.
As I wrote You a few minutes ago via email, I have hired a freelancer now to do the main jobs.
If there are any questions left, I'll come back in a few days.December 31, 2016 at 1:28 pm #198533earthatoz
MemberYou can also use the siteorigin plugin in wordpress. I used it, really helpful to design your webpage
January 2, 2017 at 7:08 am #198589Dan-cer
MemberThank You, I will check that.
One important question:
Is it possible to edit the "style.css" of my "LifeStyle Pro Theme" directly? I couldn't do that as I wrote above, but the "Rainmaker Digital Support" told me:Hi Rainer,
You can edit the child theme directly. The child theme is never upgraded.
Parent theme updates should not affect styling of the child theme as the parent theme css is not imported into the child theme.Who can give me an answer to this topic?
Thank You very much in advance!
kind regards
RainerJanuary 2, 2017 at 7:17 am #198590Brad Dalton
ParticipantYes, you can edit the original CSS rule in the style.css file or copy it to the end of the same file and modify it there.
January 2, 2017 at 7:21 am #198591Dan-cer
MemberThank You for this quick reply!
And - by the way - all the best for the new year. This is to You and all others who read this!!!
January 6, 2017 at 6:51 am #198851Dan-cer
MemberUpdate: Now I am fine with individual headers. With Brads suggestion to use the WP-Display-Header - plugin I could manage it, and with the tutorial from Brad.
Thank You!!!
There are 2 questions left:
1. Display of header-title individually - for each post/page a different title
2. Special header-title - effects:
2a. The title is sliding in from any direction
2b. there is a half-transparent background for the titleYou can see both sliding-in and (on some of the pages/posts) on my website (that is still running with Avada theme until all topics are cleared),
Who can give me another hint, or even a tutorial, to get this work?
thank you again in advance!
January 7, 2017 at 1:55 am #198919Brad Dalton
Participant1. for each post/page a different title
Do you want to add the title manually for each single post/page or use the post/page title as the site title?
January 7, 2017 at 1:57 am #198920Dan-cer
MemberI want to add the title manually as it is different from the post/page title.
January 7, 2017 at 2:00 am #198921Brad Dalton
ParticipantSo you want to display both an image and title over the image in the header?
-
AuthorPosts
- The topic ‘How get individual image-headers for each page, with special title-effect’ is closed to new replies.