Customization of Grid Layout - Support | Kriesi.at

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
February 10, 2014 at 5:54 am #221521

Yeas
Participant

Hi guys,

First of all, thanks for your great theme. It’s a really cool and handy theme and we love it.
I have a question regarding the layout though:

We would like to make a news page where we will display posts with the category “News”. Right now, we’re using the advanced layout editor with the following settings:
-blog style: grid layout
-blog grid columns: 1
-define blog grid layout: title and excerpt -preview image size: thumbnail(150×150) -post number: 20
-pagination: yes
It is working perfectly, however we would like the thumbnail displayed on the left and the title and excerpt on the right. Is there any way to fix this? or do i have to edit the css code? If so, please tell me which file, where and how to edit.

Another question: is it possible to create a notification widget that tells you new post and custom post type updates in the same widget? It would be great if I could do that, but am I asking too much?

Any help would be appreciated. Thanks in advance.

Yeas

February 10, 2014 at 9:34 am #221590
Ismael
Moderator
Hi Yeas!

You can edit config-templatebuilder > avia-shortcodes > postslider.php, look for this code to modify the look of the blog grid layout:
```
 $markup = avia_markup_helper(array('context' => 'entry','echo'=>false));
					$output .= "<article class='slide-entry flex_column {$style} {$post_class} {$grid} {$extraClass} {$thumb_class}' $markup>";
					$output .= $thumbnail ? "<a href='{$link}' data-rel='slide-".avia_post_slider::$slide."' class='slide-image' title=''>{$thumbnail}</a>" : "";
					$output .= "<div class='slide-content'>";

                    $markup = avia_markup_helper(array('context' => 'entry_title','echo'=>false));
                    $output .= '<header class="entry-content-header">';
                    $output .= !empty($title) ? "<h3 class='slide-entry-title entry-title' $markup><a href='{$link}' title='".esc_attr(strip_tags($title))."'>".$title."</a></h3>" : '';
                    $output .= '</header>';

                    if($show_meta && !empty($excerpt))
					{
						$output .= "<div class='slide-meta'>";
						if ( $commentCount != "0" || comments_open($the_id) && $entry->post_type != 'portfolio')
						{
							$link_add = $commentCount === "0" ? "#respond" : "#comments";
							$text_add = $commentCount === "1" ? __('Comment', 'avia_framework' ) : __('Comments', 'avia_framework' );

							$output .= "<div class='slide-meta-comments'><a href='{$link}{$link_add}'>{$commentCount} {$text_add}</a></div><div class='slide-meta-del'>/</div>";
						}
                        $markup = avia_markup_helper(array('context' => 'entry_time','echo'=>false));
						$output .= "<time class='slide-meta-time updated' $markup>" .get_the_time(get_option('date_format'), $the_id)."</time>";
						$output .= "</div>";
					}
                    $markup = avia_markup_helper(array('context' => 'entry_content','echo'=>false));
					$output .= !empty($excerpt) ? "<div class='slide-entry-excerpt entry-content' $markup>".$excerpt."</div>" : "";

                    $output .= "</div>";
                    $output .= '<footer class="entry-footer"></footer>';
					$output .= "</article>";
```
Or you can add something like this on Quick CSS or custom.css to align the grid image to the left:
```
.slide-image {
width: 30%;
margin-right: 10px;
float: left;
}
```
Regards,
Ismael
February 10, 2014 at 11:42 am #221640

Yeas
Participant

Hi Ismael,

Thanks for your help! Thats exactly what I wanted!
However, I would like to have this layout only for some of my pages like my “News” page.
With this css code:

.slide-image {
width: 30%;
margin-right: 10px;
float: left;
}

I get all of my blog pages displayed that way. (for example, for my “Tours” post page I wanna use the masonry option) Can you please tell me what selector(s) to add to this code?

And again, I want to know if Enfold has a feature that tells you in one element the latest updates of posts and custom post types. Or is it something I have to deal with the plugins?

Thanks for your support.

Yeas

February 10, 2014 at 3:33 pm #221699
Yigit
Keymaster
Hey!

Please add following code to Quick CSS in Enfold theme options under Styling tab and change page ID to match your pages
```
.page-id-999 .slide-image {
width: 30%;
margin-right: 10px;
float: left;
}
```
You can right click on Chrome or Firefox and click Inspect elements to find the page ID

Regards,
Yigit
February 19, 2014 at 12:49 pm #226123

ariane1001
Participant

Hi Ismael,
I would like to edit config-templatebuilder > avia-shortcodes > postslider.php
I am using a child theme so I set up same path config-templatebuilder > avia-shortcodes > postslider.php and made the changes in the child theme postslider.php but it’s not working. Can’t see the changes in the front-end. It does show the changes when I modify postslider.php in the Enfold theme folder.
What is going wrong?
I appriciate your help.

Ariane

February 21, 2014 at 1:03 pm #227435
Dude
Participant
Hi!

If you want to load a custom shortcode file insert this code into the child theme functions.php:
```
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
	$template_url = get_stylesheet_directory();
    	array_unshift($paths, $template_url.'/shortcodes/');

	return $paths;
}
```
and then create a “shortcodes” folder inside your child theme folder. Afterwards place your shortcode files (i.e. postslider.php) into the shortcodes folder.

Cheers!
Peter
May 9, 2016 at 4:53 pm #629355

dannhanks
Participant

Hi, I have used the Advanced Custom Fields plugin and am ytrying to load some of this info into the blog grid – I have successfully got the modifications into the child theme but no matter where I place the code for the custom field in the postslider.php file, it loads it at the very top of the page – above all the content – when there are more than 1, it loads several above all the content – can I get this to load into the grid?
my code looks similar to this:

$output .= !empty($excerpt) ? “<div class=’slide-entry-excerpt entry-content’ $markup>”.$excerpt.”</div>” : “”;
$output .= the_field(‘excerpt’);
$output .= “</div>”;
$output .= ‘<footer class=”entry-footer”>’;

website still in development so only postsed a private link below.
thanks

May 10, 2016 at 10:44 am #629789

dannhanks
Participant

hi, as this job was time critical, I have had to move past this and come up with an alternatve for my client.

I really need to load some custom content into this template though.

Its odd – if I add some basic html to this example <div>this is a test</div>, I can get this to appear whereever I want, as soon as I am trying to load custom data from Advanced custom fields, it ignores where I put it in the template and just adds it to the top of the page. I even tried <div>this is a test <my custom content></div> this loaded the ‘this is a test’ text where I wanted it to go but threw the advanced custom fields data to the top of the page.

May 11, 2016 at 8:30 am #630515

Ismael
Moderator

Hi,

Use get_field($field_name) instead of the_field() function.

UPDATE: The code are being formatted when I post it here. Please get it from here: http://pastebin.com/y0k3LWNA

Best regards,
Ismael

May 12, 2016 at 11:37 am #631273

dannhanks
Participant

Thanks Ismael!!!
that worked perfectly!
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Customization of Grid Layout’ is closed to new replies.