Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

[SOLVED] How to affect styling of all posts after the first one


  #1  
Old Jan 5, 2011, 02:27 PM
runnerb0y
 
67 posts · Nov 2010
First, some laundry...
1) Using ATA 3.5.3
2) Using WP 3.0.4

Second, the disclaimer...
I did a bunch of searching and while I found some posts that led me down a path, I couldn't achieve the results I'm looking for.

Third, unfortunately I can't post a link to the site because it's on a company internal network. But I don't think it will be necessary to provide an answer.

Here goes....

What I want to do is fairly straight forward. Basically, after the first post being displayed on any page I want to adjust the margin and padding of the Post Container (div.post and div.page CSS elements). Ultimately I'll want to point to an additional bit of CSS in the ATA --> Add HTML/CSS Inserts section called ".posttest". In that element all I'm doing is adjusting the margins and padding.

I know I'll need to be in the ATA --> Style & Edit CENTER COLUMN section and I'll have to be modifying The Loop. In all my attempts, I've broken my site at least 3 dozen times and I cannot seem to get the PHP figured out.

Currently my (repaired and functional) Loop looks nearly default (I adjusted to order of some elements), but here it is...
Code:
<?php /* For SINGLE post pages if activated at ATO -> Next/Previous Navigation: */
bfa_next_previous_post_links('Top'); ?>

<?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 } else { ?>
<div class="<?php echo ( is_page() ? 'page ' : '' ) . $odd_or_even . ' post" id="post-'; the_ID(); ?>">
<?php } ?>

<?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_kicker('<div class="post-kicker">','</div>'); ?>

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

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

</div><!-- / Post -->
Whatever PHP needs to be added/modified needs to allow me to point to the "new" CSS styling by using an argument of <div class="posttest">.

Much thanks for any of you that can help!
  #2  
Old Jan 5, 2011, 03:05 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Here is an idea, style your site for all BUT the first post. Then in 'The LOOP' use this
HTML Code:
?php /* For SINGLE post pages if activated at ATO -> Next/Previous Navigation: */
bfa_next_previous_post_links('Top'); ?>

<?php /* Post Container starts here */
if ( function_exists('post_class') ) { ?>
<div <?php if ( is_page() ) { post_class('post'); 
           } elseif ( is_front_page() AND $bfa_ata['postcount'] == 1 ) {
                  post_class("$odd_or_even".' first_post');
           } else {
                  post_class("$odd_or_even");
           } ?> id="post-<?php the_ID(); ?>">
<?php } 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 -->
Now the first post will have a class of 'first_post' and you can use that CSS Selector to style the first post.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 5, 2011, 05:58 PM
runnerb0y
 
67 posts · Nov 2010
juggledad,

That is a great approach as a solution. I believe you've nearly solved it. I've fiddled with it a bit and now it's working under one circumstance (the front/home page). I'm still having issues when selecting categories or doing a search.

I know the LOOP changes and my HTML/CSS inserts as well as Post Container settings are being applied because the front/home page now looks AWESOME. If I can just get all other "pages" (search, category, recent posts, etc...) to look like that, I'm golden!

I know the changes will have to be made in The LOOP. I've used every possible combination of the 'post' and 'post_container_style2' "variables" and I can only get either the front page, or a single post "page" to look correct. Can't seem to get them all to do what I want. I can't seem to wrap my brain around the logic in that section of The LOOP.

The problem I was having that caused me to use a fix like this was... the first post on any page (front page, category, recent posts, or search), looked great (proper spacing below the header section). However subsequent posts were spaced WAY too far apart and my page looked silly. I've fiddled with all the margins and padding statements throughout the ATA back-end and no matter what I do, I can't get the posts to space more appropriately. Hence my approach to have two styles applied. One style to the first post on any page and a second style to all trailing posts.

Here's a more detailed look at what I've got going on... BTW: sorry for the confusion with the name of the second style (which is really being applied to the first post on the page)

The two "settings" are as follows....

In the ATA --> Style Posts & Pages --> Post Container my styling looks like the following

Code:
background: url('<?php bloginfo('template_directory'); ?>/images/bg.gif') repeat-y scroll 0 0 transparent;
margin: -65px 0 55px;
padding: 0;
In the ATA --> Add HTML/CSS Inserts I've got the following styling applied to the "div.post_container_style2" class.

Code:
div.post_container_style2 {
background: url('<?php bloginfo('template_directory'); ?>/images/bg.gif') repeat-y scroll 0 0 transparent;
     margin: 10px 0 55px;
     padding: 0;
     }
In ATA --> Style & edit CENTER COLUMN I've got the following in The LOOP

Code:
<?php /* For SINGLE post pages if activated at ATO -> Next/Previous Navigation: */
bfa_next_previous_post_links('Top'); ?>

<?php /* Post Container starts here */
if ( function_exists('post_class') ) { ?>
<div <?php if ( is_page() or is_single() or is_category() or is_search() ) { post_class('post_container_style2'); 
           } elseif ( is_front_page() AND $bfa_ata['postcount'] == 1 ) {
                  post_class("$odd_or_even". 'post_container_style2');
           } else {
                  post_class("$odd_or_even");
           } ?> id="post-<?php the_ID(); ?>">
<?php } else { ?>
<div class="<?php echo ( is_page() ? 'page ' : '' ) . $odd_or_even . ' post" id="post-'; the_ID(); ?>">
<?php } ?>

<?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_kicker('<div class="post-kicker">','</div>'); ?>

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

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

</div><!-- / Post -->
As you can see the only change between the styles is the top margin. In order to properly place the first post on a page, I need the margin: 10px 0 55px; statement. In order to reduce the excessive spacing on subsequent posts, I need to have the margin: -65px 0 55px; statement.

Thanks in advance for your amazing help!

~runnerb0y
  #4  
Old Jan 5, 2011, 06:25 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
if you need it to work on all pages then change
HTML Code:
<div <?php if ( is_page() or is_single() or is_category() or is_search() ) { post_class('post_container_style2'); 
           } elseif ( is_front_page() AND $bfa_ata['postcount'] == 1 ) {
                  post_class("$odd_or_even". 'post_container_style2');
           } else {
                  post_class("$odd_or_even");
           } ?> id="post-<?php the_ID(); ?>">
<?php } else { ?>
to
HTML Code:
<div <?php if ( is_page() or is_single() or is_category() or is_search() ) { post_class('post_container_style2'); 
           } elseif ( $bfa_ata['postcount'] == 1 ) {
                  post_class("$odd_or_even". 'post_container_style2');
           } else {
                  post_class("$odd_or_even");
           } ?> id="post-<?php the_ID(); ?>">
<?php } else { ?>
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Jan 6, 2011, 12:33 PM
runnerb0y
 
67 posts · Nov 2010
Apparently I'm logically challenged.

I finally got it to do what I want, but looking at the logic, I'm not sure "why" it works. Because of this, I assume something isn't totally correct and at some point in the future under differing circumstances, my site will look screwy. I'd like to figure out why this is working and put the logic into the correct configuration.

Currently, The LOOP looks like this...
Code:
<?php /* For SINGLE post pages if activated at ATO -> Next/Previous Navigation: */
bfa_next_previous_post_links('Top'); ?>

<?php /* Post Container starts here */
if ( function_exists('post_class') ) { ?>
<div <?php if ( is_page() or is_single() ) { post_class('post_container_style2'); 
           } elseif ( $bfa_ata['postcount'] == 1 ) {
                  post_class("$odd_or_even". 'post_container_style2');
           } else {
                  post_class("$odd_or_even");
           } ?> id="post-<?php the_ID(); ?>">
<?php } else { ?>
<div class="<?php echo ( is_page() ? 'page ' : '' ) . $odd_or_even . ' post" id="post-'; the_ID(); ?>">
<?php } ?>

<?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_kicker('<div class="post-kicker">','</div>'); ?>

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

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

</div><!-- / Post -->
I'm pretty sure my "problem" (even though it's working) is in the section
<div <?php if ( is_page() or is_single() ) { post_class('post_container_style2');

Basically since the single post pages and pages-pages were working, I removed all the other items (is_category() or is_front_page() or is_search() ) from that portion of the code and it all started working just fine. I have to leave some argument in that section, otherwise I get an eval error.

My quandary is to figure out a way to have that logic be "correct". When I flow through The LOOP it seems that I'm calling up the "post_container_style2" twice, but I don't think that's the case because my pages wouldn't look correct. Since all my single post pages and pages-pages looked correct all along, they don't seem to be affected.

Because now the multi-post pages as well as category and search pages are formatting like I want, I know that both the div.post (defined in ATA--> Style Posts & Pages --> Post Container) and my "additional" post formatting CSS definition is also being called into play. What I don't understand is how.

Sorry I'm such a lame duck when it comes to scripting/coding.

TIA

My head hurts!

Bookmarks



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] styling posts echoes2000 Center area post/pages 2 Jan 2, 2011 03:33 PM
how to add a background image that would not affect the center cordi Center area post/pages 1 May 6, 2010 01:32 PM
[SOLVED] !!! Site have changed own image and theme's setting don't affect to it. shus Plugins & Atahualpa 2 Jan 5, 2010 09:24 AM
Ignores Images in Posts Styling karenika Atahualpa 3 Wordpress theme 2 Dec 18, 2009 04:11 AM
[SOLVED] Does changing Font Sizes in style.css, or with overrides, affect SEO? fromtheranks Atahualpa 3 Wordpress theme 2 Jun 18, 2009 12:08 PM


All times are GMT -6. The time now is 04:19 AM.


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