0

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

enter image description here

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:

enter image description here

I am including more requested information:

enter image description here enter image description here

UPDATE II

I asked another question and the issue is now solved.

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.

  • I had originally focused on the CSS and not really at all on the fact that you're trying to put a G+ button next to a Sharethis block in a MiniPanel. The problem is not at all the panel-separator, it's that the two different button sets are in two different mini-panels. The real problem is that the wrappers – jmarkel Feb 27 '12 at 13:06
  • The real problem here is that the wrappers around the mini-panels are <div>s, which are display:block and therefore have a line break between them. Seems like what you really need is 1)Put the G+ button in the same panel as the Sharethis block, and 2)Either use a float:right on the G+ button OR set both the Sharethis and G+ button's divs to display:inline-block. – jmarkel Feb 27 '12 at 13:14
  • You got half of the solution right. I asked another question (stackoverflow.com/questions/9467003/…) and it provided me with the other half. Many thanks for your help !!! – Jérôme Verstrynge Feb 27 '12 at 15:23
6

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;
    }
    
1

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']);
0

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.

  • I have included more information in the question. – Jérôme Verstrynge Feb 27 '12 at 9:54
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.