Editing Dreamweaver Templates and CSS Style Issues

*Note: is is for .php templates…

When a content editor is using Dreamweaver templates to edit the static website you are developing, it is always a chore (until now!) to have the design view show all of the editable content areas when css might be used to hide a block for example. The key I have found is to simply make the stylesheet only render on page load.

For example use:

…rather than just using the standard:

In design view the content editor will only be able to focus on their content since all the css will be turned “off” in effect.

Hope that helps someone.

Single List with Multiple Columns ala CSS3

Long lists need to be displayed differently on different devices generally. CSS3 can ease your pain by dividing these up for you via the column-gap property.

Apply your css like so:

Create a simple:

Render!

To extend this, you can then utilize media queries to have a different number of columns on different devices / screen sizes. This will keep your lists together, if they are long, rather than needing to divide them up in order to make them “look” even in the page.

Check out a demo or view it below…


1

Content Before Design

No Content Thought

Content matters. It really does. This might be hard to believe, but if you don’t have content your site won’t matter no matter how beautiful it turns out to be. I really cannot imagine “designing” a site around the thin air that is intended to be filled with who knows what. Lorem Ipsum can only go so far.

A website is only the sum of it’s content… that even goes for design sites like dribbble or behance for example, both of whose content is amazing! Take the time to organize your content and make it stand out from the crowd.

Making your content amazing = Making your website amazing.