How to remove panel-separator CSS in mini-panels?

Question

I have an issue with a mini-panel which prevents me from aligning social buttons:

I tried to set:

.panel-separator { height: 0px; width: 0px; }

in my CSS, but the Google +1 button is still under the ShareThis buttons, rather than next to it. The only difference is that FireBug displays the div line as shaded. There is enough space on the right of the ShareThis buttons for the Google +1 button.

How can I solve this? Thanks. If it matters, I am using Panels Everywhere with the Versatile theme.

UPDATE

I tried .panel-separator { display: none; }. It improved the situation, but did not solve it:

I am including more requested information:

UPDATE II

I asked another question and the issue is now solved.

Answer 1

Your question is a little thin on specifics (like what the existing css is for .panel-separator) but you could try simply to set your css to this:

.panel-separator { display: none; }

I'm guessing that although you set height and width to 0, .panel-separator still has one or the other (or both) of padding and margin that are non-zero, and/or there's a cascade where the height is being overridden.

Answer 2

All you need is to override the panels_default_style_render_region function.

1. Open your template.php file that can be found here: /sites/all/themes/YOURTHEME/

2. Create a new function in end of the file

   function YOURTHEME_panels_default_style_render_region($vars) {
       $output = '';
       $output .= implode('', $vars['panes']);
       return $output;
   }
   

Answer 3

In the file /sites/all/modules/panels/plugins/styles/default.inc remove in line 23.

$output .= implode('<div class="panel-separator"></div>', $vars['panes']);

to

$output .= implode('', $vars['panes']);

Answer 4

It would be helpful to see more of the html including the placement of the buttons and the separator area fully expanded. ALso show us the specific CSS that is controlling the display by copying the relevant CSS from Firebug include in your question. The specific CSS is determined using a scoring system and without seeing more it is difficult to make suggestions to raise the score. The first thin I would try is changing the open class identifier .panel-separator to the specific html reference div.panel-separator. and see if that helps. Of course it may be that the browser is forcing padding between regions. If that is the case, you can try some negative values for padding. Depending upon the location, that may help you solve this. Another thing to play with is editing the settings for the panel layout. If you select to edit the layout from the panel dashboard pick the canvas drop down and edit the settings there. At the bottom of the form are settings for minimum spaces between various areas of the panel. One of these may be affecting your display as well.

Answer 5

I was in the same situation once. Here's what solved my problem:

You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.

For more info: https://www.drupal.org/node/579020#comment-8163459