Hi all,

afetr using Atahualpa for some years, I switched to Montezuma this week. First I was nervous because all of that CSS/PHP I had to change, but You are right, it's mostly cut&paste plus trial&error. I'm quite content with the prototype website I've got but I have two issues I can't get around. I attached a screenshot for demonstration.

1. I want the text flow around the post thumbnail on the multi pages. I experimented with "Inline" but this just changes the picture, the shadow/greyscale effect stays. Or worse the image is gone. The container for the images is buch broader than the images in the moment, this looks odd. I'd like to have the container as broad as the images or square images (preferrably without losing the hover effect) and the text flowing around it on the right.

2. Is it possible to align individual widgets or widget areas? I experimented with text alignments but this didn't help. I use Darotate widgets for placing ads. I want the SolidWorks Ad top right to be in the top right corner just as the Altair banner on the left. As there is another widget area in between those, I'd like to format that centered. Same thing with the Altair scyscraper in the right sidebar. That should be aligned right. Would it help to use shortcuts instead widgets?

Thanks in advance for those two brilliant themes. I searched for alternatives for a week and came back ruefully. :-)

Donation is on it's way.

1) You can do this but you will lose the hover effect. You need to move the thumbnail code to just before the excerpt code, delete the before and after code in the bfa_thumb code and add a 'float: left' to some new CSS for the image.

    <div class="post-bodycopy cf">
    
        <div class="post-date">        
            <p class="post-month"><?php the_time( 'M' ); ?></p>
            <p class="post-day"><?php the_time( 'j' ); ?></p>
            <p class="post-year"><?php the_time( 'Y' ); ?></p>                
        </div>
    <?php bfa_thumb( 620, 180, true, '', '' ); ?>

        <?php bfa_excerpt( 155, ' ...' ); ?>
        
    </div>

.post-bodycopy {float:left;}
.post-bodycopy img {float:left;}

2) without access to the site or an export of the theme settings it's hard to tell what you did with the widgets. Try this, find the ID of the widget and then give it a 'float:right'; rule

Hi Juggledad

1. Why don't my images span the whole width of the box? That would be another option, the half-filled box is ugly. The pics are all 1024px wide so they should be large enough.

Edit: I found the line where I can change the image width to e.g. 1024 so the pic spans the central column in any window width. But then the border height doesn't follow the image height as it does when the pic is 620.


2. I tried this in layout.css with no success. I think I have a big misunderstanding here :-)

#HeaderLinks {
padding: 0 0px;
float: left;
}
#HeaderMitte {
padding: 0 0px;
float: center;
}
#HeaderRechts {
padding: 0 0px;
float: right;
}

Export file attached.

In the end what I want to achieve is what I had in the Atahualpa header with

<?php bfa_widget_area('name=GanzOben&cells=2&align_1=9&align_2=3 %before_widget=<div id="%1$s" class="header-widget %2$s">&after_widget=</div>');

...and while we're at that, why does

background: #ffffff;

work in header, main and footer (in layout.css), but not in the sidebars? I try to get a boxed mode with black main background and white backgrounds on the elements.

did you apply the changes I suggested in my prior post? I con't see them reflected in your export

#HeaderLinks { 
padding: 0 0px;
float: left;
}
#HeaderMitte { 
padding: 0 0px;
float: center;
}
#HeaderRechts { 
padding: 0 0px;
float:	right;
}

Where did you come up with those ID's??

...and while we're at that, why does

Code:
background: #ffffff;
work in header, main and footer (in layout.css), but not in the sidebars? I try to get a boxed mode with black main background and white backgrounds on the elements.

Because there are other CSS selectors that are more specific causing that CSS rule to be overriden

Learn to use a code examiner like the firebug extension in firefox so you can see what is going on.

Hi Juggledad,

sorry for being unspecific. I would prefer to have a nice looking version with hover effect to one without it. That would be the second best option.

I was hoping I can get a let's say 600px wide header thumbnail with hover effect. I tried your solution but ot looked ugly, sorry. So my next ideas went the way of makiung the wide picture nicer.

Hi Juggledad,

sorry to bother you with my poor knowledge. I always end up at 95% of the way I want to go and think the last 5% are because I forgot a > or ; (which really often happens :-)

HeaderLinks etc are the names of the three header widget areas I defined. I understand to define them in header.php with

	<div id="SidebarHeader" class="row">
		<div id="SidebarHeaderLinks" class="col5">
			<?php dynamic_sidebar( 'SidebarHeaderLinks' ); ?>
		</div>	
        <div id="SidebarHeaderMitte" class="col2">
			<?php dynamic_sidebar( 'SidebarHeaderMitte' ); ?>
		</div>
    	<div id="SidebarHeaderRechts" class="col5">
			<?php dynamic_sidebar( 'SidebarHeaderRechts' ); ?>
		</div>
	</div>

and giving them their look in layout.css. Sorry if that was a misconception.

You used '#HeaderLinks' as the CSS selector in your CSS. This says 'Find the element that has an ID of "HeaderLinks" and apply these rules to it.

Now you have a <div...> with an ID of "SidebarHeader" and another with an ID of "SidebarHeaderLinks", but nowhere do I see one with an id="HeaderLinks"... unless you have changed something since the export you attached.

See what I mean :-) Thanks alot, I didn't see that. It must be SidebarHeaderLinks, of course. Got some other names right now, too.

I still have no clue how to align the two ad wiggets right, I'm sorry. Please hit my head in the right direction.

I got the excepts plus thumbs very beautifully now with square thumbs, but (unfortunately ;-) without the greyscale/shadow effect.

Yihaaa, got it - it's so easy after finding out: I can aligh ads in Adrotate itself!

New problem found:

.post-bodycopy {float:left;}
.post-bodycopy img {float:left;}

makes images without a capture align left no matter how they were aligned in the image dialogue.

makes images without a capture align left no matter how they were aligned in the image dialogue.

that's correct because the alignment you specify on an image just creates a class 'alignright' (etc) on the <img...> and a CSS selector like

.alignright {
    margin: 5px 0 10px 15px;
}

Now you have added a more specific CSS selector

.post-bodycopy img {
    float: left;
}

so it overrides the previous CSS rules.

that's how CSS works.

Is it possible then to narrow the float left definition to the thumbs on the index page?

Thanks for your help!

Possible, look at the source of the generated page and see what the ID's and Classes there are for all the elements from the thumbnail image up (it's parents) Now craft a CSS selector that is specific. The more specific a CSS selector is the higher precedence it's rules will be.

Originally Posted by ralfsteck

Is it possible then to narrow the float left definition to the thumbs on the index page?

On the regular blog page (which is generated by index.php), the body element will have a class assigned to it called blog, so if you want to write a CSS rule which only affects elements on the blog page, add the .blog class to the beginning of the selector like this:

.blog .post-bodycopy img {
    float: left;
}

For other types of index pages, refer to the Archive paragraph of the body_class() function in the Wordpress Codex to find out what classes to use.

Oh thanks, that did the trick.