Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

Unable to properly apply column-width to BODY Box.


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 5, 2011, 09:53 PM
jasonb
 
14 posts · Feb 2011
I'm unable to make use of -moz-column-width as I'd like. (With Firefox.)

When I edit a post and put <div style="-moz-column-width> at the beginning, every column is exactly the same height, give or take a single line for required formatting. But when I do it by applying the same CSS to BODY Box, the right-most column is never the same height as the others, sometimes even being completely blank while there are 5+ lines of text in the other columns.

Looking at the source for a rendered page, I'm unable to tell what could be causing this discrepancy...
  #2  
Old Feb 6, 2011, 04:47 AM
juggledad's Avatar
juggledad
 
22,191 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
What version of atahualpa and wp?
What is the URL pointing at the issue?

If you use 'body....' in the CSS inserts, you are applying it to the entire body

What is the exact CSS you are using?
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #3  
Old Feb 6, 2011, 12:46 PM
jasonb
 
14 posts · Feb 2011
WordPress 3.0.4 / Atahualpa 3.6.4.

The CSS is "-moz-column-width: 30em; -moz-column-gap: 15px"

If I put that into the Atahualpa BODY Box, the results are quite different than if I manually add it as a <div style="-moz-column-width: 30em; -moz-column-gap: 15px">...</a> block surrounding (and within) the text of an actual post.

I tried looking into hacking the Atahualpa php code to insert a custom div that would surround the post text, and then doing a CSS insert for that, but even though I changed several instances of <div class="post-bodycopy clearfix"> ... </div> to <div class="post-bodycopy clearfix"><div class="custom-bodycopy"> ... </div></div>" that didn't result in the source changing when I looked at it afterward. I must have missed something, and didn't get to the point where I could test putting my CSS insert into the "custom-bodycopy" class.

(I suspect, though, that this must be part of the problem. The column code can't be applied to the parent div as it is, for some reason, it needs to apply to a child div.)

Last edited by jasonb; Feb 6, 2011 at 01:10 PM.
  #4  
Old Feb 9, 2011, 06:13 AM
jasonb
 
14 posts · Feb 2011
Anyone?
  #5  
Old Feb 9, 2011, 12:13 PM
juggledad's Avatar
juggledad
 
22,191 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Quote:
the Atahualpa BODY Box
??? where did you apply it?

What is the URL so I can see what you have done?
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #6  
Old Feb 9, 2011, 02:43 PM
jasonb
 
14 posts · Feb 2011
Quote:
Originally Posted by juggledad
??? where did you apply it?
Appearance > Atahualpa Theme Options > Posts & Pages > Style Posts & Pages > BODY Box.

I really hadn't thought that there was anywhere else to apply it in the theme GUI. Just put -moz-column-width: 30em; -moz-column-gap: 15px in there and observe what it does. You'll see the the right-most column is not vertically even with the other columns. (This is all assuming that you're using Firefox of course.)

Now, remove that code, and instead edit the post itself.

Use: <div style="-moz-column-width: 30em; -moz-column-gap: 15px"> at the very top of the post text, and </div> at the end. The results here will have the right-most column being vertically even with everything (at least within one line of text).

I haven't "done" anything more than that, and it should be very easy to reproduce. (And note - it's impossible to provide a URL to any site that has an example of the different methods of styling both active at the same time. It's either one or the other. Therefore, much easier to just reproduce yourself.)

Last edited by jasonb; Feb 9, 2011 at 02:46 PM.
  #7  
Old Feb 9, 2011, 05:36 PM
juggledad's Avatar
juggledad
 
22,191 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Quote:
In Mozilla applications like Firefox, the -moz-column-width CSS property suggests an optimal column width. The actual column width may be wider (to fill the available space), or narrower (only if the available space is smaller than the specified column width).
The body box is part of the center area who's width is equal to the page width minus the width of the sidebars
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #8  
Old Feb 15, 2011, 09:24 AM
jasonb
 
14 posts · Feb 2011
I have no idea what that has to do with my problem at all. That CSS property divides existing space (within the current "workspace") into columns of equal width. It doesn't matter how wide the current space it - it will just divide that into equal columns within it. Plus, that aspect of it works just fine. It's simply the number of vertical lines in the right-most column (within the DIV) that's behaving differently.

It doesn't explain why putting the CSS into the Athahualpa theme option section is behaving differently than putting it into a manually inserted DIV in the body of a post.

Did you actually try the above and see for yourself? Just add the CSS into a blog post to see what it does. Once done, remove it from the blog post again - and put it into the BODY Box section of the theme itself, as outlined above.

Last edited by jasonb; Feb 15, 2011 at 09:26 AM.
  #9  
Old Feb 15, 2011, 09:49 AM
juggledad's Avatar
juggledad
 
22,191 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
No I didn't try anything. Being a volunteer (ie unpaid) moderator I try to spend the minimal amount of my time which is why I always ask to see the url.
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #10  
Old Feb 16, 2011, 10:57 AM
jasonb
 
14 posts · Feb 2011
Understood, although in this case supplying a URL would be of no help because you need to look at it one way, change things, then look at it the other way. Just seeing it work one way wouldn't communicate the problem.

(Actually, let me see if I can supply some screen captures instead.)

I guess I will go back to seeing if I can hack the PHP code.

Do you know what I would need to modify to insert my own custom DIV (that I could then style) right after <div class="post-bodycopy clearfix">?
  #11  
Old Feb 16, 2011, 11:22 AM
jasonb
 
14 posts · Feb 2011
Okay, some screen captures.

Here's what happens when I use a DIV, with the CSS, in the body of a post directly:





Here's what happens if I use the same CSS but apply it to BODY-Box instead:





Note that for this example I used a narrower column definition so that it would produce 3, making it more obvious. When applying it to the BODY-Box the behaviour for this particular post (also why I selected this one) is so extreme that there is no text in the right-most column at all.

Also note: The presence of the additional CSS in BODY-Box (as per the screenshot) is not responsible for the problem. If I remove it altogether and use just the column CSS, the problem still occurs.

Last edited by jasonb; Feb 16, 2011 at 11:36 AM.
  #12  
Old Feb 18, 2011, 05:45 AM
jasonb
 
14 posts · Feb 2011
No ideas? Maybe one of the developers could comment? Does it seem that there's an explanation for this - or could it be a bug in some way?

If it isn't known why this is happening - can you explain how to add a custom DIV to every post automatically?

Last edited by jasonb; Feb 18, 2011 at 05:47 AM.
  #13  
Old Feb 18, 2011, 06:31 AM
juggledad's Avatar
juggledad
 
22,191 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
I just ran a test and it works for me in FireFox (note in Safari you need to use -webkit-column-width: 20em; -webkit-column-gap: 15px

so you probably have a conflict with something else.

disable all plugins
remove all CSS in the CSS Inserts
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #14  
Old Feb 18, 2011, 04:44 PM
jasonb
 
14 posts · Feb 2011
I was hoping that would be it - because identifying the problem would be easy at that point if removing everything fixed it. But it didn't. After disabling all plugins, and removing all CSS inserts, I'm seeing exactly the same thing...

If I had a Mac I could test with Safari too, and it could then be something that's specific to my build of Firefox, but it still doesn't explain why putting the code into the actual body of a post is behaving differently than having it in BODY Box.

I do know that everything would work if I could get all of my posts automatically inside a custom DIV. (Even if I wouldn't know what was causing this in the first place.)

When I look at the HTML source code for a post, I see <div class="post-bodycopy clearfix"> before the body text of each post. Searching for this, I see that it's contained in two different Atahualpa files:

functions/bfa_post_parts.php: function bfa_post_bodycopy($before = '<div class="post-bodycopy clearfix">', $after = '</div>'
functions/bfa_theme_options.php: <?php bfa_post_bodycopy('<div class=\"post-bodycopy clearfix\">','</div>'); ?>

However, when I modify both of these - say to ...clearfix">blah' - what I'm adding isn't picked up at all and "blah" doesn't appear in my posts or the HTML source.

The only other places where <div class="post-bodycopy clearfix"> appears anywhere are in the Styles .txt files. But renaming the entire styles directory to something else, resulted in no errors - so I know that those files aren't actually being used by me at present and modifying them won't do any good either.

How do I go about modifying the code being generated here if not by changing those two lines?

Last edited by jasonb; Feb 18, 2011 at 05:17 PM.
  #15  
Old Feb 18, 2011, 06:32 PM
juggledad's Avatar
juggledad
 
22,191 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
once again, I tested it and it works the way you would expect. This is on 3.6.4 and WP 3.0.5
You Say looking at the site won't help. The way I tested it was to have two posts, one with the hard coded div and styling, the other without. I looked at it and one was a single column and the other was three columns. I then added the CSS insert and both were three columns.

So, this makes it an issue with your environment, but without access to the site I'm afraid there isn't anything I can offer.
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support
  #16  
Old Feb 18, 2011, 10:47 PM
jasonb
 
14 posts · Feb 2011
Well, I give up - because now it's not working properly even if I put a DIV into the body of the post itself directly now. Which is extremely odd because there was a difference when I composed my screenshots and earlier.

To answer my other question though - to add a custom DIV to every post, do this:

functions/bfa_post_parts.php
function bfa_post_bodycopy($before = '<div class="post-bodycopy clearfix">', $after = '</div>')
{
global $bfa_ata, $post;
$before.='<div class=\"post-custombody\">';
$after = '</div>'.$after;

Add the last two lines, and name the DIV class what you'd like. I don't know why modifying the initial definition of $before and $after fails to work, but changing the definition after the fact in the body of the function code does the trick. (Not that it actually solved my real problem.)
  #17  
Old Feb 19, 2011, 03:37 AM
juggledad's Avatar
juggledad
 
22,191 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
By changing that code and removing the original, you have changed the CSS that will apply to that area. If you want to add a custom class, just add it - don't remove the others - or add a new dive after it

HTML Code:
functions/bfa_post_parts.php
function bfa_post_bodycopy($before = '<div class="post-bodycopy clearfix">', $after = '</div>')
{
global $bfa_ata, $post;
$before.='<div class=\"post-bodycopy clearfix post-custombody\">';
$after = '</div>'.$after;
or
HTML Code:
functions/bfa_post_parts.php
function bfa_post_bodycopy($before = '<div class="post-bodycopy clearfix">', $after = '</div>')
{
global $bfa_ata, $post;
$before.='<div class=\"post-bodycopy clearfix\"><div class=\"post-custombody\">';
$after = '</div></div>'.$after;
since you give up, I'll close this thread
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Unable to re-size width of my Page Menu sub menus with 353 Zabaan New Versions, & Updating 9 Oct 19, 2010 10:12 AM
[SOLVED] Body box not showing the full width in IE8 MoriokFutai Atahualpa 3 Wordpress theme 2 Jul 28, 2010 03:48 PM
[SOLVED] Help get my Header width of the body lnsokol Atahualpa 3 Wordpress theme 4 Jul 23, 2010 09:49 PM
Unable to override a body padding vil2 Header configuration & styling 2 Jan 25, 2010 10:01 AM
Table in center column cannot be displayed properly mikechui Header configuration & styling 1 Dec 23, 2009 06:30 AM


All times are GMT -6. The time now is 06:20 PM.


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