How to change width of Joomla module - joomla2.5

I dont understand how to change width of module.
I find use Firebug that this not in css. Look :
element.style {
width: 50%;
min-height: 439px;
}
I need to change this width. I use option to search files with this keywords. But nothing.
I understand that this add by using Java Script or something like this.
My Joomla version 2.5.3

This width is created dynamically with javascript in module files.
You have to search /modules/*module_name/ to find the code that creating it (or if you are using a template override /templates/*your_template/html/*module_name/).
You could also add a css rule to override it like:
.class_name {
width: 100% !important;
}
Hope this helps

Related

Edit SVG color in draw.io

I'm following this guide on editing imported svg's in draw.io but with no luck. I am not getting the style options after inserting the editableCssRules=.*; code on the svg itself.
Has anyone else experienced this? I have the latest version installed and have restarted my machine.
I'm expecting to see additional Fill options as the guide suggests.
If possible, please attach SVG image and add the whole SVG code (Ctrl+e) with inserted editableCssRules=.*; so I can see all the details.
Thanks,
Same problem here.
Here is the whole SVG code as requested :
editableCssRules=.*;aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/general/File.svg;imageBackground=default;sketch=0;
The option editableCssRules just does what it says: it makes the specified CSS classes editables; in your case by using editableCssRules=.*; you are using a Regex expression to make all CSS classes in the SVG editable.
You are not seeing any options appear after modifying the style because with all probability the SVG you are using does not contain any CSS classes.
You will need to edit your SVG file and add the CSS classes that you need and refer to them in the paths, like so:
<style type="text/css">
.st0{fill:#000000;}
</style>
<path class="st0" d="YOUR_PATH_HERE"/>
Now, in draw.io import the SVG again and after adding the editableCssRules=.*; option to the style you should be able to edit its color, like so:

How to change the default value of padding of all ionic pages?

I want to change the default value of padding in ionic !
for example: I use this way to change the value for each page
<ion-content padding style="padding:5px;">
</ion-content>
So, Is possible to change the value of padding for all pages without use style many times?
The proper way to do this would be by looking for the Ionic SASS variable that defines the padding of each component (here), and override it in the variables.scss file.
So for example, if you want to change the padding of the ion-content in the entire app, you'd need to override the $content-padding SASS property:
$content-padding: 10px; /* The default is 16px */
Please also notice that if you want you can change it for a particular platform if you don't want to change it for all:
$content-ios-padding: 10px;
$content-md-padding: 12px;
$content-wp-padding: 14px;
If you want to change the padding of the ion-card, just search for the SASS property related to that padding/margin of ion-card components, and override it in the variables.scss file.
Ok at first i didn't get what you actually meant if you want to override the default padding attribute value you need to go to
src/theme/variables.scss file, and just add a new value to the file:
$content-padding (
padding : 5px
)

wkhtmltopdf always using default sans-serif font

I'm using a Django wrapper with wkhtmltopdf however I'm having the problem that regardless of the fonts I use in my CSS it always just shows a default sans-serif font. It works locally and also works on the server when I just generate the HTML without converting it to the PDF.
This is how it shows on the server in the PDF and this is how it shows locally in the PDF. The font is a custom font base64 encoded, however it doesn't matter what font I use as none make a difference.
Is it something to do with the server setup?
Anyone have any ideas?
Thanks in advance.
What's the css you're applying to the text? wkhtmltopdf has some quirks, and apparently doesn't like fallbacks (link). I was observing something similar and finally got a serif font (closest I could get to Times New Roman w/o downloading) by doing
font-family: "serif";
wkhtmltopdf only includes fonts if it finds them in the local system in /usr/share/fonts
If you use fonts like font-family: 'Liberation Sans'; ,wkhtmltopdf will correctly include them in the PDF and render them as it should.
If someone is still looking for a solution (in the current version of wkHTMLtoPDF). The solutions above didn´t solve my problem.
For me the correct solution was to add an svg-font for each font (font-type). wkHTMLtoPDF takes at least the svg. In my case, it always took the fallback font (Arial). I just converted each font and added it to my font.scss.
I hope this helps.

Font awesome with raphael js

What I want is to create a simple circle with raphaeljs that will have the facebook's 'f' inside (this will also be used for other similar cases). The 'f' symbol will be produced by font-awesome.
What I have done (and did not work) is to set the font family using css and/or as a raphael attribute.
The code is the following:
HTML
<div id='share-facebook'></div>
CSS
#share-facebook {
font-family: FontAwesome;
}
Javascript
var canvas = Raphael('share-facebook', 100, 100);
var facebookWrapper = canvas.circle(50,50,50);
facebookWrapper.attr('fill', '#E3E3E3');
facebookWrapper.attr('stroke','none');
var facebookText = canvas.text(50,50,'&#xf09a');
facebookText.attr('font-size', 40);
facebookText.attr('fill', '#fff');
facebookText.attr('font-family','FontAwesome');
Here is also a fiddle to make your life easier. From what I have seen the issue is that raphaels places the character inside a tspan inside the text node and it cannot be decoded. Anyone has an idea how to overcome this issue?
use canvas.text(50,50,'\uf09a'); instead of canvas.text(50,50,'&#xf09a'); and it works
Not really the answer you expect, but you can use Raphael free icons (http://raphaeljs.com/icons/) instead of FontAwesome. Each icon is a Raphael path you can then do:
paper.path(<icon path here>).attr({fill: "#000", stroke: "none"});
then I guess you can apply any transform, scaling, positionning as with any other path.
I did a little update on your fiddle to demonstrate http://jsfiddle.net/K6rrf/1/. I did not remove your code just added the 2 last lines...
Hope this helps a bit
Cheers

Easy way to add experimental consistently css for multiple browsers?

I was wondering if there was a tool that can "pre-process" CSS and automatically add experimental properties so they'll look the same on browsers that support it. For example, instead of writing:
.class {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px }
I could just write:
.class {
border-radius: 8px }
And the others would be automatically added. For border radius it's not too bad, but it is for gradients. To accomplish the same result:
background: -moz-linear-gradient(top, #00abeb, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));
LESS would be perfect if it had a feature like this. Does anyone know of a tool that does have this?
You could also try Compass. Compass has a CSS3 library premade :) (compass is just a mashup of blueprint framework and SASS)
http://compass-style.org/docs/reference/compass/css3/shared/
Sounds like the kind of thing that Sass should be able to do.
Looks like I have to read the documentation more carefully. LESS does indeed support this feature. (And it was on the front page!)
Here's a tutorial for the people looking at this question