Jump to content
Sign in to follow this  
karmatrinlay

border-left breaks sidebar position

Recommended Posts

karmatrinlay

Hello, I can't figure this one out. I'm just doing a simple CSS mod on the sidebar wrapper. All I'm doing is setting a background color and a left border. The background color doesn't cause an issue. When I add:

#sidebar-wrap{background-color:#E5EFDB !important;}
to custom code, it works fine. However, If I make it:
#sidebar-wrap{background-color:#E5EFDB !important; border-left: 1px solid #F7B137;}
or
	#sidebar-wrap {
	       background-color:#E5EFDB !important;
	       border-left: 1px solid  #F7B137;
	}

It breaks the layout and the top of the sidebar begins at the bottom of the content loop (it's still in the sidebar area, just pushed down). Any idea why? for now I just have the border on sidebar1 but I'd like the border to be on sidebar-wrap if possible. It's a live site so I don't have it on sidebar-wrap at the moment, but I've tried three times (clear cache, look for typos, etc.) and always get the same result. Thanks!

Share this post


Link to post
Share on other sites
catrina

I think It appears at the bottom of the content loop because with that extra pixel added to the width, the sidebar gets too wide and gets pushed down to wherever it can go. Try decreasing the width of the sidebar wrap itself and add the left 1px border again to see if it doesn't break the sidebar.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
karmatrinlay

ahhh.. makes sense. I'll give it a try. How do I change the width? The content area just auto-sizes to take back anything I reduce the sidebar by in the template editor Thanks

Share this post


Link to post
Share on other sites
Rob

Width is changed via the Layout Editor in Dashboard > PageLines > Settings. It should adjust accordingly based on adjustments of the sidebar, just as the sidebar will adjust relationally to the width of the content area. Both occupy, proportionally a defined space. They're designed to balance against each other.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
karmatrinlay

Ok... simple math here. Please follow along. >IF the sidebar is dropping to the bottom of the content loop BECAUSE I'm adding a border... >AND IF the way to fix that is to reduce the size of the sidebar WHICH IS ALREADY CONTROLLED by the Layout Editor which is not compensating for the difference currently THEN using the Layout Editor to modify a setting it is already not compensating for (allowing 1 pixel border on the sidebar wrapper) when it has the behavior both you described and we both know to be true, is pointless. Please read Catrina's reply. If what she states is correct, then moving the sliders around in the Layout Editor will do nothing to compensate for the extra 2 pixels the sidebar-wrap will need.

Share this post


Link to post
Share on other sites
Rob

Actually, you have something filling 100% of the width of the sidebar. As a result, if any change is made to the sidebar width, the sidebar drops below the content area. Let me demo an example, showing that in fact, Catrina's correct. You have in your CSS (see via Firebug by highlighting the sidebar):

.one-sidebar-right #pagelines_content #sidebar-wrap {
	    width: 29.0909%;
	}
Go to Dashboard > PageLines > Settings > Custom Code > CSS Rules and apply this:
.one-sidebar-right #pagelines_content #sidebar-wrap {
	    padding-left: 1px;
	    width: 29.0909%;
	}

which adds one pixel of padding to the left. Because the width of the sidebar is fixed width, adding the pixel - just one - knocks the sidebar down. The problem appears to be the video embed which is occupying then entire sidebar plus part of the padding. It should probably be 30 to 40 pixels smaller in width. Even if I increased the sidebar width and content width, the video still attempted to fill the width. If it's set to 100% width, that would be an incorrect method of embedding the video. The rest of your sidebar does, btw, have a brownish/golden left border of 1px. It is only missing where that video is present.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
karmatrinlay

That wasn't it. :-( Yea, I thought Catrina was right. I just knew I couldn't resolve the issue with the Layout Editor! That's the YouTube Embed plugin from the Pagelines store. It was being allowed to auto-size. I've changed it and it's not the cause of it. Any other ideas?

Share this post


Link to post
Share on other sites
Danny

Hi, I have just added a border-left to your sidebar wrap and it hasn't caused any issue, what browser are you using ? http://screencast.com/t/3lZIodYng5


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
karmatrinlay

Yes, it is causing an issue. It's breaking in Firefox and IE. It does not break in Chrome only. Well, okay.. I haven't tested Bob's Browser, but it's breaking 2/3rds of the trifecta. I hope SOMEONE is getting some sleep. I'm surprised you've all been replying at this hour on a Sunday. Grateful though! :-) See images pagelines%20ticket%20-a.pngpagelines%20ticket%20-b.png

Share this post


Link to post
Share on other sites
catrina

Hm, strange, what if you removed the YouTube video inside that sidebar wrap?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
karmatrinlay

No change. It still breaks. The video was removed by going to the page > PageLines Meta Settings > then disable YouTube Embed

Share this post


Link to post
Share on other sites
Danny

Hi Kendall, Have you tried using a box shadow instead ? Have a look at your sidebar wrap using this instead.

#sidebar-wrap {box-shadow: inset 0 0 1px black;}


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
karmatrinlay

Hi Danny, Unfortunately applying a box shadow to one side only is a problem. It's not really designed to work that way and the browser support for box-shadow is still.... crappy. Unless you know of a clean way to do it? Thanks for thinking inside the box! :-p (worst pun of the day?)

Share this post


Link to post
Share on other sites
Rob

Do you have Firebug? If not, please download and install it from http://www.getfirebug.com. As I use it to view your sidebar, it's clear that the video in the sidebar is still pushing its limits. Let me explain. There's padding and margins associated with the video embed. As long as they're wider than the actual sidebar, trying to add any borders, margins or padding to the overall sidebar will break it, pushing the whole sidebar below the content area because at that point, it's exceeding the allowed space. Actually, Catrina is correct in that you could widen the canvas and as long as the video is a fixed width, your sidebar would widen and you could then add the left border. On a sidenote, rejecting a reply is really only for incorrect answers and not intended to keep topics open. We reply to both new and all open topics. Yours will not be ignored.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
karmatrinlay

please note: When I REMOVE the video entirely and then add a 1 pixel border, it still breaks.

/* appearance and layout adjustments for the sidebar wrapper */
	#sidebar-wrap{background-color:#E5EFDB !important; border-left: 1px solid #F7B137;}

breaks it. Though I see what you're bringing up about the video plugin, let me point out two things: 1.) Again, it still happens when the video object is removed 2.) That is the YouTube Embed I purchased through the pagelines store from one of your approved vendors. So since the behavior persists even when the video isn't present, the video is not the issue. Every solution I try - I try WITHOUT the video object and when it fails, I then add the video back so the content is present. I can address that IF needed, perhaps with the developer, once this issue is resolved. So the issue remains. Yes, I am using firebug. I've been building online systems for 17 years. Normally, accepting and answer closes a ticket, so no, I didn't realize that. Thanks.

Share this post


Link to post
Share on other sites
Rob

If the video isn't present, but the div container of the plugin for the video remains, then the space is still held. You may be removing the video not the actual widget. I'm unsure what process you're taking there. The code you've placed, or that the plugin has placed is very specific about the width.

I'm unsure what the sidebar width is, but, if the iframe is 292, then the sidebar MUST BE no less than 312px (there's 10px padding in there, somewhere). On my own site, I have an ad of 336px with, but to make it work, without being cut off, my site must have a sidebar of 352px because I narrowed the sidebar padding. I said in an earlier reply "It should probably be 30 to 40 pixels smaller in width." and that still holds true. The div container for the iframe has a 3px padding on left and right and as a result, using Firebug, I can clearly see it bleeds over the edges of the sidebar. I'm unsure why you're not seeing this. Take the entire widget out of the sidebar and you should see the border appear perfectly. I've tested my own site to see if I can replicate this problem and I can create a border, left, right, up, down or all around without issues. However, if I then add a div that's larger than the width of my sidebar, it slips down.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
karmatrinlay

I explained how above:

No change. It still breaks. The video was removed by going to the page > PageLines Meta Settings > then disable YouTube Embed
It's off now via the method I just described. The border IS enabled by the method I have already described in this ticket, but to repeat:
/* appearance and layout adjustments for the sidebar wrapper */
	#sidebar-wrap{background-color:#E5EFDB !important; border-left: 1px solid #F7B137;}

-It is broken NOW -The site is broken live in production now -The sidebar pushes down in IE and Firefox -There is no video -There is no video wrapper or placeholder unless the Pagelines code is writing out a wrapper for an inactive page element. If boxes are disabled on a page, does it write out a wrapper for them? -Now, please tell me how it's the video

Share this post


Link to post
Share on other sites
MrFent

I agree with Kendall. If the section is disabled using the method he described, there shouldnt be any hidden divs from the section still present and pushing the sidebar down the page. Chris

Share this post


Link to post
Share on other sites
karmatrinlay

I just tried the exact same change on another installation this one has had NO VIDEO EVER EVEN ASSIGNED and EXACTLY the same thing happens http://gitc.3dot0.net/

Share this post


Link to post
Share on other sites
karmatrinlay

These changes are on a production site now. That's the only way I could address this since the repeated explanations weren't working, soooooooooo... If someone could look at this, I would appreciate it

Share this post


Link to post
Share on other sites
karmatrinlay

I simply couldn't leave it up any longer...

Share this post


Link to post
Share on other sites
catrina

Is the production site a live site with a link that can be posted here?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
karmatrinlay

yea, that's what I have been linking. Unfortunately having to make updates on production for now www.sandiegoktc.org

Share this post


Link to post
Share on other sites
karmatrinlay

ok,

/* SIDEBAR WRAPPER appearance and layout adjustments */
	#sidebar-wrap{background-color:#E5EFDB !important; border-left: 1px solid #F7B137;}

Is live again on www.sandiegoktc.org You can see it breaking with no video object present

Share this post


Link to post
Share on other sites
karmatrinlay

ok... well... I'm going to set it back again.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • janpeeters
      By janpeeters
      Over the last month I had extensive communications with the developer of the (premium) Anything Boxes section (in Pagelines store) (Adam Munns) and the developer of the WP Polylang Multilingual plugin (Frederic Demarle).
       
      This was because the following problem occurred:
      Anything Boxes showed all posts of two languages (Dutch and English) on the respective static frontpages for each language. It should of course have filtered posts for Dutch language on the Dutch frontpage and English on the English frontpage.
       
      The solution to this problem was simple in the end. When duplicating a page for use in another language the settings for Anything Boxes were not copied to the new page and I should have set these settings manually again on the new page. I wasn't aware of this, but it makes sense. Because of this the pages didn't know how to differentiate between posts from different languages.
       
      The dev of Polylang told me that Polylang is currently smart enough to synchronize metas like Featured images and page templates but it does not work out of the box with metas created by plugins and themes but (according to Frederic) it is rather easy to add them in the list using the filter 'pll_copy_post_metas'.
      He mentions that he is not sure that these 'PageLines Meta Settings' are stored in post meta but that would make sense according to him. He asks if the Pagelines dev team will be interested to support this feature in the future.
       
      I'm also wondering if you will consider adding Polylang translation support for manually editable strings like the 'Read more…' strings in Pagelines Settings.
       
      Well that's of course up to you but I thought to let you know to be able to take this into consideration. I also post this for other users in case they experience the same kind of trouble and are looking for an answer.
       
      Best regards,
      Jan Peeters
    • bankrollbuilder
      By bankrollbuilder
      I used a custom hook to put a banner ad in my header. It works but its not in the right position. it is centered and above my logo and I would like to float it to the right of my logo in the header. heres the link: http://shaboopie.com/shaboopie-wp/free-logos-pg1/

      thanks.

      Dan B.
    • starlit
      By starlit
      Can one have two hero sections on one page?

      I want a landing page which leads/advertises two subpages.

      Or is there another option?

      Please help.

      THANK YOU
    • hutruk
      By hutruk
      Hi!

      I am using the shortcodes for tabs, as described in the documentation.

      When I insert the following code:


      [pl_tabs][pl_tabtitlesection type="tabs"] [pl_tabtitle number="1"]Title 1[/pl_tabtitle] [pl_tabtitle number="2"]Title 2[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [pl_tabcontent number="2"] Lorem ipsum dolor sit amet, consectetur adipiscing elit [/pl_tabcontent] [/pl_tabcontentsection] [/pl_tabs]

      I get a strange output (in the attachment).

      Any ideas?

      Thanks in advance!

    • MooiWeb
      By MooiWeb
      Hello,

      I would like to align my qtranslate with my breadcrumb so that the flags are on the same hight.
      I'm aware of putting a code in the custom css and tryed severall codes from your site but for now, no succes

      The site i'm working on is http://nieuw.vazdias.nl

      Thx,
      Edwin



×