Comments Off on Install fonts using Terminal in Lubuntu

By ZBog, January 28, 2013 01:56

I found a simple guide HowTo install fonts using the Terminal and I tested it on Lubuntu enjoy it!

http://www.stchman.com/install_fonts.html

Comments Off on UNRESOLVED WP Multisite bugs

By ZBog, November 7, 2012 07:17

This post is WIP

WordPress 3.4.1

Plug in: WordPress Importer

Missed categories
“Ho notato un errore nel blog.
Zbog mi diceva che postavo le cose senza aggiungere le categorie
in realtà, quando posto le robbe dal network mexico,
mette le categorie , una volta ripostate da li nella pag centrale nn compaiono” PkT

Ravanando nell’installazione multisito trovo che effettivamente le categorie del sito principale e dei vari sottositi non combaciano.
Al contrario di PkT io postavo dal sito principale e nel correllato sito guinea le Category erano scomparse.
Ma anche le stesse categorie con stesso settings, non vengono riconosciute.
Creandone di nuove non compaiono nei siti correlati…

Ho trovato molto interessante questo Blog post

Don’t Use WordPress MultiSite

da dove traggo l’informazione che google e simili potrebbero leggere i post identici di un multisito come spamming, e far scendere di visibilità l’indirizzo del sito.
Quindi sarebbe meglio limitare il numero dei Post doppioni, meglio usare pagine che visualizzano tutti i post con le stesse category e tag.

Proprio ciò che non funziona!
proverei prima con una diversa plugin:

http://wordpress.org/extend/plugins/wordpress-mu-sitewide-tags

“This plugin creates a new blog on your server for all the posts on your site, much like http://wordpress.com/tags ”

CSS multisito
Suggerisco di dare un impaginazione standard, a tutti i siti nel network, almeno per quanto riguarda il box selector,
dato che se il post ha 3 foto in verticale una dopo l’altra affiancate dal testo grazie al posizionamento <align=”links”>
si perde il bordo vertical and horizontal settato nell’interfaccia.

Log in
altro bug se accedo dal sito principale, poi edito il post dalla dashboard del sottosito, e lo condivido sul principale non compare sul sito madre

Comments Off on Create favicon.ico on Linux in 2 links

By ZBog, August 14, 2011 19:24

1. Tutorial Image editing:

U can create the image as .png with the Gimp Software, here the tutorial:

http://egressive.com/tutorial/creating-a-multi-resolution-favicon-including-transparency-with-the-gimp

Drupal interface did not like the.ico format directly saved from GImp, did not appear so I have saved a .png in Gimp and converted …

2. Post Image converting:

Post about converting .png to .ico with the Terminal on Linux:

http://steve.kargs.net/hosting/create-a-website-faviconico-with-ubuntu-linux/

Designers: Dont Panic !

If the lines of code make bleed your eyes, but you still want to work with Open Source Software … work with Linux developer or

get Ubuntu Studio optimized for Graphic Design, then all the tools are already include into your Operative System.

In the case you have all the tools:

you ´ll need to go into the directory where you have the png

$ cd Documents/design/logo/

and use just the last line from the article

$ icotool -o favicon.ico -c favicon.png

Comments Off on :first-letter pseudo-element for drop cap

By ZBog, July 19, 2011 17:03

If you want the  first-letter  of a <p>aragraph to look like Drop Cap (old fashion newspaper style), with a bigger letter floated to the left every browser shows up something different.

The main problem is to align in vertical the letter to the top of the text,the property vertical-align apply on the first-letter pseudo-element only if the float is set to none, that is a waste, the target I want to reach is big Letter with text around.  if I dont float the results, it shows a line break after the first line high like the height of the first letter.

Mozilla Firefox is the only one understanding a margin or padding from the top, so thumb up for this browser.

The developer tools presented in other browsers than Firefox dont allow me to edit the CSS in live, in order  to see faster which solution I can take.  for the other browsers I used the edit & try option of http://www.w3schools.com

IE6

This pretty article http://www.satzansatz.de/cssd/pseudocss.html discusses the classic IE behavior for typo and spacing errors,  IE6 requires an empty space between the class/id name and the comma and a space between the class/id  and the {} to read the properties

SOLUTIONS: Lets fight the Browser compatibility

1. Using spans: create a span around the first letter is the mostly compatible solution, frequently used in the past, but does not work for dynamic created content, at least it does not without a script that add the span automagically
2. insert line height and work on margin-bottom!
3. Use a specified font for the first letter , where the uppercases are positioned into the font editor 4 pixel down to the bottom line (simply crazy for mostly common low payed jobs!)

thanks to this article (http://www.users.globalnet.co.uk/~arcus/html/dropcaps.html) I noticed that the margin bottom on the contrary of the margin-top it works in many browser!

Important is also the line height which forces the browser to think about the first letter like if was height like the text.

the results are still really different for each browser, that terrifies me and the letter  is frequently higher than the line. but acceptable.

HERE THE CODE:
/*TODO check IE6*/

p:first-child:first-letter{
float:left; /* Make the text flow around the letter */

font-size:3em;
margin:4px 4px 0px 0px;/*for firefox that is the only one reading the margin-top*/
margin-bottom:-0.25em;/*for the other browsers, Chrome, Opera*/
line-height:0.97em; /*Adjustment mainly for IE , help position the letter on the same height then the text,  that has 0.97em line-height/
}

Comments (1)

By ZBog, August 15, 2010 11:28

I personally prefer to choose the Color Code by myself but when you suggest multiple sketches can be an help to dont repeat yourself.
the best tool is free to use on-line:
colorschemedesigner
with Html / Css / text / ACO (photoshop palette) / GPL (Gimp palette!) generator to save the color schem

Linux tools:
Firefox Plugin: Palette Grabber 0.4.1 [testing now come back visit us to know more!]

http://registry.gimp.org/node/15833 [Python plugin!]

AGAVE
ich spiele gerade mit diesen color code generator Agave
Agave is nothing special is only 1,262 kb big

I have found a Python plugin to let Agave run in Gimp ::
Color Scheme Helper for Gimp

A Python plugin that start the color scheme designer Agava for creating a new color scheme. The created color scheme can be saved as a Gimp color palette and loaded into Gimp.
In the software engine the only pretty idea is the contrast between text-background calculation…
changing the color automatically shows if is better a white or a black text on top of this color: Agave calculate if the bg color has a number higher then 555555 THEN the text is black and the opposite when the choosed gamma color is darker then 555555 the text will be white.

I m using AGAVE  as teaching tool, to show direct example of text contrast to graphic design students.

#tk: based on math – hmm naja interesting algorithm anyway … hehe ya should generate for special things like: body-font, screen-bgcolor, … i want some faders that automagically apply like livestyle to the site 😀 with correct pi and phi equations.

Color Scheme Generator version 3.51  has many new features!

The preview page I dont really like it use the colors in illogical contrast with the background

Comments (1)

By ZBog, August 12, 2010 15:28

There are some tricks to have “style”

When your graphical production does not look harmonic || professional || complete, you have to work on your sketches and find the main style (like a corporate identity) that represents the project.

Colors & Light
The colors change, based on the ambient light where you watch them, that means  if you want to have a realistic effect on your illustrations you cannot use a warm gray and a cold gray in the same image, in nature that will not happen.
But you can use those gray variants  to create a surreal image for example.
Remember that the colors are influencing the mood, so use them with a meaning.
If you are working on web, search for the standard  colors for similar projects, because the meaning of the colors is really different in the different continents and the meaning changes a bit even between the European countries.

Background
The Background is really boring to make but really important to do.
Empty background is a ZEN solution, white for day, and Black for night. works only in ZEN context.
None color works as a single color in professional illustrations.
If you want to use one tone a good suggestion is to make a material background:
*  take many different white and trow them together on the paper
* take a brush technique and use one color, you will get a single color but with brushes signs, a bit of 3D

Minimize or exaggerate
When something does not convince you, here is the best trick to be used:
* minimize: take it out and delete it, minimize the objects  and the number of images helps to make the structure easier to read and be modeled.
* exaggerate: the other way is to take this not stylish component and repeat it, use it multiple times, even always.
For example you are not sure if a text needs to have a Outline color, you can take out the Outline at all minimize(), or make it fat, stronger color and repeat it for multiple text on the composition (exaggerate).

Harmonia and Elegance
Don’t be afraid, is easy. Everything around you can be represented by math, mathematics as convention to explain the world, Music is math based, and Art too. You can compose your images with math help, use the “guide lines”  to see clearly the position of your object on the page, to calculate the empty spaces … and remember Math,  Geometry, Perspective, Harmonia and Elegance are all the same thing !
z.B. Leonardo Da Vinci
The elegance is into clear lines, so if you use a Vector Program  smooth your lines or draw with a smoother plugin activated:
Inkscape  you can realize this in many ways; for example take the tool ->  [ EDIT PATH BY NODES ]  ; now click on -> [ Make selected nodes symmetric ]
Elegance has few lines, not many particulars, like an Armani suite 😛
Harmonia is based on the cycle of the objects, how and how many times the object is represented.
If there is an object on the left and on the right is empty, that means the emptyness has a meaning, when there is no meaning make full the right side with something that balance the left content.

In history of art the idea of composition is always present, every artist uses a personal way to do it, but many people use the 3,14 rule, go check how the greek temples were built, how Eisenstein decided the video Editing of “Panzerkreuzer Potemkin”, how  Bruno Munari plans his graphics design.

Probably I will be banned from many Graphics websites after this post, because those tricks and tips are the precious knowledge of who work and study ART || GFX

but you know what? lets support and produce Evolution: OPEN SOURCE, OPEN MIND, NOT COMMERCIAL, SHARE ALIKE

Alice Z Bognetti

Comments Off on Firefox Firebug plugins for designer

By ZBog, August 4, 2010 16:06

Well supercool plugins for designers arrived fresh on FireBug

Pixel Perfect
Add the layout design in alpha transparency directly over the website in the browser.

CSS usage
Check which css properties are actually called from the code and applied. NOTICE: not everythin inactive is not used, it analyzes only the current page

(I love Firebug!)