Real time CSS editor

[chem]

Voor devvers die regelmatig CSSjes aanpassen en/of tweaken voor bv. skins, is het een crime om elke keer van app te veranderen, wijzigen, bewaren, app veranderen, f5... en opnieuw.

Als je Firebird installeert, en vervolgens de EditCSS extension, kan je realtime in een sidebar de CSS wijzigen.

"A real time saver"

[André]

* André download en gaat even spelen.

Kijk dit is nou een tool die verschrikkelijk handig is. Dan kun je dus real time je css editten. Een soort WYSIWYG, maar dan mooier.

[Verwijderd]

Helaas ondersteunt Mozilla Firebird geen div's...

[Willem]

wat is dat voor mooi verhaal?

[NH298]

Verwijderd schreef op 07 October 2003 @ 13:26:
Helaas ondersteunt Mozilla Firebird geen div's...

Volgens mij wel hoor

en deze extension is echt super

edit:
je eerste post trouwens, Welkom op GOT

[ Voor 13% gewijzigd door NH298 op 07-10-2003 13:48 ]

[Pelle]

Bwhehehe ik snap niet hoe je bij die wijsheid komt inderdaad, lasa.

[André]

Verwijderd schreef op 07 October 2003 @ 13:26:
Helaas ondersteunt Mozilla Firebird geen div's...

Ja, dus...

Heb je bewijzen voor......nee......oke duidelijk.

[Jasper]

Die tool is inderdaad erg handig. Baal er niet van.

[Pelle]

Werkt lekker ja. Ik zou er bijna firebird voor gaan gebruiken.

[Jasper]

Het mooie is dat hij de CSS onthoudt als je de panel open laat staan. Zo kan je dus de complete site bekijken met de gewijzigde stylesheet.

Als je in de toekomst nou ook nog je custom-stylesheet kan blijven gebruiken op die site is het helemaal mooi.

Copy/paste onderstaande CSS maar 'es in de CSS sidebar als je op GoT zit. Fraai grijs is niet lelijk.

klik hier voor sourcecode

code:

/* Type CSS rules here and they will be applied
to pages from 'editcss'
immediately as long as you keep this window open. */

/**** LINK-tag style sheet got.css ****/

body,td {
    font-family: verdana, arial, avant garde, helvetica;
    font-size: 13px;
    color: #000000;
}

.welcome {
    font-family: verdana, lucida, helvetica, arial;
    font-size: 10px;
}
.tdtopyellow {
    font-size: 10px;
    color: #FDD103;
    font-weight: bold;
}
.tdtopyellow2 {
    font-size: 10px;
    color: #FDD103;
    font-weight: bold;
}
.cookiecrumble { background-color: #fdd103;}
.cookiecrumblelink {
    font-size: 11px;
    color: #000000;
    font-weight: bold;
}
input {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
}
textarea {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    width:400px;
}
pre {
    font-family: Courier;
    font-size: 13px;
}


/*  N I C K   C O L O R S  */
.user {color: #000000;}
a.user {text-decoration: none; color: #000000;}
a.user:hover {text-decoration: none; color: #000000;}

.gotcrew {color: #990000;}
a.gotcrew {text-decoration: none; color: #990000;}
a.gotcrew:hover {text-decoration: none; color: #990000;}

.mtcrew {color: #006600;}
a.mtcrew {text-decoration: none; color: #006600;}
a.mtcrew:hover {text-decoration: none; color: #006600;}

.tnetcrew {color: #000080;}
a.tnetcrew {text-decoration: none; color: #000080;}
a.tnetcrew:hover {text-decoration: none; color: #000080;}

.parse {color: #51449F;}
a.parse {color: #51449F;text-decoration:none;}
a.parse:hover {color: #51449F;text-decoration:none;}

.pimp {color: #FF148C;}
a.pimp {color: #FF148C;text-decoration:none;}
a.pimp:hover {color: #FF148C;text-decoration:none;}

.litemod {color: #000000;}
a.litemod {text-decoration: none; color: #000000;}
a.litemod:hover {text-decoration: none; color: #000000;}


/*  O T H E R  */
.quote {
    font-size: 13px;
    border-color: #666666;
    width: 500px;
}
.signature {
    font-size: 10px;
    color: #00084A;
}
.status {
    font-size: 10px;
}
.code {
    font-size: 10px;
}
.flame {
    color: #FF0000;
    font-weight: bold;
}
.troll {
    color: #00FF00;
    font-weight: bold;
}
.numbers {
    ;
}
.phphighlight {
     background-color: #FFFFFF;
     border-color: #000000;
     border-style: solid;
     border-left-width: 1px;
     border-right-width: 1px;
     border-top-width: 1px;
     border-bottom-width: 1px;
}
.phphighlightline {
     background-color: #d3d3d3;
     text-align: right;
     border-right-width: 0px;
     font-family: monospace;
     font-size: 12px; 
     line-height: 125%;
}
.phphighlightcode {
     border-left-width: 0px;
     font-family: monospace;
     font-size: 12px;
     line-height: 125%;
}
.edit {
    font-size: 10px;
    color: #333333;
}
.highlight {
    color: #FF0000;
    font-weight: bold;
    background-color: #00FF00 ;
}
.me {
    color: #DF040F;
}
.mono {
    font-family: "Courier New", Courier, mono;
}
.serif {
    font-family: serif;
}
.sansserif {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.offtopic {
    color: #555555;
    font-size: 10px;
}
.credit {
    color: #666666;
}
a.link {
    text-decoration: underline;
}
a.link:hover {
    text-decoration: underline;
}
a.message {
    text-decoration: none;
}
a.message:hover {
    text-decoration: none;
}

a.messagelink {
    text-decoration: none;
}
a.messagelink:hover {
    text-decoration: none;
}
.online {
    color: #000000;
    text-decoration: none;
}
    .posterstatus{}

    .postersubtitle{ font-style: italic; }

    .forumpulldown {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    width: 280px;
    height: 21px;
    border: 1px solid #000000;
    }

    .forumpulldownsmall {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        width: 170px;
        height: 21px;
        border: 1 solid #000000;
    }
    .forumpulldownbottom {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        width: 280px;
        height: 21px;
    }
    .pagespulldownlite {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #000000;
        width: 50px;
    }
    .faqpulldown {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #000000;
    }
    .forumsubmitlite {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        height: 21px;
        color: #000000;
        border: 1px solid #000000;
    }
    .pagespulldown {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        color: #000000;
        width: 50px;
    }
    .pagespulldowntopic {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #000000;
        width: 50px;
        height: 20px;
    }
    .forumsubmit {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        height: 21px;
        color: #000000;
        border: 1px solid #000000;
    }
    .forumsubmittopic {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        height: 20px;
        color : #000000;
        border: 1px solid #000000;

    }
    .topicnotecounter
    {
        font-size: 11px;
        background-color: #D7D5F4;
        color: #000000;
        font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
        border: 1px;
        width: 25px;
    }
    .forms
    {
        color : #000000;
        font-size: 12px;
        font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
        border : 1px solid black;
    }
    .find
    {
        color : #000000;
        font-size: 12px;
        font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
        border : 2px solid black;
        padding : 2px;
    }
    .textarea
    {
        color : #000000;
        font-size: 12px;
        width: 550px;
        height: 250px;
        font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
        border : 1px solid black;
    }

/*  T A B L E   E N   C E L   K L E U R E N  */
.bg {background-color: #000000;}
.content1 {background-color: #aaaaaa;}
.content2 {background-color: #c6c6c6;}
.content3 {background-color: #d6d6d6;}
.content4 {background-color: #cccccc;}

.altmsg2 {background-color: #cccccc; }
.altmsg1 {background-color: #dddddd; }


/*  L I N K S  */
a {
    color: #000000;
    text-decoration: none;
}
a:hover {
    color: #111111;
    text-decoration: underline;
}
a.tdtopyellow {
    text-decoration: none;
    color: #FDD103;
}
a.tdtopyellow:visited {
    text-decoration: none;
    color: #FDCE00;
}
a.tdtopyellow:hover {
    text-decoration: none;
    color: #C8C8C8;
}
a.tdtopyellow2 {
    text-decoration: underline;
    color: #FDD103;
}
a.tdtopyellow2:visited {
    text-decoration: underline;
    color: #FDCE00;
}
a.tdtopyellow2:hover {
    text-decoration: underline;
    color: #C8C8C8;
}
a.forum {
    color: #00084A;
    text-decoration: underline;
}
a.forum:visited {
    color: #000000;
    text-decoration: underline;
}
a.forum:hover {
    color: #111111;
    text-decoration: underline;
}
a.forumreport {
    color: #EE0000;
    text-decoration: underline;
}
a.forumreport:visited {
    color: #EE084A;
    text-decoration: underline;
}
a.forumreport:hover {
    color: #111111;
    text-decoration: underline;
}
a.cookiecrumblelink {
    font-size: 11px;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}
a.cookiecrumblelink:hover {
    color: #444444;
    text-decoration: none;
    font-weight: bold;
}
a.edit {
    color: #666666;
    text-decoration: underline;
}
a.edit:hover {
    color: #666666;
    text-decoration: none;
}

a.shortcut {
    color: #000000;
    text-decoration: none;
}
a.shortcut:hover {
    color: #111111;
    text-decoration: none;
}

a.notes {
    color: #FF0000;
    text-decoration: none;
}
a.notes:hover {
    color: #FF0000;
    text-decoration: none;
}

a.content {
    text-decoration: underline;
}
a.content:hover {
    text-decoration: underline;
}
.foldimage {
    cursor: hand;
}

/* SEARCH HIGHLIGHT COLORS */
.highlight1
{
    color: black;
    font-weight: bold;
    background-color: #FFFF66 ;
}

.highlight2
{
    color: black;
    font-weight: bold;
    background-color: #A0FFFF ;
}

.highlight3
{
    color: black;
    font-weight: bold;
    background-color: #99FF99 ;
}

.highlight4
{
    color: black;
    font-weight: bold;
    background-color: #FF9999 ;
}

.highlight5
{
    color: black;
    font-weight: bold;
    background-color: #FF66FF ;
}

.code_preproc       { color: #ff0000; }
.code_string        { color: #e000e0; }
.code_comment       { color: #008000; }
.code_error_line    { color: #ff0000; text-decoration: underline; }
.code_error         { color: #000000; text-decoration: none; }
.code_keyword       { color: #0000ff; }
.code_number        { color: #800080; }
.code_method        { color: #000080; font-weight: bold; }
.code_name          { color: #000080; }
.code_ident         { color: #800000; }


/**** Inline STYLE-tag style sheet ****/

td {font-size : 12px;}span.qoute{font-size: 10px;width : auto;}

[ Voor 3% gewijzigd door Pelle op 07-10-2003 17:13 . Reden: ff lap source code weggewerkt :) ]

[nero355]

Dat is handig ik gebruik Firebird en moet met CSS binnekort prutsen THNX !!!

[ Voor 9% gewijzigd door nero355 op 07-10-2003 14:01 ]

[André]

Ik ben nu een tijdje aan het spelen geweest maar dit is echt de ultieme css editor. Gewoon real-time wat spelen met de stijlen totdat de juiste gevonden is. Daarna gewoon copy/paste en voila. Dit gaat bij het opzetten van nieuwe sites heel veel tijd schelen.

[Verwijderd]

Die real-time CSS editor is ideaal, net ff getest met die stylesheet.. GoT @ Grey ziet er goed uit.

Had btw nog nooit op die plugins page gekeken, maar zo te zien staan er wel nuttige dingen tussen.

/me gaat ff verder neuzen

[BetuweKees]

ideaaal..
sinds een tijdje al helemaal verslaafd aan FB, en met deze extenstion ebij gaat het alleen nog maar erger worden..

[nero355]

w00t GoT Grijz Mooi is echt mooi en veeeel leesbaarder : Click!
Hij is 200 kb'tjes & reso : 1152x864

[ Voor 13% gewijzigd door nero355 op 07-10-2003 15:02 . Reden: zo goed :) ]

[Verwijderd]

Geweldige tool idd, wat een mooie aanvulling zou zijn is dat je als het ware een tooltip op elk element in de browserwindow krijgt te zien met daarin de stylesheet class naam van het element. Om alle elementen snel te kunnen identificeren.

[Rickets]

Bedankt voor de tip, chem! Heb je ook zoiets voor Internet Explorer?

Verwijderd schreef op 07 oktober 2003 @ 15:02:
Geweldige tool idd, wat een mooie aanvulling zou zijn is dat je als het ware een tooltip op elk element in de browserwindow krijgt te zien met daarin de stylesheet class naam van het element. Om alle elementen snel te kunnen identificeren.

Je weet zelf wel wat voor elementen je hebt lijkt me? En wat als iets geen class heeft? Lijkt me niet echt een nuttige feature

[ Voor 8% gewijzigd door Rickets op 07-10-2003 15:06 ]

[Willem]

Apart... als ik vervolgens een andere site open, gebruikt die site zelf geen CSS, en is de EditCSS bar links ook gewoon empty Reloaden haalt niets uit.

[Verwijderd]

willem169 schreef op 07 October 2003 @ 15:10:
Apart... als ik vervolgens een andere site open, gebruikt die site zelf geen CSS, en is de EditCSS bar links ook gewoon empty Reloaden haalt niets uit.

Had hetzelfde probleem, maar als je bij allebei de vensters (of tabs) de CSS Editor sluit, en vervolgens bij de nieuwe opent, werken ze allebei wel..

[Jasper]

Klopt idd. Als je de CSS editor open houdt, neemt hij de CSS mee naar de andere site. Gewoon de editor sluiten als je ergens anders heen browsed.

[Verwijderd]

hmm.. als je dan weer gaat reloaden.. verdwijnt de stylesheet weer

[chem]

Rickets schreef op 07 October 2003 @ 15:05:
Bedankt voor de tip, chem! Heb je ook zoiets voor Internet Explorer?

[...]

Je weet zelf wel wat voor elementen je hebt lijkt me? En wat als iets geen class heeft? Lijkt me niet echt een nuttige feature

ben er mee bezig om er een bookmarklet voor te maken

JavaScript:

function f(e){v(e.target);}function v(e){ac=new Array();w='';while(e.parentNode!=document){if(e.className)ac[ac.length]=e.className;e=e.parentNode;}for(i=ac.length-1;i>1;i--){w+=ac[i]+'\n';}alert(w);}window.addEventListener("click",f,false);

how to:
maak een bookmark (any page) in je toolbar;
wijzig de bookmark, zet als naam "meukee" ofzo;
als URL: bovenstaande string, maar javascript: ervoor, dus
javascript:function f(e){...
sluiten en dan op een willekeurige page de bookmarklet aanklikken. Je kan nu op elk element klikken om een lijstje van de classes te krijgen.

Er zijn maar 255 chars beschikbaar voor een bookmarklet, dus meer functionaliteit kon ik er niet inproppen... dan moet ik een hele extension maken etc,

[ Voor 66% gewijzigd door chem op 07-10-2003 16:34 ]

[André]

Kijk, nu is firebird onmisbaar voor developers. Je kunt de classes opzoeken met chem zijn bookmarklet en daarna veranderen in de stylesheet. Eventueel zou je de naam van het element er ook nog bij moeten krijgen omdat die ook in de stylesheet kunnen staan natuurlijk.

[PrisonerOfPain]

Om nog maar wat meer MozDev links rond te strooien MozEdit

Adds an advanced text editor to Firebird. The editor offers quick editing of chrome and user.js files, html preview, document history, autobackup, find/replace with regex, JavaScript Console, multiple document buffers, a command line to run programs, and an edit in Mozedit new Tools menu option.

[ Voor 58% gewijzigd door PrisonerOfPain op 07-10-2003 18:05 ]

[André]

Ja oke, er staan wel 100 plugins/extensions daar. Kun je tenminste uitleggen wat het doet?

[simon]

Bestaat deze plugin (soortgelijke) ook voor Mozilla? Ik heb geen firebird draaien En hij werkt niet onder Mozilla..

[ Voor 27% gewijzigd door simon op 07-10-2003 17:06 ]

[André]

Mozilla Firebird is de opvolger van Mozilla, dus waarom download je die niet.

[Jasper]

Simon schreef op 07 October 2003 @ 17:06:
Bestaat deze plugin (soortgelijke) ook voor Mozilla? Ik heb geen firebird draaien En hij werkt niet onder Mozilla..

EditCSS installs correctly in mozilla : it appears in chrome://editcss/content/ecSidebar.xul but the sidebar processus is quite different from Firebird. That's why for now, EditCSS is only for Firebird... I'm sorry. But you ever can use http://www.squarefree.com...webdevel.html#edit_styles the bookmarklet !

[coubertin119]

Laat ik deze plug-in nou toevallig al gekend hebben .

Ik persoonlijk zou die "show classname"-functie ook wel handig vinden, bijvoorbeeld om de GoT-lay-out te costumizen, nu moet je eerst de (nogal onleesbare ) source induiken om 't daarna aan te passen, nogal omslachtig.

Ook vind ik dat de performance nogal tegenvalt, maar ik ben ook gewoon een zeurdert .

[We Are Borg]

Jasper schreef op 07 October 2003 @ 13:56:
Het mooie is dat hij de CSS onthoudt als je de panel open laat staan. Zo kan je dus de complete site bekijken met de gewijzigde stylesheet.

Als je in de toekomst nou ook nog je custom-stylesheet kan blijven gebruiken op die site is het helemaal mooi.

Copy/paste onderstaande CSS maar 'es in de CSS sidebar als je op GoT zit. Fraai grijs is niet lelijk.

[knip]

Netjes

Handig dit programma. Kan je alle sites een beetje aanpassen naar je eigen keuze

[dArtagnan]

Dit is een hele mooie aanvulling op de web developer extension. http://chrispederick.myacen.com/work/firebird/webdeveloper/

[ Voor 3% gewijzigd door dArtagnan op 07-10-2003 20:24 . Reden: h'tje vergeten in de url ]

[Brent]

Zo zeg, dat is handig!

[Ramon]

André schreef op 07 oktober 2003 @ 17:09:
Mozilla Firebird is de opvolger van Mozilla, dus waarom download je die niet.

omdat je mozilla fijner vind werken misschien? zou idd fijn zijn als dit ook voor mozilla kwam.

[Verwijderd]

Verwijderd schreef op 07 October 2003 @ 15:02:
Geweldige tool idd, wat een mooie aanvulling zou zijn is dat je als het ware een tooltip op elk element in de browserwindow krijgt te zien met daarin de stylesheet class naam van het element. Om alle elementen snel te kunnen identificeren.

Dit zit in de hiervoor genoemde WebDeveloper Extension.
Tools > Web Developer > Information > View ID & Class Details.

Helaas niet als tooltip, hij zet het er nu gewoon bij in de pagina, maar het is toch wel handig

[GrimaceODespair]

/me heeft ook maar eens wat dingen gedownload

Had twee weken geleden de TS gelezen en vandaag maar eens achtereenvolgens geïnstalleerd: Firebird, EditCSS en Webdeveloper. F*** wat een handige tools! Dit zou een verplicht pakket moeten worden voor elke webdeveloper. Bedankt chem & Koraalduivel voor de handige tips!

[Michali]

Inderdaad. Ik was wel nieuwsgierig geworden na een aantal posts en ik heb mezelf bijna op mijn hoofd geslagen dat ik het nooit eerder heb geprobeerd. Zo handig, echt geweldig dit.

[Verwijderd]

André schreef op 07 oktober 2003 @ 17:09:
Mozilla Firebird is de opvolger van Mozilla, dus waarom download je die niet.

Waar heb je die wijsheid vandaan?

[Verwijderd]

http://texturizer.net/firebird/faq.html#future

om de firebird-developer-experience compleet te maken:

User Agent Switcher (voor van die fijne sites als www.koophp.nl )
IE View (rechts klikken -> open page in IE)

ook handig:

Show Failed URL (laat URL van broken link staan, moet je nog iets voor aanpassen in about:config)

Fantastische browser, ik gebruikte IE, daarna mozilla maar de extenties maken Firebird echt top.

[Johnny]

Verwijderd schreef op 02 februari 2004 @ 15:53:
[...]

Waar heb je die wijsheid vandaan?

Dat stond vroeger op de roadmap van het Mozilla project, Firebird zou, zodra versie 1.0 was bereikt de uiteindelijke browser worden waarbij Mozilla Suite zou verdwijnen als browser voor eindgebruikers.

Gelukkig hebben ze dit aangepast en is het nu zo dat Mozilla Suite gewoon zal blijven bestaan omdat veel gebruikers dat toch handiger vinden. Firebird is wel een leuke kleine, fijne browser, maar Mozilla Suite is is meer dan alleen een browser, maar ook een e-mail client, adresboek, IRC client en HTML editor, ik gebruik ze allemaal, behalve die laatste.

[Verwijderd]

Johnny schreef op 02 februari 2004 @ 17:19:
[...]


Dat stond vroeger op de roadmap van het Mozilla project, Firebird zou, zodra versie 1.0 was bereikt de uiteindelijke browser worden waarbij Mozilla Suite zou verdwijnen als browser voor eindgebruikers.

Gelukkig hebben ze dit aangepast en is het nu zo dat Mozilla Suite gewoon zal blijven bestaan omdat veel gebruikers dat toch handiger vinden. Firebird is wel een leuke kleine, fijne browser, maar Mozilla Suite is is meer dan alleen een browser, maar ook een e-mail client, adresboek, IRC client en HTML editor, ik gebruik ze allemaal, behalve die laatste.

Ik krijg toch een andere indruk:

http://www.mozilla.org/roadmap.html

Niet dat ik het zo volg maar ik werd toch nieuwsgierig. Ach, firebird & thunderbird of mozilla (als ze er tenminste extension-support instoppen) maakt me niet zo veel uit. Ik kan me wel iets voorstellen bij het kwaliteit-kwantiteit punt wat genoemd wordt: Ik denk niet dat er heel veel mensen zijn die de IRC-client of Composer van mozilla nou zo belangrijk vinden...

[djc]

Johnny schreef op 02 februari 2004 @ 17:19:
Gelukkig hebben ze dit aangepast en is het nu zo dat Mozilla Suite gewoon zal blijven bestaan omdat veel gebruikers dat toch handiger vinden. Firebird is wel een leuke kleine, fijne browser, maar Mozilla Suite is is meer dan alleen een browser, maar ook een e-mail client, adresboek, IRC client en HTML editor, ik gebruik ze allemaal, behalve die laatste.

Als ik dit nog iets mag nuanceren: de primary focus van developers zal wel komen te liggen op Firebird, Thunderbird, en de andere losse componenten, maar de Suite (Seamonkey) zal wel onderhouden worden (maar niet heel erg actief doorontwikkeld).

Edit: om even in te gaan op de post van Type-O boven mij: deze roadmap is recentelijk aangepast, daarvoor zou Seamonkey in feite helemaal uitgefaseerd worden.

[ Voor 11% gewijzigd door djc op 02-02-2004 17:39 ]

[creative8500]

Johnny: Maar Mozilla Suite is is meer dan alleen een browser, maar ook een e-mail client, adresboek, IRC client en HTML editor, ik gebruik ze allemaal, behalve die laatste.

Ik maak ook gebruik van dezelfde doeleinden, maar dan door middel van respectievelijk Firebird, Thunderbird en ChatZilla. (ChatZilla is een plugin van Firebird.)