Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] Post thumb inline on multi pages and widget orientation


  #1  
Old Mar 20, 2015, 03:56 AM
ralfsteck
 
55 posts · Oct 2009
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.

Last edited by ralfsteck; Mar 21, 2015 at 05:44 AM.
  #2  
Old Mar 20, 2015, 05:33 AM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
HTML Code:
    <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>
HTML Code:
.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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Mar 20, 2015 at 06:56 AM.
  #3  
Old Mar 20, 2015, 05:52 AM
ralfsteck
 
55 posts · Oct 2009
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.

Last edited by ralfsteck; Mar 21, 2015 at 05:44 AM.
  #4  
Old Mar 20, 2015, 06:08 AM
ralfsteck
 
55 posts · Oct 2009
In the end what I want to achieve is what I had in the Atahualpa header with
Code:
<?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>');
  #5  
Old Mar 20, 2015, 06:46 AM
ralfsteck
 
55 posts · Oct 2009
...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.

Last edited by lmilesw; Mar 20, 2015 at 06:58 AM.
  #6  
Old Mar 20, 2015, 08:59 AM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you apply the changes I suggested in my prior post? I con't see them reflected in your export
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Mar 20, 2015, 09:06 AM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
HTML Code:
#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??
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Mar 20, 2015, 09:09 AM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
...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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Mar 20, 2015, 09:15 AM
ralfsteck
 
55 posts · Oct 2009
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.
  #10  
Old Mar 20, 2015, 09:20 AM
ralfsteck
 
55 posts · Oct 2009
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

Code:
	<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.
  #11  
Old Mar 20, 2015, 03:00 PM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Mar 21, 2015, 05:45 AM
ralfsteck
 
55 posts · Oct 2009
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.
Attached Files
File Type: txt ES_Montezuma.txt (73.0 KB, 300 views)
  #13  
Old Mar 21, 2015, 11:11 AM
ralfsteck
 
55 posts · Oct 2009
Yihaaa, got it - it's so easy after finding out: I can aligh ads in Adrotate itself!
  #14  
Old Mar 22, 2015, 08:11 AM
ralfsteck
 
55 posts · Oct 2009
New problem found:

Code:
.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.
  #15  
Old Mar 22, 2015, 03:23 PM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
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
HTML Code:
.alignright {
    margin: 5px 0 10px 15px;
}
Now you have added a more specific CSS selector
HTML Code:
.post-bodycopy img {
    float: left;
}
so it overrides the previous CSS rules.

that's how CSS works.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #16  
Old Mar 22, 2015, 03:51 PM
ralfsteck
 
55 posts · Oct 2009
Is it possible then to narrow the float left definition to the thumbs on the index page?

Thanks for your help!
  #17  
Old Mar 22, 2015, 06:07 PM
juggledad's Avatar
juggledad
 
23,684 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 24, 2015 at 04:31 AM.
  #18  
Old Mar 23, 2015, 03:23 AM
CrouchingBruin's Avatar
CrouchingBruin
 
299 posts · Aug 2010
Santa Monica, CA
Quote:
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:
Code:
.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.
__________________
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!
  #19  
Old Mar 24, 2015, 04:19 AM
ralfsteck
 
55 posts · Oct 2009
Oh thanks, that did the trick.

Bookmarks

Tags
post thumb, widget orientation

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Thumb Shadow and Post Thumb BUG ? KatyDigg Montezuma Theme 6 Mar 22, 2014 05:22 PM
Displaying comments and comment form below each post on multi post pages, in 3.4.x Flynn Comments, trackbacks & pings 12 May 28, 2011 08:27 PM
[SOLVED] Removing Post Headline on Multi and Single Post Pages jen Center area post/pages 2 Jan 8, 2010 08:46 AM
How do I choose between Single Post Pages and Multi Post Pages? BradyKelly Atahualpa 3 Wordpress theme 2 Jan 3, 2010 06:17 AM


All times are GMT -6. The time now is 09:37 PM.


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