Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Post-Kicker, -Byline & -Footer (http://forum.bytesforall.com/forumdisplay.php?f=17)
-   -   [SOLVED] How to create grid style for the posts (http://forum.bytesforall.com/showthread.php?t=4220)

m0r6h3us Nov 5, 2009 01:37 AM

[SOLVED] How to create grid style for the posts
 
Hi and thaaaanks soo much for the theme, it's wonderful!!!!
i would like to know if it's possibile change the style of the central page in something like a magazine news, that could be like that for the first page:

----------------------
-xxxxxxxxxxxxxxxxxxxx-
-xxxxxxxxxxxxxxxxxxx -
----------------------
-xxxxxxxxx-xxxxxxxxxx-
-xxxxxxxxx-xxxxxxxxxx-
----------------------
-xxxxxx-xxxxxx-xxxxxx-
-xxxxxx-xxxxxx-xxxxxx-
----------------------
and for the others page only in 3 columns...

Any ideas?

juggledad Nov 5, 2009 08:27 AM

not sure if I understand the question. Do you mean teh center colum where the posts go? If so there are styling options for the entire center column and for the area that holds the posts. Go take a look at ATO->Style POSTS & PAGES

m0r6h3us Nov 5, 2009 08:36 AM

Hi, thanks for your answer.
In the truth, i was looking for something like that:

last post: 100% width
2 & 3 posts: 50 %
all the others: 33%

I think it's more like magazine tamplate than others, and i found this one:
http://wpgpl.com/wp-content/uploads/...ress-theme.jpg

but i prefer made this changes in the atahualpa theme because I think it's a very powerful template.

juggledad Nov 5, 2009 12:20 PM

WIth the theme as is, the anwser is no. The center column is a cell of a table. You could try puting widgets in the center area each displaying one or more posts or digging into the code or making a template, but it's not a theme option that is esaily done...as far as I know...

m0r6h3us Nov 5, 2009 04:01 PM

Ok, thank u.
Wherever, if can be interesting for the community, when I'll made these modify, i should post here the code... i think I need to add just few rows in the css file and pesonalize the central loop... all of that can be done just in the theme options....

juggledad Nov 5, 2009 04:07 PM

if you get it to work and will post the code in this thread, that would be great. this way others can benefit.

m0r6h3us Nov 5, 2009 04:09 PM

perfect... I'll keep in mind ;)

sccornwell Nov 6, 2009 03:11 PM

Yes, please post when you have it!

m0r6h3us Nov 7, 2009 03:05 PM

I'm working on... ;)

m0r6h3us Nov 11, 2009 12:58 PM

Ok guys,
u can see a preview here:
http://www.rionero24ore.com/

The template is under test, if u can help me to find any bugs would be perfect.
Tell me what u think about
;)

juggledad Nov 11, 2009 01:12 PM

looks good!

rightofu Nov 11, 2009 07:39 PM

nice work, Ive been looking for this

m0r6h3us Nov 12, 2009 02:04 AM

I'm testing the application, soon I'll post here the code.
The template will work better if the number of posts to show in frontpage is a multiple of 3.
Yesterday I fixed a bug (when the last post in a page is less then a 3 multiple).
I used a function to show a preview image, I had to read if there is some copyright.
Done that, I'll made a smart "how to" to explain my work, but I can tell u it's very simple.
Just adding code in the Atahualpa lood, adding a check rule at the end of the loop, adding few rows in the css form and just 1 functions in the functions file, the work it's done.

m0r6h3us Nov 15, 2009 10:16 AM

I founded around on Internet the function I used, so i think it's possible re-use it :).
Before we started, please backup your previous settings.



So... to have your grid view like 1-2-3-3...3 u have to modify (Atahualpa interface):



1. Style & edit CENTER COLUMN->The Loop :
------------------------------------------------------------------------------------------------

<?php

//WordPress Theme: Atahualpa 3.4.1
//Modified by: Adelio Fioritto (http://www.adeliofioritto.com)
//Abstract: Enable grid view for the Atahualpa theme in 1-2-3 column
//Preview: http://www.rionero24ore.com

// For the frontpage... start editing here
if ( is_front_page() ) { //check frontpage

$paged = get_query_var('paged'); //retrieve the global page number
$post_numbers=get_query_var('posts_per_page'); //retrieve the global variable 'how many post to show'
?>

<?php /* Post Container starts here */
if ( function_exists('post_class') ) { ?>
<?php } else { ?>
<?php } ?>
<?php $current_post=$bfa_ata['postcount']; //retrieve the current post number ?>

<?php if ($paged==0) { ?>
<?php if ($current_post==1){?> <div id="new_central_loop"> <?php } ?>
<?php if ($current_post==2){?> <div id="new_central_loop"><div id="new_left_pos_50"> <?php } ?>
<?php if ($current_post==3){?> <div id="new_right_pos_50"> <?php }?>
<?php if ((($current_post-1)%3==0) && ($current_post>3)) {?> <div id="new_central_loop"><div id="new_left_pos_30"> <?php } ?>
<?php if ((($current_post-2)%3==0) && ($current_post>3)) {?> <div id="new_central_pos_30"> <?php } ?>
<?php if ((($current_post-3)%3==0) && ($current_post>3)) {?> <div id="new_right_pos_30"><?php } ?>


<?php } if ($paged!=0){ ?>
<?php if ((($current_post-1)%3==0)) {?> <div id="new_central_loop"><div id="new_left_pos_30"> <?php } ?>
<?php if ((($current_post-2)%3==0)) {?> <div id="new_central_pos_30"> <?php } ?>
<?php if ((($current_post-3)%3==0)) {?> <div id="new_right_pos_30"><?php } ?>
<?php } ?>


<?php //bfa_post_kicker('<div class="post-kicker">','</div>'); ?>

<div class="post_footer">
<?php
the_time('j F Y'); ?>
<font style="font-style:italic;"><?php _e('by'); ?> <?php the_author(); ?><br>
<?php edit_post_link('Edit', '', ' '); ?> &sect; <?php comments_popup_link('Nessun Commento', '1 Commento', '% Commenti'); ?></font>
</div>


<?php bfa_post_headline('<div class="post-headline">','</div>'); ?>

<?php bfa_post_byline('<div class="post-byline">','</div>');?>

<?php /*bfa_post_bodycopy('<div class="post-bodycopy clearfix">','</div>');*/

if ((($current_post!=1) && ($paged==0)) || ($paged!=0)){
$key="thumbnail";
if(get_post_meta($post->ID, $key, true)):
$inis = get_post_meta($post->ID, $key, true);
else:
$inis = catch_that_image();
endif;
if(!empty($inis)): ?>
<div class="theimage pik" style="background: url(<?php echo $inis; ?>) center top no-repeat; width: 120px; height:90px; border: 1px solid #777;"></div>
<?php endif;

$texter = get_the_excerpt();
if(strlen($texter ) > 500) {
$texter = substr($texter , 0, 500);
}
echo ''.$texter.'[...]';
}
if (($current_post==1)&& ($paged==0)){
echo(the_content());
}
?>

<?php bfa_post_pagination('<p class="post-pagination"><strong>'.__('Pages:','atahualpa').'</strong>','</p>'); ?>

<?php //bfa_post_footer('<div class="post-footer">','</div>'); ?>

<!-- / Post -->

</div>

<?php if ($paged==0) { ?>
<?php if ($current_post==3){?> </div><?php }?>
<?php if ($current_post==2){?> <?php } ?>
<?php if ($current_post==1){?> <?php }?>
<?php if ((($current_post-3)%3==0) && ($current_post>3)) {?> </div> <?php } ?>

<?php }
elseif ($paged!=0) { ?>
<?php if ((($current_post-3)%3==0) ) {?> </div> <?php } ?>

<?php } ?>

<?php if (($current_post==$post_numbers)){?>
<?php }
}
if ( !(is_front_page()) ) {

//original loop

?>

<?php /* Post Container starts here */

if ( function_exists('post_class') ) { ?>
<div <?php if ( is_page() ) { post_class('post'); } else { post_class("$odd_or_even"); } ?> id="post-<?php the_ID(); ?>">
<?php }
// For the other pages... the original loop
else { ?>
<div class="<?php echo ( is_page() ? 'page ' : '' ) . $odd_or_even . ' post" id="post-'; the_ID(); ?>">
<?php } ?>

<?php bfa_post_kicker('<div class="post-kicker">','</div>'); ?>

<?php bfa_post_headline('<div class="post-headline">','</div>'); ?>

<?php bfa_post_byline('<div class="post-byline">','</div>'); ?>

<?php bfa_post_bodycopy('<div class="post-bodycopy clearfix">','</div>'); ?>

<?php bfa_post_pagination('<p class="post-pagination"><strong>'.__('Pages:','atahualpa').'</strong>','</p>'); ?>

<?php bfa_post_footer('<div class="post-footer">','</div>'); ?>

</div><!-- / Post -->

<?php } ?>



2. Style & edit CENTER COLUMN -> Content BELOW the LOOP : add this code at the TOP :
------------------------------------------------------------------------------------------------

<?php
$post_numbers=get_query_var('posts_per_page');
$current_post=$bfa_ata['postcount'];
if (($post_numbers!=$current_post) && (($current_post-3)%3!=0) ){ ?>
</div>
<?php } ?>



3. Add HTML/CSS Inserts -> CSS : Inserts :
------------------------------------------------------------------------------------------------

#new_central_loop {clear:left; overflow:hidden; border-bottom: dashed 1px #cccccc;margin-top:10px;margin-bottom:10px;padding-bottom:10px; }

#new_left_pos_50 {float: left; width:48%; margin-right:2%;margin-top:10px;margin-bottom:10px; }

#new_right_pos_50 {float: left; width:48%; margin-left:2%;margin-top:10px;margin-bottom:10px;}

#new_left_pos_30 {float: left; width:31%; margin-right:2%; margin-top:10px;margin-bottom:10px;}

#new_central_pos_30{float: left; width:30%; margin-left:2%;margin-right:2%; margin-top:10px;margin-bottom:10px;}

#new_right_pos_30 {float: left; width:31%;margin-left:2%;margin-top:10px;margin-bottom:10px;}

.lastimage img, .theimage img, .theright img { border: 1px solid #888;}
.theimage {float: right;margin-left: 10px;}



4. EDITOR -> functions.php : add this function :
------------------------------------------------------------------------------------------------

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
// $first_img = bloginfo('template_directory') . "/images/no-image200.jpg";
}
return $first_img;
}


5. Should works... pls tell me if there is some problem so we should fix it ;)
----------------------------------------------------------------------------------------------

rightofu Nov 15, 2009 08:25 PM

workshttp://isxwatch.com/

however my center column is too narrow so it doesnt format well, also Im getting ""); } ?>" after the articles, any ideas where thats coming from?

thanks again!

m0r6h3us Nov 16, 2009 02:58 AM

Seems to be an error in the php/theme translation.

Try to modify the point number

2. "Style & edit CENTER COLUMN -> Content BELOW the LOOP : add this code:"

FROM THIS:
------------
<?php
$post_numbers=get_query_var('posts_per_page');
$current_post=$bfa_ata['postcount'];
if (($post_numbers!=$current_post) && (($current_post-3)%3!=0) ){
echo("</div>");
} ?>

TO THIS:
---------
<?php
$post_numbers=get_query_var('posts_per_page');
$current_post=$bfa_ata['postcount'];
if (($post_numbers!=$current_post) && (($current_post-3)%3!=0) ){ ?>
</div>
<?php } ?>

---------------------------------------------------------------------------------------

Tell me if works ;)

PS: Some words are written in Italian, as also the Date Format... if u want change them, u can do directly in the "the loop".
For the English:

- In the "POST_ FOOTER" div, change the expression time in this one:
the_time('F jS, Y')

- Always in the "POST_FOOTER" div, change the comments_popup_link(......) in this one:
comments_popup_link('No Comments', '1 Comment', '% Comments')

rightofu Nov 16, 2009 06:11 AM

ok, looks good so far. I will post if I find any other isssues

thanks!

m0r6h3us Nov 16, 2009 06:31 AM

U are welcome ;)

m0r6h3us Nov 19, 2009 01:37 PM

if there are no more questions, I should sign this post as "solved".


All times are GMT -6. The time now is 02:18 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.