-
Posts
-
I created a pretty complex site layout using the Avia Layout Builder here (it’s still in the beginning stages):
http://support.girlmeetslake.com/home/
I’m using a color section with a large fixed image set as the background, one fifth column set to show a widget area and three fifths column to show the blog posts that also has an image set as the background.
I’d like to edit the single.php to reflect the large image as a background, the left sidebar menu and the blog content to show up in a three fifths column with a paper background. What would be the best way to go about editing that file while still using the php to dynamically pull things like the sidebar items, etc.?
Hey Andrea!
Yay! I’ve been hoping I’d start to see the level of customization with the layout builder.
Lets see if we can figure out an easy way to make that happen. What do you have so far for the single.php (what steps taken as I see its not quite rendering clearly) ?
Regards,
DevinWell, I used inspect element to copy the code from the home page and then where the content was inside of the three fifths column I tried putting the:
<?php
get_template_part( ‘includes/loop’, ‘index’ );
get_template_part( ‘includes/related-posts’);
comments_template( ‘/includes/comments.php’);
?>But that seemed to break it (which is why it was showing up all funky).
But then I realized that you could set the transparency menu per post, and so I was hoping to not cut and past ALL of the code from the home page, merely the code that sets the background image and columns ( div class=”main”).
So ideally it’ll be the same layout as the home page but instead of the feed its just a single post correct? Is that the big preview image setting?
This is how I would approach it: First bring the single.php down to the child theme which you’ve probably already done. Then where it calls for the index loop, change that to some other name. Ex:
get_template_part( 'includes/loop', 'index' );to
get_template_part( 'loop', 'custom-single' );Or you can give it more theme/site flavor. With the file now pointing to a different loop file you can create it by duplicating the loop-index.php file in the includes folder and put it directly in your child theme root folder then renaming it to match your new get_template_part name. Since the get_template_part no longer points to the includes folder it won’t look in that folder. If you want to keep the same file structure then keep it pointing to that folder and put it in there.
This leaves us with a single file that should still be doing exactly what it does by default with the theme but points to our own custom loop where things can get customized.
Before trying to make anything dynamic, try simply adding in the divs where you want them into the single.php and modifying the wrappers wherever they are supposed to be dynamic in loop-custom-single.php (or whatever you named it).
This is in steps so bare with me :)
So I was able to create a template that I think works well.
The one thing I can’t figure out is that in mobile everything works fine for individual posts:
http://support.girlmeetslake.com/newest-obsession-white-light-fixtures/
But on the main page, it’s not going by the percentages I set and isn’t shrinking down properly:
http://support.girlmeetslake.com/home
Any thoughts about what I did wrong?
I also can figure out why the three-fifths column is not sitting NEXT to the one-fifth column in the single.pho version – it’s acting like the one-fifth column isn’t there. Hmph! Thoughts?
What did you set manually for each? Its difficult to say what could be happening without seeing the source for each and what has already been done.
It looks…incorrect right now but there is also some caching going on with the custom files so it adds a layer of obscurity to inspecting.
http://support.girlmeetslake.com/newest-obsession-white-light-fixtures/
<?php
global $avia_config;get_header();
if( get_post_meta(get_the_ID(), ‘header’, true) != ‘no’) echo avia_title();
?><div id=”av_section_1″ class=”avia-section main_color avia-section-default avia-no-border-styling avia-bg-style-fixed avia-full-stretch avia-builder-el-0 avia-builder-el-no-sibling av-minimum-height av-minimum-height-100 container_wrap fullsize” style=”background-repeat: no-repeat; background-image: url(http://i0.wp.com/support.girlmeetslake.com/wp-content/uploads/2014/08/background.jpg?resize=2500%2C1563); background-attachment: fixed; background-position: top center; ” data-section-bg-repeat=”stretch”>
<div class=”container”>
<main role=”main” itemprop=”mainContentOfPage” class=”template-page content twelve alpha units”>
<div class=”post-entry post-entry-type-page post-entry-25″>
<div class=”entry-content-wrapper clearfix”>
<div class=”flex_column av_one_fifth first avia-builder-el-1 el_before_av_three_fifth avia-builder-el-first ” style=”position: absolute; left: 0px; top: 0px;”>
<div class=”avia-builder-widget-area clearfix avia-builder-el-2 avia-builder-el-no-sibling “>
<section id=”nav_menu-2″ class=”widget clearfix widget_nav_menu” style=”position: relative;”>
<div class=”menu-menu-container”>
<ul id=”menu-menu” class=”menu”>
<li id=”menu-item-37″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-37″>home
<li id=”menu-item-38″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-38″>about
<li id=”menu-item-39″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-39″>portfolio
<li id=”menu-item-40″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-40″>mantra
<li id=”menu-item-41″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-41″>how it works
<li id=”menu-item-42″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-42″>contact</div>
<span class=”seperator extralight-border”></span>
</section>
</div>
</div><div class=”flex_column av_three_fifth avia-builder-el-3 el_after_av_one_fifth avia-builder-el-last “>
<div style=”height:5px” class=”hr hr-invisible avia-builder-el-4 el_before_av_heading avia-builder-el-first “><span class=”hr-inner”><span class=”hr-inner-style”></span></span></div>
<div style=”padding-bottom:10px;” class=”av-special-heading av-special-heading-h1 blockquote modern-quote modern-centered avia-builder-el-5 el_after_av_hr el_before_av_textblock “><h1 class=”av-special-heading-tag” itemprop=”headline” style=”padding-bottom:10px;”>MELINDA FARANETTA</h1><div class=”av-subheading av-subheading_below” style=”font-size:29px;”><p>Homes that love the people inside.</p></div><div class=”special-heading-border”><div class=”special-heading-inner-border”></div></div></div>
<section class=”av_textblock_section” itemscope=”itemscope” itemtype=”https://schema.org/CreativeWork”><div class=”avia_textblock ” itemprop=”text”><p>
</p></div></section>
<?php
get_template_part( ‘includes/loop’, ‘custom-single’);
get_template_part( ‘includes/related-posts’);
comments_template( ‘/includes/comments.php’);
?>
</div></div>
</div>
</main>
</div><!–end builder template–>
</div><?php get_footer(); ?>
Can you throw it in a gist or http://pastebin.com/ file. That way I can copy it over to a text editor and get the easy syntax highlighting :)
Thank you! :)
I think the key here is that you have the column set as position: absolute with your inline styling instead of the content inside of it.
I would suggest removing it anyway and then set it with your stylesheet and media queries instead of inline.
Thanks Devin – it worked great.
Any chance you also know why the home page isn’t responsive but the rest of the pages are?
http://support.girlmeetslake.com/home/
vs.
http://support.girlmeetslake.com/newest-obsession-white-light-fixtures/
It seems that it’s being caused by the Blog Post Content Element – all of the other pages that don’t have that content element work fine.
- The topic ‘Create Blog Post Template’ is closed to new replies.