If you do your own website design, we highly recommend both CSS Sculptor and CSS Menu Writer.  It’s truly amazing how quickly you can generate standards compliant site structure and navigation.  What used to take the most time in developing a new site has been reduced to a matter of minutes so we can focus more on the eye candy and content.

You can preview the Trellian template or download it from our Dreamweaver templates page.

ShareThis

Say goodbye to table-based design, as CSS Sculptor really makes creating standards-compliant CSS websites a breeze. The tabbed interface is intuitive and very simple to use, and the live preview window allows you to view your changes. A simple click opens the layout in a browser for preview. CSS Scupltor allows you to control every aspect of your design, from padding and margins to background images to rollover states. It even builds in the hacks for older browsers, so your layout is truly cross-browser compatible.

CSS Sculptor allows you to save your layouts as presets and use them repeatedly on other projects.  Even if you just tinker with web design, the time savings alone is worth the price of this extension.

Read more information on Eric Meyer’s CSS Sculptor

ShareThis

ShareThis

It comes pre-coded for use with Breadcrumb-NavXT and Rob Marsh’s Post Plugin Library. The single post pages support Rob’s Similar Posts plugin by default, so make sure you activate that plugin when you install the blog. If you don’t, no big deal, the related posts area just won’t show up under the posts.

We’re going to build on this one in the future, with different color schemes and subject themes so check back soon for more downloads.

You can preview ModXBlog or download it here.

ShareThis

WebAssist is having their Summer Sale through July 4, 2008, so now’s the time to buy some great Dreamweaver extensions. Included in the sale is WebAssist’s new CSS Menu Writer extension that makes CSS drop-down menus a snap, Eric Meyer’s CSS Sculptor for generating complete CSS website layouts and even their ultimate extension set, Super Suite , which includes every WebAssist Dreamweaver extension in one money-saving bundle.

Take advantage of this sale while it lasts, because pricing on WebAssist extensions doesn’t get any lower! No WebAssist coupon codes are needed to take advantage of this special discount pricing.

View Summer Sale Prices

ShareThis

Top New Features of Adobe Dreamweaver CS4

Live View

View your web pages under real-world browser conditions with the new Live View in Dreamweaver — while still retaining direct access to the code. The new rendering mode, which uses the open source rendering engine WebKit, displays your designs like a standards-based browser.

Related Files

Manage the various files that make up the modern web page more efficiently in Dreamweaver. The Related Files feature displays all the documents associated with your current page, whether CSS, JavaScript, PHP, or XML, in a bar along the top of your document.

Code Navigator

The new Code Navigator pop-up window shows you all the code sources that affect your current selection. A click in either Code or Design view brings up the Code Navigator pop-up, which displays CSS rules, server-side includes, external JavaScript functions, Dreamweaver templates, Library files, iframe source files, and more.

CSS best practices

The Property inspector’s new CSS tab shows the styles for the current selection as well as all the applicable CSS rules. Hover over any property to view a tool tip with jargon-free English explanations of CSS principles. New CSS rules can be created and applied in the Property inspector panel and stored in the same document or an external style sheet.

Code hinting for Ajax and JavaScript frameworks

Write JavaScript more quickly and accurately with improved support for JavaScript core objects and primitive data types. Work with popular JavaScript frameworks including jQuery, Prototype, and Spry.

HTML data sets

With HTML data sets functionality, you can create your data in a standard HTML table, a series of div tags, or even an unordered list and then choose Insert > Spry > Spry Data Set to integrate that data into a dynamic table on the page with sortable columns, a master-detail layout, or other sophisticated displays.

Photoshop Smart Objects

Photoshop and Dreamweaver integration has evolved to the next level of compatibility and functionality. Drag and drop an Adobe Photoshop® PSD file into a Dreamweaver page to create an image Smart Object.

Subversion integration

Dreamweaver integrates Subversion software for a more robust check-in/check-out experience with file versioning, rollback, and more. Once you’ve defined Subversion as your version control system, you can update your site to get the latest versions of its pages directly from within Dreamweaver; no third-party utility or command-line interface is required.

Adobe® AIR™ authoring support

Create multiplatform desktop applications from your Dreamweaver HTML and JavaScript sites with new Adobe AIR™ authoring support.

New user interface

Work faster and smarter across Dreamweaver and other components of the next version of Adobe Creative Suite® thanks to a new level of integration and common user interface elements.

Minimum System Requirements for Dreamweaver CS4

The minimum system requirements are as follows:

Windows

• Processor: Intel® Pentium® 4, Intel Centrino®, Intel Xeon®, or Intel Core™ Duo (or compatible) processor
• OS: Microsoft® Windows® XP with Service Pack 2 or Windows Vista™ Home Premium, Business, Ultimate, or Enterprise (certified for 32-bit editions)
• RAM: 512 MB
• Hard Disk: 1 GB of free space
• 1,280 x 800 monitor resolution with 16-bit or greater video card
• Internet connection for activation

Macintosh

• Processor: PowerPC® G5 or multicore Intel® processor
• OS: Mac OS 10.4.11 or 10.5
• RAM: 512 MB
• Hard Disk: 1 GB of free space
• 1,280 x 800 monitor resolution with 16-bit or greater video card
• Internet connection for activation

ShareThis

• WP-pagenavi - adds pagination navigation to multiple-page categories and archives
• Sociable - styled to fit nicely in the theme
• Breadcrumb-NavXT - adds breadcrumb navigation to the top of pages you select
• Rob Marsh’s Post Plugin Library - included support for Similar Posts, Recent Posts and Recent Comments

The theme is extensively styled with three different widget sidebar positions: top, left and right. This theme is styled more in-depth than our other themes, and there are currently three different versions: blue, green and red.

To see all versions or download, click here.

ShareThis

The navigation is pure CSS with code that is very easy to modify. The free template includes the original sliced and optimized Adobe Fireworks file, so creating a completely custom look should only take a matter of minutes.

Preview AdSensation

Download AdSensation

ShareThis

Menu Writer is a Dreamweaver extension that creates horizontal or vertical website menus through a tabbed wizard interface, similar to CSS Sculptor. As with Sculptor, Eric Meyer had a hand in making sure Menu Writer menus are standards compliant and valid CSS and HTML. The extension installs just like any other in Dreamweaver, and is accessible through the WebAssist toolbar.

The real advantage of using Menu Writer to create your CSS menus is the speed at which you can generate a complete multi-level menu structure. The tabbed panels in the wizard allow you to specify a preset style, choosing from 4 different included layouts for both horizontal and vertical menus. You can then choose from 12 color schemes for a total of 96 different menu variations. From that point, you can easily customize the menu to your specifications by changing any of the CSS menu properties including font, border, colors, margin, padding, background images, link states and much more.

Click to view more screenshots and menu examples

Menu Writer generates the menus as unordered lists, as is common with other CSS menu designs. The lists are then styled using the cascading style sheet. For beginner users, no hand coding is necessary as Menu Writer takes care of all the code. Advanced users can easily customize the CSS through either the wizard or directly in the CSS stylesheet. Changes made in the stylesheet are reflected in the wizard and vice versa.

Since Menu Writer uses unordered lists as the structure of the menus, search engines will easily crawl menu links to any depth included in the menu. Menu Writer also allows you to included multiple menus on a single page. That way your header navigation can be company-related while your vertical navigation can be product or service-related.

The use of unordered lists also allows for the use of dynamic database-driven menus. Simply inserting a database field as the source of the list item and applying a repeated region behavior will populate your menu list from your Dreamweaver database.

The ability to not only create a completely custom CSS menu, but to also save your menu and use the identical menu on other websites is a big plus. Much of the time creating a menu is spent on the details, so the ability to remove this step from future menus will undoubtedly save quite a bit of time.

Another nice aspect of CSS Menu Writer is the ability to automatically generate your entire menu from your website structure. Simply by setting up your main and sublevel categories in separate folders, you can define your root directory and Menu Writer will generate your menu based on your folder structure. It’s a real time-saver as long as you setup your site properly from the start.

CSS Menu Writer is available now from WebAssist and looks to be a very promising CSS menu extension for Dreamweaver. WebAssist will be releasing additional menu styles in the future, but creating your own styles is so simple that most designers won’t have any trouble customizing their menus.

ShareThis

It’s not difficult to customize a WordPress theme if you know a few shortcuts. If you prefer to code themes from scratch, there are several Dreamweaver WordPress extensions that simplify the task of inserting the required WordPress code. We have several listed on our WordPress tools page. The easiest way to create a custom theme for your blog is to download an existing theme that has the basic layout you want and customize the CSS and graphic elements to suit your needs.

Get a free WordPress theme

There are thousands of free WordPress themes available from places like the official WordPress theme viewer, freewordpressthemes.com, and Kate’s theme viewer. The key to simplifying your theme customization is to start with a layout that contains the right structure. If you prefer left and right sidebars with the content in the middle, find a theme that is structured that way. This is save you a lot of headaches digging through the blog source files trying to figure out where the proper code goes.

Once you have downloaded a theme, upload it to your blog themes directory and make it the default theme. We actually prefer to use a XAMPP installation and run WordPress on our local machines before uploading the new theme, but that’s a whole tutorial in itself.

Set up your local Dreamweaver site

The first step in customizing your theme is to set up a site in Dreamweaver which will act as your “chopping block” for your new theme. Simply create a folder on your local drive and unzip your downloaded theme. You will now have all the components of your theme ready for customization in Dreamweaver.

Get your blog into Dreamweaver

The next step is to get the complete code from your blog page into Dreamweaver in order to allow you to customize the blog via the CSS. Open your remote blog in a browser and click on the ‘View’ menu. Click on ‘Source’ and you will be presented with the source code for your blog. Click anywhere in the code and press ‘Ctrl-A’ to select all the code in the window. Press ‘Ctrl-C’ or ‘Edit’ then ‘Copy’ to copy the code to your clipboard.

Now go back to Dreamweaver and create a new HTML document. Click anywhere in the code view window and press ‘Ctrl-A’ to select all the code. Press ‘Delete’ to delete all the code. Now paste the code you copied from your browser into the code view window by pressing ‘Ctrl-V’ or ‘Edit’ and ‘Paste. If you press the ‘Refresh’ button or click in the design view window, you should now see the blog page as it appeared in the browser.

Now that you have your blog code on your local machine, you need to link the page to the correct CSS file as it is still linking to your remote CSS file. Go to your CSS control window and click on the ‘CSS Styles’ tab if it isn’t already selected. Now click on ‘All’ button if it isn’t already clicked. You will see the currently linked CSS stylesheet. Click on the name of the stylesheet (usually ’styles.css’ or similar) and right click. The menu will have a delete option, so click that. This will delete your linked stylesheet.

Attach your local stylesheet

Next you need to attach your local copy of the stylesheet by again right clicking anywhere in the CSS control window to open the menu again. Towards the bottom of the menu, click on ‘Attach Style Sheet’. This will open a dialog box where you can select the local copy of your stylesheet. Browse to the folder you unzipped your theme into and select the stylesheet from the list of files. Click ‘OK’ and your local stylesheet will now be attached to your blog.

Tips for WordPress code

You now have everything in place to begin customizing your blog through the CSS styles. We’re not going to go into detail on how to customize the individual CSS styles, but here are some tips.

• The post titles are styled by the H1 tag
• The sidebar titles (Recent Posts, Categories, Archives, etc) are styled by H2 tags in the respective sidebar id’s
• The sidebar lists and categories are all unordered lists styled using the ul and li tags for each sidebar id
• Search forms are styled by the #searchform and #search id’s and the text input box is controlled by the #s id
• The header and footer each have their own #header and #footer id’s with styles unique to your theme

Don’t forget the other pages

Once you begin to get your initial page styled, you will need to go back to your browser and pull up your blog. Navigate to a comments page and go through the same process of copying the source code into Dreameaver and set up a new HTML page for the comments page. There are a whole set of CSS styles that control the comments pages, so you will want to make sure the comment section is styled to match the scheme of your theme. Just remember to always delete the existing stylesheet and relink to your local copy when you create a new page in Dreamweaver.

You will also probably want to copy/paste an archive page, a category page and a full post page just to make sure the styles work with your theme. It’s always easier to style the code locally than to try to do it from within WordPress.

Blockquotes, images and pages. Oh my!

If your default blog installation doesn’t include multiple posts, categories, blockquotes, images, and pages, you will want to go into your blog and create some sample posts that include all these elements. If you post new elements into your blog, simply preview in a browser and copy/paste to a local page and relink the stylesheet to your local copy. Make the necessary style changes and save your stylesheet.

Upload to your server

When you are satisfied with your new blog, it’s time to upload to your server. The only thing you will need to upload is your stylesheet and any images you added within the CSS. If you defined your site to include your FTP settings, you should be able to just connect to your remote site in Dreamweaver and upload the files. If you didn’t establish the remote connection, you can either upload from Dreamweaver or use any other FTP client to send the files to your server.

Advanced WordPress editing - BACK IT UP!

Once the new stylesheet and image are uploaded, simply pull up your blog in a browser and your new theme should be displayed. You haven’t made any changes to the core WordPress code, only to the styles that control the presentation of the content. If you want to delve deeper into the customization of your WordPress theme, it’s recommended that you learn how each individual component such as the header, sidebars, main page content and footer get put together by WordPress to display your blog. WordPress works by performing many “loops” and conditional regions to control the page displayed in your browser. One misplaced piece of code or failure to close a tag can disrupt the entire page. So before you start changing the actual PHP code within your blog, make sure you have backup copies to revert to when your blog goes haywire.

Widget customization

One last tip on customizing your WordPress theme with Dreamweaver is to go into your blog control panel and activate all the widgets you may use. WordPress themes by default do not use widgets, but if your theme is “widget-ready”, you can use widgets in your sidebars. Widgets are pre-programmed modules that can display everything from search boxes to tag clouds to custom text to calendars, and you will probably need to style each widget if you plan on using them in your blog.

The process for styling widgets is the same as discussed before. Simply activate the widgets you wish to use and view in a browser. Copy/paste into your local Dreamweaver site and link the local stylesheet. Your theme may or may not have styles for widgets already, so you may need to create them from scratch in your stylesheet.

Quick and dirty WordPress customization

That’s a pretty quick rundown on how to customize a WordPress theme using Dreamweaver. We didn’t get into custom graphics, but if you have a basic understanding of HTML and CSS, you should be able to use a program like Fireworks or Photoshop to create custom logos and images for your blog. An easy way to create images for your blog is to pull up your blog in your browser and press your ‘Print Scrn’ button on your keyboard. Go into you graphics editor and create a new document. It should default to your screen resolution. Paste your screen shot into the document and you will have the exact dimensions of your layout. Simply create your new graphics over your existing layout and slice your images accordingly. Export them into your local images folder, link from within your stylesheet and upload to the remote site.

Give credit where it’s due

If you use someone else’s theme as the basis of your own theme, check the documentation that came with the theme to see how the theme is licensed. If the original author requests credit be kept in either the code or the footer links, keep it there. Free doesn’t always mean “free to do whatever you want with it”, so just make sure you give credit where credit is due.

Happy themes!

ShareThis