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 »

[SOLVED] Problem with page menu when headline removed from page/post layout


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 24, 2013, 05:13 PM
GrahamW
 
95 posts · Jul 2010
I've removed the kicker, headline and byline from the page layout with "display:none".

The intention is to have images at the top of the body so that they abut against the %bar2 which is beneath the %page-center menu.

Initially this showed a white space between the bar and the image. On Larry's advice elsewhere, I addressed this by adding this CSS insert...

#middle .page { margin-top: -28px; }

On pages where there's a static image this is fine.

However, the home page has a slideshow, and on this one the space to the left of the page menu is somehow being compromised. I've taken a picture to try to illustrate what I mean



Have you any idea why this is happening and what I can do to prevent it?

Many thanks
Graham
  #2  
Old Feb 24, 2013, 05:27 PM
Jam's Avatar
Jam
 
1,072 posts · Mar 2011
Perth, Western Australia
Code:
#middle .page { margin-top: -28px; }
applies to .page only. If your home page is not using that page template (not likely) than it wont use that CSS.

If you want it to, then you have to apply it to the page template your home page is using also.

- my guess.

URL + code inspector would sort it.
__________________
May the learning curve never plateau... Thanks Larry for teaching me heaps.
My Themeframe built sites
  #3  
Old Feb 24, 2013, 07:58 PM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Quote:
#middle .page { margin-top: -28px; }
this actually will apply the top margin to any element that has a class of 'page' that is a subelement of an element with the ID of middle, so it doesn't mater what the <body> has on it.

this will apply when you are on any 'page' page since the div for the page has a class of 'page'

(note: if you look at the source you will see that the div will also show a 'post-nn' and an ID of 'post-nn' - remember a page is just a special post which is why it aslo gets the class of 'page'...ok that was probably more that most of you wanted to know. )


what is the url?
__________________
"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; Feb 25, 2013 at 05:41 AM.
  #4  
Old Feb 25, 2013, 05:02 AM
GrahamW
 
95 posts · Jul 2010
Hello Juggledad and Jam

Thanks for the input so far.

The URL is http://www.catalystsatwork.com

I have a feeling that this is a problem associated with the interplay between the theme and the platform. I'm using Vista on my laptop and it makes this odd little "hole" beside the menu, but I just looked at it on an Android tablet and the images overlay the bottom half of the menu across the whole width.

Cheers
Graham
  #5  
Old Feb 25, 2013, 06:58 AM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
the 'margin-top: -28px' is causing the slide show image to overlap the menu. My guess is that it is overlaying a background, but not areas that have elements in it..

try using 'margin-top: -17px'
__________________
"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; Feb 25, 2013 at 07:20 AM.
  #6  
Old Feb 25, 2013, 08:21 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
I think in my original post I mentioned that the code would only work if all the pages had an image. To fix this issue you could add the following to compensate for the slideshow.
HTML Code:
body.home .slideshow {
    margin-top: 12px;
}
You would leave the other at -28px
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Feb 25, 2013, 02:24 PM
GrahamW
 
95 posts · Jul 2010
Geniuses!

I wish there was a manual somewhere that I could look these kinds of things up in - then I'd stop bothering you.

It wasn't until I wrote the post to you that I realised that the slideshow was acting differently from a straightforward image. It didn't occur to me that the -28px would be affected.

Please help me understand this a little... where does the variable .slideshow come from? Does that work for any shortcode that is in square parentheses?

While this has fixed the problem in Windows, the one with Android persists...

In this case, the slideshow overlays the %bar2 and the bottom of the %page-center. Images still have the problem I mentioned at the outset of the little window to the left of the menu.

Cheers
Graham
  #8  
Old Feb 25, 2013, 03:19 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
I use the Firebug extension for Firefox to determine selectors such as .slideshow and then play with the settings virtually. A manual isn't going to be of much help as plugins and thems all use different selectors for different purposes. Sometimes there are two plugins that use the same selector and so they conflict.

Android throws in another wrinkle. I don't have a way to virtually test for android.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Mar 21, 2013, 07:51 PM
GrahamW
 
95 posts · Jul 2010
Really sorry to resurrect an old thread, but...

I'd got this in place and had focused on a different aspect of the site. Now that I have checked it again, I can see that the original solution for pages with images on them has worked fine, but the code for the page with the slideshow present doesn't seem to be doing so.

I've tried changing the 12px setting but it doesn't appear to be doing anything after all.

Any ideas would be hugely appreciated.

Many thanks
Graham
  #10  
Old Mar 22, 2013, 07:28 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
It looks like the slideshow plugin was changed and so the selector has changed as well. The code to move that slideshow down should now be
HTML Code:
body.home .ngg-slideshow {
    margin-top: 28px;
}
This is why knowing how to use Firebug is important.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Mar 22, 2013, 11:30 AM
GrahamW
 
95 posts · Jul 2010
Oh dear! How embarrassing. Thanks very much, Larry. All sorted.

Many thanks
Graham

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Post Headline Font Size Problem CodaMan Atahualpa 3 Wordpress theme 4 Nov 3, 2012 02:48 AM
*problem* cant get the page menu background to expand to the left side of the layout eahing Page & Category Menu Bars 0 Apr 14, 2011 12:41 AM
Remove link from Post Headline on home page - novice GunSafesBlogger Atahualpa 3 Wordpress theme 1 Jun 18, 2010 01:55 PM
Style of Post Headline on Home Page is different vanderark1 Center area post/pages 1 Jan 28, 2010 03:13 AM
Page or Post Headline Font size problem. drleo66 Page & Category Menu Bars 2 Aug 8, 2009 05:03 AM


All times are GMT -6. The time now is 11:12 AM.


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