WordPress nav bar shifts theme down, but not the background. :
-
It’s been a few days since I tried contacting the Happiness Engineers directly with no response, so I’ll try the larger pool of help here…
(copying and pasting from their e-mail back to me saying they got my support request…)The site is LSMiata.wordpress.com.
I designed a custom background to fit the theme Spectrum. Part of this included grabbing the green bar from the theme and integrating it into the background, underneath the foreground title of the blog. Checking it time and again while authoring in WordPress. It looked perfect.
Then I go and look at it in a different browser and the green bar on the background is in the wrong place. Way too low. After some quick guesswork, I realized the top WordPress navigation bar was pushing everything down the screen EXCEPT for the background, meaning the foreground (site) and background (image) didn’t properly line up for anyone logged OUT of WordPress.
So I go and fix it so it looks right for those logged out of WordPress, and now it looks all screwed up when I’m logged in and I have to keep reminding myself that this is correct (screwed up is right) and that this is so it is correct for the public at large.
– – –
The navbar should not alter the alignment / positioning of foreground and background elements on the page, it should push the WHOLE site down- including the background. This way, wordpress users, and site authors, who are browsing get the same experience as non-wordpress users (aka- public at large).
I can’t imagine this isn’t an ongoing tech issue but a cursory search of the forums found nothing.
The blog I need help with is: (visible only to logged in users)
-
-
The “body” which is where the background image is, is linked to the browser window. That means that the rest of the content will shift between logged in and logged out, but the background will not. There is a way to fix this but it requires access to the underlying theme PHP script files, and we don’t have access to those. This is one of the drawbacks of doing a background image this way and including visual elements related to things in main divs.
You would want to put the background for the site title/description into #header and then it would shift up and down with the page elements. It would likely take some tweaking of thing, but it can be done.
-
The other thing you will notice is if you narrow and widen your browser window, the green ribbon element in the background image moves around in relation to the title. Another reason not to do it this way.
-
I’m just not thinking completely tonight.
The other other thing is this would require the Custom Design Upgrade.
-
When I resize my window on a 24″ display, the foreground & background move separately, but are still correct as far as I can tell, so within a few pixels. Nothing like the foreground/background vertical shift with the WordPress nav bar.
I understand what you’re saying about it is how WordPress embeds the background in these CSS sites. I’m glad to find that I’m not seeing this wrong and that it is an actual problem. But the problem lies not with my site IMHO, but in the way WordPress implements their nav bar. They lay it over the background and push the foreground elements down.
They should do the equivalent of “frames” (gasp! the horror!) which would force the site to be drawn in its entirety, separately, below the nav bar. I said “equivalent” because there’s probably other technology… like just creating some code to push the background down XX number of pixels to compensate for the nav bar. And that code should be in the nav bar.
As I said, I’ve sent this in to the happiness engineers three days ago now and no word back. I just waned to assuage my concerns and find out if it was just me and something _I_ was doing wrong, or something inerrant to WordPress / the way they build the page / etc.
Thankfully, it’s the latter. So I don’t have to fix anything.
Unfortunately, it’s the latter. And the only way for me to fix it would be to pay them to get a CSS upgrade so I can compensate for bad coding on their part.
I’ll pass.
This is theirs to do correctly in the first place. JMHO.Thanks for taking a look and letting me know.
-
WordPress responded this morning:
> Thanks for the report. This is on our radar of things to look into and sort out
> but we don’t have a timeline for a fix at this point.> Thanks again for letting us know about it.
> Andrew | Happiness Engineer | WordPress.com
-
That is because the background and the content area (container/wrapper/page/wrap) are both referencing the same point on the browser window. The background image, in body, is not connected to the content though, it is connected to the browser window. For it to move with the content, it would have to be in a parent “div” of all the page elements, and it is not.
-
Think of it like this:
“body” (where the background image is) is your house. All the stuff on your web page is all the stuff you have in your house. If you rearrange the furniture, does your house move?
-
Yea, I get it.
But the problem is that I’m not the one doing the moving. WordPress is the mover, they created a system that shifts the page down but they forgot to include the background.Think of it like this:
I go to a museum and there’s a painting hanging on the wall. The museum decides to put a little info box next to the paining and to maintain the visual balance, they say they’ll shift the painting on the wall to the left 6 inches.
So they shift the painting to the left, but leave the frame exactly where it was.On paintings where there is no info box, the paintings rest properly within in their frames.
That’d be inane. And it is.
Wordpress is the museum. When you work with a site, they shift the painting to make room for the info box, but they don’t shift the frame.There are ways to fix it and Automatic has smart people.
-
The CAN’T include the background because it is in “body.” They could of course put a couple hours or so into modifying 150+ theme, both the underling theme files for each page type (which many mean 6 page types each theme) plus modifying the CSS (possibly again for several page types per theme). There are limits that they can put into modifying themes here.
You can always self-host a site and then whack the theme to your heart’s content. You will find few that do what you want them to do out of the box. Backgrounds are generally an image that doesn’t whine about a shift one way or the other, and in my opinion, anyone that relies on a background image to provide direct design elements for the main content area gets what they ask for. It simply isnt’ good design practice. Put any element that is dependent on a certain element into that element. Elements in a “body” selector are not tied to, nor will they move or shift with, other page elements.
-
Besides, the “background” declared in “body” is the museum, NOT the wall that the painting is hung on.
-
If you want the background to shift with when someone is logged in or logged out, you need to self-hoste a site so that you can add master parent divs to all the PHPscript files for all the different page types associated with a theme. You will find precious few that have an over all full-width/full-height div in them. You will have to add it. This isn’t a “WordPress” issue, it is a theme designer issue. It is up to the individual theme designers to add this sort of thing. Few even think about it, and the number of complaints about this that I’ve seen here in the forums I can likely count on three fingers.
With a self-hosted theme you can hack to your heart’s content. With a wordpress.com theme, you cannot because we cannot hack the underlying theme files.
-
Or they could put the WordPress nav bar in a frame and everything else begins NN pixels lower so foreground and background elements remain aligned whether logged in or not.
Or they could overlay the wordpress nav bar and push NO pixels down.
No theme has to be changed at all.Like I said, for the really smart people who code everything underlying WordPress, this is easy. That’s why WordPress is as powerful and as easy as it is. Because smart coders _made_ it that way. I’m just asking for one of those smart people to look at this and address it. I did that directly. They know about it (as I posted) and have it on their list of things to fix.
I’m sorry you feel the background should not be an integral element to the foreground elements. You should also tell that to the designers (and WordPress honchos) that developed & approved Matala. Try it. Put in a replacement background and the “ripped paper” that goes behind the page names vanishes. With CSS and advanced positioning, creating a detailed background is a fast & easy way to create a very visually arresting site without having to reposition a dozen little elements, in layers, on each page. Don’t try and correct me on this, it’s clear others are already doing it with officially approved themes.
I’m sorry that you feel it’s not something they need to fix, because WordPress explained to me they do know it’s a bug, and it’s on their list to fix.
I came here to get additional background to understand what I was seeing because the Happiness Engineers hadn’t yet replied. You helped me initially and I’ll thank you, again, for that. WordPress concurred that it needs fixing. I think that’s enough said.
-
When 95% or more themes put the “site background” in body, then it isn’t a “bug.” It may well be that this is a practice that needs to be changed or discouraged, but it isn’t a “bug.”
The fix still requires modifying each and every themes here to add a top level parent div, and then modification of the dashboard “background” function so that it puts the background image in that new top level div rather than in the “body.”
- The topic ‘WordPress nav bar shifts theme down, but not the background. :’ is closed to new replies.
WordPress.com Forums 