Posted by fletch11 on November 13, 2010 at 5:21pm
9 followers
Jump to:
| Project: | Web Widgets |
| Version: | 6.x-1.4 |
| Component: | User interface |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
Can anyone let me know how I would let the widget inherit styling from the site its being displayed on? It seems strange to force other sites use your css styling but am having a hard time figuring out how to do so.
Thanks for help
Comments
#1
As a follow up, if you utilized the API would the end user be able to modify the CSS?
#2
Subscribing
#3
subscribing
#4
subscribing
#5
If you choose Embed Style = Inline you will find that the widget will adopt the styling from the host site. I've only just tested it and found that it's messing up the host css a bit, but that might be just my use case. I'm going to find out why the font size is shrinking everywhere.
#6
subscribing
#7
I have just started playing around with the module on my local machine. I've gone into the web_widgets_iframe_wrapper.tpl.php and removed <?php print $styles >. I then added a very bare bones external css stylesheet. It seems like you could customize the template and add classes that would be available for the host site to override and style. Obviously this would only work for developers who would be adding the code to a site and who have access to the back end.
#8
subscribing
#9
I was having this problem - when inline embedding was being used the website using the resulting embed code was getting it's styles broken by the widget pulling through all the styles and javascript through from my client's site.
I have solved this by adding a mod into the web_widgets_style_inline.inc file (which I dont like doing for futureproofing reasons - but I was a bit stuck).
Starting on line 48 is a function called template_preprocess_web_widgets_inline_wrapper
this creates the js_string variable that is used by the widget and calls the following 2 methods:
drupal_get_js
drupal_get_css
the issue with both of these is that they are both part of drupal's common.inc file - (so I didnt wanna mess with them) and these methods both check to see if anything is being passed to them and if not they run methods to get your drupal installs css and javascript (so everything that you would normally get included in the head of your pages) - this is not ideal for inline embedding as it causes conflicts with any site embedding items.
Personally I didnt want any JS or CSS coming through apart from my custom widget only css file.
so on web_widgets_style_inline.inc within the template_preprocess_web_widgets_inline_wrapper function I created the following array/entry
$tempcss['all']['theme']['sites/all/themes/mytheme/css/mywidget.css'] = 0;This matches the format of the css array entries that the drupal_add_css method puts in place.
I then amended the two calls to drupal_get_css() in this function - as they currently pass no variables and hence generate the site css into the js_string - I added a reference to pass my new variable with both calls. I also told the drupal_get_js() method to pass a blank string in as it evals against NULL.
so this:
function template_preprocess_web_widgets_inline_wrapper(&$variables) {$variables['head'] = drupal_get_html_head();
$variables['styles'] = drupal_get_css();
$variables['scripts'] = drupal_get_js();
$variables['content'] = drupal_get_css() . drupal_get_js() . $variables['content'];
$variables['js_string'] = drupal_to_js($variables['content']);
}
Becomes this:
function template_preprocess_web_widgets_inline_wrapper(&$variables) {$variables['head'] = drupal_get_html_head();
//@mod stop uneeded drupal styles when outputting inline
$tempcss['all']['theme']['sites/all/themes/mytheme/css/mywidget.css'] = 0;
$variables['styles'] = drupal_get_css($tempcss);
$variables['scripts'] = drupal_get_js('');
$variables['content'] = drupal_get_css($tempcss) . drupal_get_js('') . $variables['content'];
$variables['js_string'] = drupal_to_js($variables['content']);
}
Obviously I've now hardcoded a reference to css file in - so if I have multiple widgets on one site, they will all have to use one css file - one thing I would have done for myself is add an option into the views menu to allow the user to choose the stylesheet for the inline widget - but I didnt have time for that.
Just thought I would share what I did to fix this as it may be useful to whoever is looking at this ticket and apologies if I have broken some kind of etiquette by doing so (I dont really post here often).
#10
Hi -
I was also able to get the inline widget to display the widget host site's native css by changing this:
function template_preprocess_web_widgets_inline_wrapper(&$variables) {$variables['head'] = drupal_get_html_head();
$variables['styles'] = drupal_get_css();
$variables['scripts'] = drupal_get_js();
$variables['content'] = drupal_get_css() . drupal_get_js() . $variables['content'];
$variables['js_string'] = drupal_to_js($variables['content']);
}
to this:
function template_preprocess_web_widgets_inline_wrapper(&$variables) {$variables['head'] = drupal_get_html_head();
// $variables['styles'] = drupal_get_css();
$variables['scripts'] = drupal_get_js();
// $variables['content'] = drupal_get_css() . drupal_get_js() . $variables['content'];
$variables['content'] = drupal_get_js() . $variables['content'];
$variables['js_string'] = drupal_to_js($variables['content']);
}
in the web_widgets_style_inline.inc file.
So if xyz.com puts the widget on xyz.com, then the widget display will match the rest of xyz.com styles.
Hope this helps someone. ;0)