•  
• Login
• Sign up
•  
• Download/install
•  
• Overview
•  
• Video tutorials
•  
• Support
•  
• Home
•  

Style your website with bluePen

your online visual CSS editor

• NoConflict starting mode This mode is required if your website has some Javascript code loaded, which is preventing bluePen to function properly. If bluePen is started in NoConflict mode, the complete website's actual state is copied in a new browser window without the Javascript codes, so none of the website's default functions will be hindering the styling operation.
• Create new style If an element is selected, bluePen offers you a selector with the highest specificity value possible. You can edit this selector, or create a completely new one. The new selectors are placed after the parent elements selector, maintaining the overview of the style sheet files. If such a selector is not found in the given file, the new one is placed in the end of the file.
• Dynamic and static websites It doesn't matter which type your website is. If it runs on PHP, uses external CSS files and you have file access, bluePen should handle it. So it can be based on Drupal, Joomla, Wordpress, Magento or pretty much any CMS system in the world. The awesome power of bluePen is with you everywhere :)
•  
• Keyboard shortcuts They make life easier. Just like using Photoshop, you can do your stuff two handed. One hand uses the mouse, and the other handles the keyboard. Switching between tabs, positioning panels/rulers/etc, selecting, updating, saving, and many-many more.
• Textarea mode We have created a controller for the most frequently used properties. If you can't find one, but you know the code, just switch to the "Textarea tab", and type in your command. If you're done, don't forget to update. Only valid CSS code can be parsed here.
• Auto correction Editing padding values can be tricky to beginners and even to professionals if they forget to recount the width and height values. That's why Auto correction is built in. This removes the bourden from you shoulders and calculates the new width and height values automaticaly.
•  
• Online style sheet editor Be anywhere in the world, with the help of bluePen you don't need a development environment to make your ideas happen. Once you have installed it, you can make your style sheet modifications anytime, anywhere.
• Accurate layer selection A website is built up from a series of elements overlaid on one another. These elements can completely cover each other, so the one beneath can be hardly selected. That's why you can see the whole element hierarchy in the "Layer hierarchy" tab.
• Property application Because one element can have many selectors, the properties defined in each selector can override each other, according to the specificity value of the selector. These overrides are shown in the "Style overview" tab.
•  
• Servo scrollers With the help of these controllers you can easily set the right number value. This is a combination of mouse and keyboard. Press the Shift key, and the scrolling amount is multiplied. Press the Alt key, and the scrolling amount is refined.
• True WYSIWYG editor Everything you modify will be updated real-time in your browser (but not on the live website yet). The modifications will be published right after you've pressed the 'Save' button.
• Intelligent saving system The best part... :) bluePen processes only existing style sheet files, and the changes are made in existing selectors and only there where it's needed, leaving all the surounding codes intact.
•  
• Automatic backups Just to be sure. bluePen creates a backup automatically before every file manipulation; so there can not be a lost state. All the backups can be restored from the backup panel.
• Change-history Do you like the modifications you just made' Well, if not, just press Ctrl (Cmd) + Z or the "Undo" button, and it is history. At least until you press Ctrl (Cmd) + Y or the "Redo" button.
• Multiple units There are 3 commonly used units in web development. Choose from "px", the accurate value, from "em", wich is a font-size-based unit, and from "%" wich is... well, you guessed it, the percentage-based unit.
•  
• 2D scrollers Servo scrollers are awesome, but 2D servo scrollers are two times cooler. They can modify two properties at the same time. For example it's quite useful if you want to set the width x height value at the same time.
• Color archive Every website has it's most frequently used colors. Save those in the color archive, and later you don't have to worry about color-codes. You can be sure, that the exact same shade will be everywhere you want.
• Color comparison Colors can be deceptive. There are many experiments out there which demonstrate delusions. Watch the colors next to each other to determine the right shade and use the color archive!
•  
• Edited element indicator By selecting an element these indicators appear in the four corner of the given item. They even stay there while you are editing, so you can always see how the element is transforming.
• Defineable editing area Do you need to restrict the area in you project' No problem. When you embed bluePen, just set the "container" variable to the ID of the element you want to allow editing inside.
• Real time editing After any modifications in the CSS parameters, the website's style sheets are updated immediately, so you can see what your actions are resulting in instantly.
•  
• @import support A lot of CMS systems use the @import command, such as Drupal, Joomla, Wordpress. Now, it's supported so it can be edited just like any other embedded CSS file.
• Standard starting mode In this mode bluePen is started on the current running website. When starting it, all the links, forms and other functions are disabled, so the styling can continue without interruption.
• Toggle property This is like a preview function. You can disable and enable certain properties to see how it would look like with or without it. It's also handy while debugging.
•  
• Built in options A lot of CSS properties have a lot of pre-defined possible values. We have built in all of these, so you have to select them from a list, instead of memorizing each of them.
• Box model This is a model, demonstrating an element of the website. From the inside out there are padding, border and margin values. You can edit these properties by clicking on the meaningful controllers in the Box properties tab.
• Rulers You no longer need to strain your eyes to see if the elements are aligned well. The horizontal and vertical rulers will do the job for you.
•  
• Box properties You can modify the box properties with the help of the Box model. Such as padding, border, margin, width, height and offset values.
• Background properties You can set various properties to define the proper background. Color or image can be set, repeated and positioned even to pixel accuracy.
• Debug messages While you are editing, bluePen constantly collects log messages which aren't stored in a file, but in case of an error, they can be sent to the developers for debugging.
•  
• Fast editing We reduced the modification process to 3 easy steps. It's quite simple, that's why it is so brilliant. Select > Style > Save.
• Multiple editing Edit multiple selectors before hitting the save button. It's useful if you want to arrange multiple items together.
• Active style overview One element can be styled with the help of many selectors. Those selectors are listed in the "Style overview" tab.
•  
• Color picker Pick a color...any color. With the help of hue and saturation scales you can select almost any color in the world.
• File manager You can browse and select any image to put in the background. After that you can align it with a 2D scroller to be in perfect position.
• Auto adjust Set the element's width and height properties to the background image's dimensions with just one click. Also a frequently used feature.
•  
• Font/text properties You can modify the most used font and text properties. Such as font family, size, weight, text align, decoration and many more.
• Position properties You can modify the positioning properties of an element. Such as display, float, overflow, visibility and more.
• Backup panel Just to be sure, bluePen creates a backup before it manipulates a file. These backups can be viewed and restored in this panel.
•  
• Editor toolbar This is the "sticky" toolbar on the left. There are all the most frequently used functions in an easily accessible way.
• Delete style If a selector is unnecessary, you can delete it any time.
• Information panel In this panel you can manage the editing states and other settings.
•