DZone Snippets: style code

Adding style to SVG

jrobertson (James Robertson) — Fri, 18 Apr 2008 21:37:11 GMT

To reference a CSS file within an SVG file refer to the following example code.

Here's what an SVG CSS file looks like.



.str1 {stroke:#0093DD;stroke-width:16;color:#0093DD}

.str2 {stroke:#0093DD;stroke-width:12}

.str3 {stroke:#0093DD;stroke-width:10}

.str4 {stroke:#0093DD;stroke-width:6}



.str0 {stroke:#DA251D;stroke-width:55;color:#DA251D}

.str6 {stroke:#BB90BB;stroke-width:44;color:#BB90BB}

.str5 {stroke:#0093DD;stroke-width:4}

.str7 {stroke:#1F1A17;stroke-width:13}



.fil0 {fill:none}

.fil2 {fill:#1F1A17}

.fil1 {fill:#C4E5FA}

.fil3 {fill:#FFFFFF}

Source: Example for using CSS-Styles [carto.net]
Reference: Styling - SVG 1.1 - 20030114 [w3.org]

Adding CSS style to buttons

jrobertson (James Robertson) — Mon, 07 Jan 2008 22:03:32 GMT

This HTML and CSS code shows how to customise buttons in a restful way. Source: http://particletree.com/features/rediscovering-the-button-element/





    



    

         

        Change Password

    



    

        

        Cancel



/* BUTTONS */



.buttons a, .buttons button{

    display:block;

    float:left;

    margin:0 7px 0 0;

    background-color:#f5f5f5;

    border:1px solid #dedede;

    border-top:1px solid #eee;

    border-left:1px solid #eee;



    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;

    font-size:100%;

    line-height:130%;

    text-decoration:none;

    font-weight:bold;

    color:#565656;

    cursor:pointer;

    padding:5px 10px 6px 7px; /* Links */

}

.buttons button{

    width:auto;

    overflow:visible;

    padding:4px 10px 3px 7px; /* IE6 */

}

.buttons button[type]{

    padding:5px 10px 5px 7px; /* Firefox */

    line-height:17px; /* Safari */

}

*:first-child+html button[type]{

    padding:4px 10px 3px 7px; /* IE7 */

}

.buttons button img, .buttons a img{

    margin:0 3px -3px 0 !important;

    padding:0;

    border:none;

    width:16px;

    height:16px;

}

Adding colour to the buttons - Colour is used like a traffic light system, green for go (positive), red for stop (negative, think about this for a moment), and blue which isn't a traffic light (neutral, a miscellaneous item)



/* STANDARD */



button:hover, .buttons a:hover{

    background-color:#dff4ff;

    border:1px solid #c2e1ef;

    color:#336699;

}

.buttons a:active{

    background-color:#6299c5;

    border:1px solid #6299c5;

    color:#fff;

}



/* POSITIVE */



button.positive, .buttons a.positive{

    color:#529214;

}

.buttons a.positive:hover, button.positive:hover{

    background-color:#E6EFC2;

    border:1px solid #C6D880;

    color:#529214;

}

.buttons a.positive:active{

    background-color:#529214;

    border:1px solid #529214;

    color:#fff;

}



/* NEGATIVE */



.buttons a.negative, button.negative{

    color:#d12f19;

}

.buttons a.negative:hover, button.negative:hover{

    background:#fbe3e4;

    border:1px solid #fbc2c4;

    color:#d12f19;

}

.buttons a.negative:active{

    background-color:#d12f19;

    border:1px solid #d12f19;

    color:#fff;

}

Unix Console Styler

kedare (Mathieu Poussin) — Wed, 28 Nov 2007 19:21:49 GMT

This modue can be used to apply many style on Unix* terminals



# Unix Console Style

# You can use this module to apply a style on the terminal

#

# DON'T WORK ON WINDOWS (Only on Unix* Terminal)



module UnixConsoleStyle

  # Availables Styles

  STYLE = {

      :default    =>    "\033[0m",

    	# styles

    	:bold       =>    "\033[1m",

    	:underline  =>    "\033[4m",

    	:blink      =>    "\033[5m",

    	:reverse    =>    "\033[7m",

    	:concealed  =>    "\033[8m",

    	# font colors

    	:black      =>    "\033[30m", 

    	:red        =>    "\033[31m",

    	:green      =>    "\033[32m",

    	:yellow     =>    "\033[33m",

    	:blue       =>    "\033[34m",

    	:magenta    =>    "\033[35m",

    	:cyan       =>    "\033[36m",

    	:white      =>    "\033[37m",

    	# background colors

    	:on_black   =>    "\033[40m", 

    	:on_red     =>    "\033[41m",

    	:on_green   =>    "\033[42m",

    	:on_yellow  =>    "\033[43m",

    	:on_blue    =>    "\033[44m",

    	:on_magenta =>    "\033[45m",

    	:on_cyan    =>    "\033[46m",

    	:on_white   =>    "\033[47m" }

  

  # Methods to use if you want to apply a style

  def UnixConsoleStyle::apply_style(style)

    STDOUT.write STYLE[style]

  end

  

end

compactness considered harmful

LoveEncounterFlow (Flow) — Wed, 04 Apr 2007 19:01:53 GMT

the guys over @ http://101out.com/optimize_html_size.html have a nice post about writing compact code to ‘give your site that edge’ (my words) by compacting the hell out of your html and css. Sound as it sounds, it may very well not be what you want, or need.

for coding means authoring, writing, creating engines that do work. meaningful work, at the least working around meaning. your snippets count. they’re also a technology that is about posterity, and be that the next day. even if you don't plan your work, you still have some sort of goal when doing it, a future state.

there's a reason for most programming languages to be readable. however, programming and natural languages alike are but slate for chalk. so while it is perfectly possible to say `vals1=parms[:attrs]`, in most cases code like `attributiveValues=parameters[:attributes]` can assist you and others in reading, understanding, & writing code that makes that more sense.

in other words, so that others may better undestand me, i try to use language in a way that is less terse and cryptic than some of the usage that bytecount-aficionadós defer to. you'll be soon outgrown by tomorrow’s technologies if your hard work goes into maxing out byte efficency by hand. consider how much you can squeeze out of a webpage in turns of size. a few thousand bytes. i'm not talking about oversized `*.jpg`s here, those are still chunky. i talk about your `*.js`es, your `*.html`s and your `*.py`s. look, you squeeezed those bytes out of .top-left-div{border-width:1px} so now it reads .tld{border-width:1px}, and with 8-odd bytes still dripping from your fingers, you *forget* about that, it’s *history* to you.

meanwhile, some nerd has installed a freifunk wifi repeater in your street, meaning that the increased efficiency of your ambience means a far bigger increase in website availability than what your lexical shortcircuiting achieved.

back in the future, generations write many commentaries about the possible hidden semantics in css class `.tld`. did those guys really plan to take over a `top-level-domain` and thrive on `http://*.music` as soon as back in 2007? five years before they did? who knows?

this is not against abbreviations. my own code is full of `*P`s and `**Q`s, what would be `*args` and `**kwargs` much anywhere else. when i find i can establish a useful convention, i do that. so, maybe think it this way: are those `attributes` worth of being called the `A`s here and elsewhere? if you’re sure, go for it. you just saved 9 times repetitions bytes, that may add up to a lot. if you hate that much typing, get yourself a word completing ide (see, another abbr). but drop those `attrs` and `attribs`.

using Event.observe for when a page loads

moneypenny () — Mon, 20 Nov 2006 20:47:53 GMT

I just prefer this implementation as opposed to window.onload.

Event.observe( window, 'load', function() {

  // Put the Javascript that needs to happen when the page

  // loads here

} );

For example, here's a way to make most of your input fields and all of your textareas have a different class when they're selected. Useful if you want to style them differently with CSS.

Event.observe( window, 'load', function() {

  var inputs = document.getElementsByTagName( 'input' );

  var textareas = document.getElementsByTagName( 'textarea' );



  for ( var i=0; i    type = inputs[i].type;



    if (

      ( type == 'button' || type == 'reset' ||

      type == 'password' || type == 'text' ||

      type == 'submit' ) &&

      ( inputs[i].onfocus == '' ||

      !inputs[i].onfocus )

    ) {

      inputs[i].onfocus = function() {

        this.className = 'selected';

      }



      inputs[i].onblur = function() {

        this.className = '';

      }

    }

  }



  for ( var i=0; i    if ( textareas[i].onfocus == '' || !textareas[i].onfocus ) {

      textareas[i].onclick = function() {

        this.className = 'selected';

      }

      textareas[i].onblur = function() {

        this.className = '';

      }

    }

  }

} );

Toggle an element's display

korakot (Korakot Chaovavanich) — Mon, 20 Mar 2006 13:17:06 GMT

Sometimes you have a content that shouldn't display
by default. You can provide a link to display/hide
that content



toggle



Don't display me

Old and new-style class

korakot (Korakot Chaovavanich) — Thu, 09 Mar 2006 12:21:30 GMT

Old style class



class K:

  ...

New style class



class K(object):

  ...

Some features such as properties are only avaiable in new-style class.
Learn more about New-style class

Using <font> (font tag) within pys60 Text widget

korakot (Korakot Chaovavanich) — Thu, 02 Mar 2006 11:19:20 GMT

The Text widget allow rich text. However, it's quite
difficult to use. You need to set each attribute
(font, style, highlight, color) of the widget
before adding more text with differert style.

So, I make a function that make it a bit easier.
The font tag () is used (borrowed from HTML).
Attributes allowed are
- color ( #RRGGBB or 0xRRGGBB or color name)
- face ( both font and size eg. albi17b )
- style ( bold, italic, underline or strikethrough )
(styles can be combined using comma)
- highlight ( standard, rounded, shadow)
- hcolor ( highlight color )



from appuifw import *



def process_color(color):

    color_name = {

        'red': 0xff0000, 'green': 0x008000, 'blue':0x0000ff,       

        'black': 0,      'white':0xffffff,      'yellow': 0xffff00

        }

    if color.startswith('#'):   # HTML format #000000

        return int(color[1:], 16)

    if color.startswith('0x'):  # pys60 format 0x000000

        return int(color, 16)

    return color_name[color]



def set_ml(t, s):

    stack = []

    t.clear()

    t.font = 'normal'

    i = 0

    while i < len(s):

        if s.startswith('<', i):  # tag end or tag begin

            j = s.find('>', i) + 1

            if s[i:i+7] == '' or s[i:i+3] == '':

                t.color, t.font, t.style, t.highlight_color = stack.pop()

            else:

                stack.append([t.color, t.font, t.style, t.highlight_color])

                to_style = 0

                for attr_val in s[i:j-1].split(' '):

                    if '=' in attr_val:

                        attr, val = attr_val.split('=')

                        if attr == 'color':

                            t.color = process_color(val)

                        elif attr == 'face':

                            t.font = unicode(val)

                        elif attr == 'hcolor':

                            t.highlight_color = process_color(val)

                        elif attr == 'style':   # style and highlight go together

                            to_style |= eval('|'.join(['STYLE_' + st.upper() for st in val.split(',')]))

                        elif attr == 'highlight':

                            to_style |= eval("HIGHLIGHT_" + val.upper())

                if to_style:

                    t.style = to_style

        else:    # normal text

            j = s.find('<', i)

            if j == -1: j = len(s)

            text = u'' + s[i:j].replace('<', '<')

            t.add(text)

        i = j      # go next chunk

Now you can use it easily



>>> t = app.body   # use the default Text widget that start pys60

>>> set_ml(t, 'Hello World.')

>>>  # a stylish 'Hello World' is displayed

Notice:
- Quotation marks are not used to specify attribute values.
- A shorthand can be used for
- can be nested.

Vertical Centering in CSS

rafaeltds (Rafael Trindade da Silva) — Mon, 04 Jul 2005 10:39:30 GMT



#center{

   width:100px;

   height:100px;

   position:absolute;

   top:50%;

   left:50%;

   margin-top:-50px;

   margin-left:-50px;

}

usage:

Zebra stripes on table rows using Rails / RHTML

peter (Peter Cooperx) — Wed, 22 Jun 2005 09:57:04 GMT

<% @projects.each_with_index do |project, i| %>

<% row_class = i%2 == 0 ? "even" : "odd" %> 



......

<% end %>

In the CSS:

TR.even { background-color: #f00; }

TR.odd { background-color: #f00; }

etc..