DeeEmm

Pragmatism in code

Pragmatism in code

Waxing lyrical about life the universe and everything software related since lunchtime 2006.

JomSocial CSS Maxification - less is actually more

JomSocial CSS Maxification - less is actually more

Just been putting a site together on the new JomSocial version 3. One of the first things I always do (as you should) is create a new template - a clone of the original one. This way I can hack away at creating the site and develop the template as I go along without changing the default.

Changing the style of elements by CSS is a pretty normal act and one that I prefer to do with the original CSS and not by overrides as is always suggested by vendors. Normally I use Coda to de-minify any minified CSS and then re-minify it once I have finished. For some reason I was hitting a few issues when de-minifying the standard templates style.css file, it seemed to be replacing any reference to images with an ASCII reference instead of the path and filename data. Guessing that this must be due to the method used to compress the file (something other than the normal whitespace stripper) I went on a hunt to find out what was up with the new CSS file format.

Not finding too much I stumbled across This Post which simply suggests that the CSS files should not be modified but does not say how they were compressed and how to de-minify them. It does however give a clue - 'use less compiler'.

So I goggled 'useless compiler' and came across the http://lesscss.org/ website. I say 'useless' with my tongue in my cheek, for on the first page there is a bit of a breakdown showing some examples, one is the use of variables.

Continue reading
10950 Hits
0 Comments

Dolphin 7 - Increase text size in comments box

If you have the tinymce editor enabled for comments boxes, and you wish to increase the size of the text, then you will need to do the following.

To alter the size of the text in the comments area - if you have tinymce enabled for comments.

Edit /tinymce/themes/advanced/skins/default/content.css

look for the following element

Continue reading
4392 Hits
0 Comments

Fixing the paragraph spacing issue

You may have noticed that after neatly setting out your post within the TinyMCE editor, when the page is published, the paragraphs are all squashed up.

The issue is a CSS issue. Basically the style applied to the P tag by TinyMCE and D7 are different - so it displays OK in the editor, but when the D7 code renders it - it is displayed differently.

The offending code is in templates/base/css/general.css, the attribute margin:0px is applied to the P tag, remove this and the issue will be gone, BUT there is one caveat - obviously this affects ALL instances of the P tag - so it may be that whilst this cures the immediate issue, it may cause problems elsewhere (i've not tested this, and this may be different for your site - depending on which template you use and what modifications you have applied to them)

To fix the issue, you will need to change general.css in two places -

Continue reading
3232 Hits
0 Comments

CSS For Beginners

{jcomments on}

After discussing template editing on another site, and how easy / hard it is to change the look and feel of your site to make it your own. I decided that in my opinion, the whole process is fairly simply to do but requires that you have knowledge of a few skills and a few tools to hand to help you out.

This is a basic outline of what to do and how to do it, use it as a guide to get you started on style modification, and applied to all sites using css and html.

First things first - lets cover the REAL basic stuff - not that anyone wanting to do this kind of stuff should be that much of a novice (you need at least half a clue), but more to emphasize the RIGHT way to do things. There are rules laid down by W3C and we should all do our best to read, understand and apply them.

Continue reading
1883 Hits
0 Comments