-
Posts
-
Hi,
How would I add different images to the Enfold alternative content area while keeping the page name text on the left and the ‘you are here’ location text on the right visible? And how would I make that the text font larger if needed?
Thank you!
Steve
Hey Steve!
You can use this code (place it into the child theme functions.php or enfold/functions.php):
function add_stuff_before_breadcrumbs() { echo '<div class="stretch_full container_wrap alternate_color light_bg_color title_container"><div class="container">'; echo '<img src="http://kriesi.at/wp-content/themes/kriesi/images/enfold.jpg" alt="" title="" />'; echo '</div></div>'; } add_action('ava_after_main_container', 'add_stuff_before_breadcrumbs');to add an image above the breadcrumb. Obviously you need to replace “http://kriesi.at/wp-content/themes/kriesi/images/enfold.jpg” with your custom image url. If you want to change the image based on the page id replace:
echo '<img src="http://kriesi.at/wp-content/themes/kriesi/images/enfold.jpg" alt="" title="" />';with
$img = "http://kriesi.at/wp-content/themes/kriesi/images/enfold.jpg"; if(is_page(array(20,30))) $img = "http://mywebsite/image2.jpg"; if(is_page(array(14,60))) $img = "http://mywebsite/image3.jpg"; echo '<img src="'.$img.'" alt="" title="" />';and replace the first image url with the default image, the http://mywebsite/image2.jpg url with the second image, etc. and adjust the page ids (20, 30) and (14, 60), etc.
14 and 60 would display the image “http://mywebsite/image3.jpg” in the sample code above.Best regards,
PeterHi Dude,
Thank you for the code!
I added the first part of the code in to my localhost test site and realized this put the image above the page title and breadcrumbs area. However, what I’m looking for is adding the image to the page title and breadcrumbs area that spans the entire width of the page and is height of the picture (or can be adjustable with css). And one is still able to see the page title and the breadcrumbs text that would be above the image. Is this possible in Enfold?
I’m trying to achieve something similar to this website (this is where I got the idea): http://www.austinmanualtherapy.com/services.html
And do you know the best way to find the page ids that come in sets (xx,xx) as you referenced above and is needed for the array?
Thank you!
Steve
Hey Steve!
Try adding this to the Quick CSS:
.title_container { background: url(https://kriesi.at/wp-content/themes/kriesi/images/enfold.jpg) top center no-repeat; }For specific pages:
.page-id-1195 .title_container { background: url(https://kriesi.at/wp-content/themes/kriesi/images/enfold.jpg) top center no-repeat; }You can find the Page IDs when you edit the page.
Cheers!
JosueHi Josue,
That worked perfectly!
I was also able to figure out how to adjust the height of that space by adding this code:
min-height: 140px !important;However, I wasn’t able to figure out how to adjust the page title and breadcrumbs up or down in precise increments. It probably starts off as: .entry-title {align-content: xxx;} but I’m not sure which alignment property to use to be able to place the text up or down in pixels. Do you happen to know the code for this?
Thank you!
Steve
Hi Steve!
Try:
.entry-title{ position: relative; top: 20px; /* Change this value, it can be negative */ }Best regards,
JosueHi Josue,
Thanks again for the code.
This is what I got to work:
/* Increases the height of the Title Container */
.title_container {
min-height: 140px !important;
}/* Moves the vertical placement of the Page Title down; values can be negative too */
.main-title.entry-title{
position: relative;
top: 80px;
}/*Moves the vertical placement of the page Breadcrumbs down and keeps it on the right */
.breadcrumb.breadcrumbs.avia-breadcrumbs {
position: relative;
left: 800px;
top: 60px;
}Do you have any ideas for the tablet and mobile views? This looks good on my desktop view, but the mobile image, page title, and breadcrumbs look off. Test site: http://test4.specialized-pt.com/new-patients/your-first-visit/
Thank you,
Steve
Hey Steve!
Try adding this:
@media only screen and (max-width: 767px) { .title_container { min-height: 30px !important; } .main-title.entry-title{ top: 15px !important; } }Cheers!
JosueHi Josue,
Thank you once again! I added this for the mobile page title and breadcrumbs and it looks good on my phone:
@media only screen and (max-width: 767px) {
.title_container {
min-height: 30px !important;
}
.main-title.entry-title{
top: 10px !important;
}
.breadcrumb.breadcrumbs.avia-breadcrumbs {
position: relative;
left: 0px;
top: 10px;
}
}However, on the mobile view, I’m only seeing a middle portion of my title container image. Shouldn’t the mobile image in this area look the same as the desktop view but much smaller?
Thank you!
Steve
Not by default, but you can try adding this rule to the mobile media query:
.title_container { background-size: cover !important; }Cheers!
JosueHi Josue,
Thank you! This code shows more of the image but not the full one. I may just go with an image for the desktop view and use the default for tablet and mobile views.
Thanks again for your help and expertize!
Steve
Yep, that would be better. Just to add there is another background-size value you can use:
.title_container { background-size: contain !important; }Regards,
Josue
- You must be logged in to reply to this topic.