How do you add to the default styles that come with Mini panels? For instance, I would like to create various "rounded corners" styles to be able to have multiple variations of panes (different background colour, border colour and thickness, etc.)? Also, is there a simpler way to modify the colour/width of the borders other than to create my own versions of the "corner bits" pngs with different names? The fact that the included images are such a pale, almost invisible grey make me wonder if that's supposed to make it easier to add your own colours :}

The solution I've attempted is clumsy and produces an extra corner below the lowest panel (see attached screenshot to see what I came up with). The technique I used for this example involved tacking on some CSS at the end of my Zen subtheme's stylesheet (see code below) to override the default border pngs with coloured versions I made in Photoshop. I did find the code that embeds the css for the mini panels in rounded_corners.inc, but I'm not a strong enough coder to figure out if that's where/how I can add more styles.

I feel like these all must be the most basic things in the world because I've searched throughout drupal.org and elsewhere trying to figure this out and haven't found a single mention of anything helpful.

I'd really appreciate any nudge in the right direction ... Thanks for any help!

djhspence

#mini-panel-home .wrap-corner .l, .wrap-corner .r {
	background-image:url(/files/rounded_panels/corner-bits.png);
	}
#mini-panel-home .b-edge {
	background:transparent url(/files/rounded_panels/shadow-b.png) repeat-x scroll 0pt bottom;
	}
#mini-panel-home .r-edge {
	background:transparent url(/files/rounded_panels/shadow-r.png) repeat-y scroll right 0pt;
	}
#mini-panel-home .t-edge {
	background:transparent url(/files/rounded_panels/shadow-t.png) repeat-x scroll 0pt top;
	}
#mini-panel-home .l-edge {
	background:transparent url(/files/rounded_panels/shadow-l.png) repeat-y scroll 0pt 50%;
	}
CommentFileSizeAuthor
#29 styles.zip3.85 KBSinan Erdem
#19 rounded-corners-dialog.txt2.95 KBAnonymous (not verified)
#18 corner_trans.inc_.txt5.4 KBbomarmonk
borders_example.png41.29 KBdjhspence
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

merlinofchaos’s picture

You can always implement hook_panels_styles() in a module and mode your code after styles/*.inc. That's probably the easiest way to do large-ish changes.

djhspence’s picture

Thanks, I've obviously got some more learning to do before I figure out how to use your advice :) I'm just starting out with anything beyond XHTML.

Terrific modules, though - both Panels and Mini. Still getting my head around how to use them properly, but I really appreciate the layout flexibility they allow.

mariagwyn’s picture

Merlin, I am wondering the best solution for this.

I would also like to simply change the CSS for the corners and background of the panels, but it appears that the CSS is embedded in the node itself rather than attached via a sheet which can be overridden by my stylesheet. It seems far easier to override in a stylesheet than create a new module/node type (especially since some users may not need many panel pages). Is there anyway to allow the styles to pull from an external style sheet rather than embed in the node? This makes simple CSS overwrites very easy.

oh...this is not actually in reference to minipanels, but panels in general. I just ran across this post as I was trying to style the rounded corners of the panels display. I did read http://drupal.org/node/217553, but I am not sure that simply creating a new style is the best solution

Thanks, Maria

merlinofchaos’s picture

No, because the id of the pane/panel is dynamic, so it's difficult to put this in a stylesheet.

mariagwyn’s picture

Hmm. I am looking at the CSS on my page with 'rounded corners' style, and not only are the panels not given a unique ID, but the CSS generated on the node makes no reference to unique IDs, only classes. If it was in an external sheet, they could be overwritten without mucking in the code or creating special nodes/modules.

I am capable of generating a new style, since it looks like I can simply rename and replace the .inc sheet. But this is not a user friendly option, and it will get overwritten every time the module us updated.

thanks,
Maria

Wim Leers’s picture

For your own styles, you should indeed create new Panel styles. Examples: Tabs and Carousel.

However, you could also just target a specific panel page or mini panel or whatever kind of panel, by setting the CSS ID in the settings of that panel.

mariagwyn’s picture

Wim,

I am in process of making my own style, the only problem with this is that I need to reload it any time I update the module. If it were located in my sites folder, this would be less of an issue. It is still more complicated than simple CSS changes, so not all users can swing this, but is admittedly not that difficult.

I also tried your second suggestion, but simply using a unique ID does not allow me to easily create my own version of rounded corners, etc., since that requires more than one div to style. I did look at some other jquery functions that automatically write more divs into a page when called, which can then be styled with CSS. Unfortunately, that query seemed to cancel out the carousel query I am running within one of the other panels, so I stopped in disgust at my jquery ignorance.

I will live with a workaround, though I still think pulling the CSS out would be the easiest solution. :)

Maria

Wim Leers’s picture

I am in process of making my own style, the only problem with this is that I need to reload it any time I update the module. If it were located in my sites folder, this would be less of an issue.

I'm not sure what you mean by this? You can simply make your own module for this, so you can put it wherever you want.

djhspence’s picture

Is there a tutorial/documentation for this by any chance? I can't find one, but I might be looking for the wrong thing in the wrong places.

Wim Leers’s picture

No there isn't... The code that exists is so short and easy that it in itself should be sufficient as documentation. My point being: it's unlikely that an even easier tutorial will be written.

mariagwyn’s picture

Wim,

My point is that the documentation and creation is really NOT that easy. I have been working with drupal for years, and I am not a coder. I still find figuring out drupal code quite confusing. And the fact that any modification made in the contributed module (say, adding my own style by copying and editing an existing style) is written over with every module upgrade adds administrative tasks in the long run. I have found the easiest ways to modify is when things are controllable by CSS (I am a designer...), which I can keep safely away from regularly updated files. This is not to say that I can't learn, or others can't, but it is a fairly advanced skill (at least it has become so for me). With this module in particular, I was surprised to see the CSS written directly into the page, which makes it impossible to overwrite.

Having said that, I will simply create a new style. I have no idea how to create a new module, like I said, designer not developer.
No worries and thanks for your continued responses.

Thanks,
Maria

gracearoha’s picture

I also would like to simply change the color of my rounded corners, but i am quite new to this and can't see how to do this. Does anyone have any samples that they would be willing to share?

pribeh’s picture

ok guys, I'm at work right now, but when I get home I'll explain how I did something along these lines. I'm not currently employing panels 2 for any website right now so I need to familiarize myself with the code again.

The only way to do this is by making custom layouts with IDs (or unique classes) for each pane/panel. Then you can style it from within your theme's style-sheet or whatever. If you're using zen theme or another theme that outputs the page IDs then you can learn and style the corners according to whatever page is being displayed using firebug or whatever. I'll upload examples later tonight.

And yes, you have to produce new .pngs for whatever colors you want to work with. You could also use .png transparency if you're sure that your user base isn't using IE 5 or 6 - which can't handle it.

travischristopher’s picture

The other thing that works quite well is to just take the panel style that's being inserted into the page, paste it into your style sheet and use "!important" on the style you wish to override. This is less slick then using a module because your just overriding and your site will still have the old CSS in the page, but it gets the job and requires no PHP.

The trick is to use "!important". BAM your done.

#mini-panel-home .wrap-corner .l, .wrap-corner .r {
  background-image:url(/my-theme/corner-bits.png)!important;
}
#mini-panel-home .b-edge {
  background:transparent url(/my-theme/shadow-b.png)!important;
}
#mini-panel-home .r-edge {
  background:transparent url(/my-theme/shadow-r.png)!important;
}
#mini-panel-home .t-edge {
  background:transparent url(/my-theme/shadow-t.png)!important;
}
#mini-panel-home .l-edge {
  background:transparent url(/my-theme/shadow-l.png)!important;
}
mariagwyn’s picture

I just received an email asking if I ever got around this. So, here is my response:

Well, I actually gave up after I figured it out, b/c it was such a pain. But, here are the steps (probably should be tested, I may be missing some):

In the Panels Module folder is a "styles" folder. In are a set of foo.inc files, and a folder or two with images in them.

1. copy any of the foo.inc files. If you are wanting rounded corners, I recommend copying the rounded_corners.inc file.
2. rename it something with no spaces.inc (I came up with the brilliant rounded_corners_trans.inc b/c I was making transparent rounded corners).
3. Rename any place that says '_rounded_corners_' with your new name. If you don't do this, it will get all confused and call the wrong function from the wrong file. Find and replace (used carefully) is very handy for this. Example:

/**
 * Implementation of hook_panels_style_info().
 */
function panels_rounded_corners_trans_panels_styles() {
  return array(
    'rounded_corners_trans' => array(
      'title' => t('Rounded corners - Transparent'),
      'description' => t('Presents the panes or panels with a rounded corner box around them'),
      'render panel' => 'panels_rounded_corners_trans_style_render_panel',
      'settings form' => 'panels_rounded_corners_trans_style_settings_form',
    ),
  );
}

4. There is a section conveniently titled:

/**
 * Generates the dynamic CSS.
 *

This is where the CSS which is embedded in each panel page is actually created.
FIRST, you must change the $url to point to a new folder that you create with your corner graphics in it. This folder should go into panels/style. You can already see the 'corners' folder from the original rounded_corners.inc file. You must create your own graphics with the color of line and background color that you want. (Frankly, this is where I got stuck b/c I just didn't want to take the time to create neat transparent corner graphics. Transparent graphics are MUCH harder than ones with color. I got it to work, it just looked ugly and it wasn't worth my time. Yet.) Example:

function theme_rounded_corners_trans_css($display, $where = 'pane') {
  $idstr = empty($display->css_id) ? '.rounded_corner' : "#$display->css_id";
  $url = panels_get_path('styles/corners-trans', TRUE);

SECOND, you need to edit the CSS images to point to your folder and image rather than the previous one. Example (though I kept the names of the images the same):

$idstr .t-edge {
  background: url($url/shadow-t.png) repeat-x 0 top;
  font-size: 1px;
}

5. IF you want to actually change the html that is generated, you may do it in the section below the CSS. If you do this, make sure your CSS matches your modified html.

6. Upload these files into the panels module folder.

7. When you go to the panels settings for your view (or however you are using panels), you should now see your new panel option, and can select it.

8. YOU MUST REMEMBER that ever time you upgrade panels, this folder will be overwritten and so you need to re-upload the new files every time you upgrade. This was why I was hoping someone could pull the panel design OUT of the panel folder, to save extra upgrade steps, but no such luck. And I lack the skills to figure out how to override the theming function and place these files elsewhere.

Wim Leers’s picture

Thank mariagwyn, looks like a great tutorial. If you'd like, you could join the Drupal Docs team and add it to d.o/handbooks (no further obligations by becoming a member of the Drupal Docs team, no worries ;)). Otherwise, with your permission, I'll add it there.

Thanks!

SamRose’s picture

(if you add "*.inc" files and you upgrade your module via cvs, you will not overwrite when you upgrade via cvs)

bomarmonk’s picture

FileSize
5.4 KB

I am hoping someone can help me use Schillmaina's transparent PNG trick (at http://www.schillmania.com/projects/dialog2/) as a custom style for panels. I have tried converting it, but don't have it quite right. I'll attach my style sheet (style.inc file for the panels module) and see if anyone can figure out what I am doing wrong. I think it has to do with how I am trying to split Schillmaina's template across the title content and the panel content itself. That may be where my problem is... see the screen shot for the issue I am having and thank you for any help...

Anonymous’s picture

FileSize
2.95 KB

It's funny that bomarmonk mentions the method at Schillmania, because it's exactly what I've used. I've been quite happy with it, but it took a little while for me to understand how to work it for infinite variations.

If you make some changes to the dialog css so that the background position is specified in the .content box, you'll be able to change the background by changing the rules with this selector (for example). The default dialog.css relies on overrides to re-position the background, and if your different background styles appear after the dialog CSS rules, you'll get bad output. I've attached a cut and paste TXT of my code. I do not use the rounded corners CSS function from panels at all, but I override the other functions.

#mini-panel-longterm_campaign .dialog .content,
#mini-panel-longterm_campaign .dialog .t,
#mini-panel-longterm_campaign .dialog .b,
#mini-panel-longterm_campaign .dialog .b div { background-image: url(images/d5c4ff-bd-3f1f85-hd.png); }

bomarmonk’s picture

I tried your code, but I am having trouble getting this to work. Did you create an entire .inc file for this? If not, where did you place this? In your template file for your theme? Thank you for sharing this!

bomarmonk’s picture

I'm also unsure what image you are using here: #mini-panel-longterm_campaign .dialog .b div { background-image: url(images/d5c4ff-bd-3f1f85-hd.png); }

Anonymous’s picture

The theme override functions belong in template.php.

The CSS you quoted is incomplete. You need the whole snippet:

#mini-panel-longterm_campaign .dialog .content,
#mini-panel-longterm_campaign .dialog .t,
#mini-panel-longterm_campaign .dialog .b,
#mini-panel-longterm_campaign .dialog .b div { background-image: url(images/d5c4ff-bd-3f1f85-hd.png); }

This shows an example of a CSS style that would override the background image for one of your rounded corner boxes. The example given in the Schillmania tutorial uses just a "background" property, which overrides the position, color, image and offset all at once. If you do this, your rounded corner boxes will have the wrong position relative to the corner you're trying to display.

My code was a clip directly from a site I'm developing, so the CSS is specific to my site. In panels, you always have the opportunity to specify a pane's ID, so you'd replace my specified ID (#mini-panel-longterm...) with your own.

bomarmonk’s picture

bangpound, thanks again for your help, but I think my problem may still stem from my inability to understand what you are using as a background image for your panel div in the snippet above. What is d5c4ff-bd-3f1f85-hd.png? Thank you for any clarification! I think I am getting close to having this work...

bomarmonk’s picture

All right, I basically have this working, but I'm using both the CSS overrides and the style.inc file. I'll have to work things into one or the other, or maybe make a module for this... I like having cool transparent panels (they go well with the flexibility of the color module).

Anonymous’s picture

bomarmonk, my method differs barely from the Schillmania tutorial, which also has an identical selector with a background image. My background image is not important. The important thing is the background image's rule.

This is not a background for the panel div. It's the background for the four parts of the rounded dialog within the panel or within the individual panes.

If you get to your goal with a style.inc file and additional CSS, great. However, the discussion in this support request had diverted to questions about adding different rounded panel styles. The method I'm using does this without additional code. (But for my method, you do need to override theme code and CSS.)

sdboyer’s picture

Status: Active » Fixed
SocialNicheGuru’s picture

subscribing

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

Sinan Erdem’s picture

FileSize
3.85 KB

I just copied rounded_corners.inc and created some styles based on it, just changing the necessary names in the file. My files are like: rounded_corners_green, rounded_corners_blue etc.

The problem is... Although they are exactly same (excluding the fields about names) some of them work and some of them don't!! And now even if I copy some new style files made by other people, they don't work. The name of the style is seen, but simply the panel having that style associated dissapears.

From two inc files that I attached here; yellow works and blue not!!

I am just struggling about this for several days and it is driving me crazy. I am using Drupal 6.8 with panels 2 alpha 3.

If somebody helps about this subject, it will be much appreciated.

Sinan Erdem

merlinofchaos’s picture

One quick note: When you create a new style, be sure to clear the cache because styles include theme functions and these need to be registered. That might explain why some work and some don't.

crutch’s picture

all i need to do is change this css statement FROM

.rounded-corner .wrap-corner {
background:#ffffff none repeat scroll 0 0 !important;
}

TO

.rounded-corner .wrap-corner {
background:#000000 none repeat scroll 0 0 !important;
}

I changed the corner graphics to what is needed but for unable to locate that snippet.

crutch’s picture

oops found it in rounded-corners.inc

at

$idstr .wrap-corner {
background: #000 !important;
}

drecute’s picture

I got into this this thread looking for a solution to the problem "styling rounded corner mini panels on the same page".

In my case, I found out that when you have multiple mini panels on the same page, the css style rules will conflict even when you append each rule with an id. So get this done, I simply followed http://drupal.org/node/218960#comment-790385 work around. BAM! This is what works for me:

#mini-panel-blogger_of_the_month .rounded_corner .t-edge, 
#mini-panel-blogger_of_the_month .rounded_corner  .b-edge, 
#mini-panel-blogger_of_the_month .rounded_corner  .l-edge, 
#mini-panel-blogger_of_the_month .rounded_corner  .r-edge, 
#mini-panel-blogger_of_the_month .rounded_corner  .wrap-corner {
  position: relative !important;
  /* hasLayout -1 ? For IE only */
  zoom: 1;
}
#mini-panel-blogger_of_the_month .rounded_corner .t-edge {
  background: url(images/shadow-t.png) repeat-x 0 top !important;
  font-size: 1px !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .b-edge {
  background: url(images/shadow-b.png) repeat-x 0 bottom !important;
  font-size: 1px !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .l-edge {
  background: url(images/shadow-l.png) repeat-y 0 0 !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .r-edge {
  background: url(images/shadow-r.png) repeat-y right 0 !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner {
  background: #fff !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner .t-edge, 
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner .b-edge {
  height: 11px !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner .l, 
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner .r {
  position: absolute !important;
  top: 0 !important;
  height: 11px !important;
  width: 11px !important;
  background-image: url(images/corner-bits.png) !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner .l {
  left: 0 !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner .r {
  right: 0 !important;
  background-position: -11px 0 !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner .b-edge .l {
  background-position: 0 -11px !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner .b-edge .r {
  background-position: -11px -11px !important;
}
#mini-panel-blogger_of_the_month .rounded_corner .wrap-corner .r-edge {
  padding: 5px 24px !important;
}

You see! All single style rules are marked as important.

Thanks travischristopher.