Drupal 7: Basic Theming with Zen and CSS

[Regnomus]

you might want to consider replacing CSS with CSSedit in the name of the clip

[linwclark]

@Regnomus CSSedit is simply a text editor. While it offers some nice UI features, it is otherwise the same as any other text editor that you would use to code CSS.

[TheDaxindex]

can you show how to add a node in the header. I would like to have more content in a different position than the slogan and title but as a new node. For example something that alows text to be inserted by using drupal administrator and that will keep different text if you have a multisite running. Thanks in advance

[chirpieguy]

Thank you very much for this. I watched 5 or 6 hours worth of videos on Lynda.com trying to find how to properly theme from scratch, and while there was worthwhile info, they completely skipped over how to basically "skin" a theme. This helped tremendously to fill in the knowledge gap. :-)

[Nilles02]

I've created a new content type called "news". It has 2 fields: intro and text.

How can I CSS these fields? I'd like the intro to have a different layout than the text-field.

I found the Fields.css but I don't know how to name the new fields exactly.

[ale0122]

Informative, useful, easy to follow: thank you Lin!

[swingbikechick]

Thank you! your tutorials are very easy to follow. I'm using dreamweaver to edit the stylesheets.

[Corez6]

so refreshing to find a screencast that's brief but very thorough. thank you!

[AdimLee]

THX，simple but usefull.

[KevinHarrisonManase]

Nice tutorial!!

[kfight2008]

Thanks Lin. I really like your tutorial. Thanks for sharing.

[opm595]

Informative and well delivered. The Drupal/Zen theme combination is just what I've been looking for; a somewhat, blank canvass coupled with excellent framework, as in Drupal, and all within a web standards, open source, CMS. Thank you - great tutorial and well done!

[ROHITBABA007]

HI LIn

Greate Tutorial

I have small question, i am new to Drupal so cant seems to fiugure it out.

The item on home page shown as post insted of full content of the page and then only way i can see the full contect is by click on read more.

is there was to display fill contect on the page instead of click on the read more.

thanks

Dev

[CoreDumped2082]

great tutorial. thx!

[murkalottanucka]

Web Developer add on for Mozilla can do the same thing as css-edit

[tirgra100]

thnx indeed! quick and valuable!

[tweakkk]

Awesome tutorial thanks :)

[TheNicodominguez]

hello and thanks for the video. One question though, i cant make the background image to show on screen. I tried everything, i see that firebug tells me that the image is there but... it just doesn't want to show. Any idea? One more thing: it appeared twice, but disappeared as well. Thanks for any advice.

[kd0afk]

And what css files are you editing?

[kd0afk]

How about a video where you don't use cssedit. Not everyone own a MAC. Or maybe how to create the style.fed file for Zen.

[linwclark]

@kd0afk I record these in my free time to help people learn to do what I have learned. I have learned how to use tools on the Mac. I don't feel compelled to spend my free time teaching myself a new set of tools and volunteer another weekend recording a new screencast. However, I would think it would be great if someone else who does use non-Mac tools would volunteer to do that.

[Djazeiry]

@linwclark thanks for that Madame !

[Chuuze]

@kd0afk @linwclark Firebug for Firefox is a great tool similar to cssedit and works in windows enviroment. Thanks for the tuts Lin :)

[liquidplastic62]

It's better css pracctise to add padding to div child elements instead of adding padding to #page etc. If you do, you'll have to alter nested divs too. Better to add a global style to p, a, ol, ul etc. Just been looking at zen and drupal and they're awesome. Cheers!

[RobRiley78]

This is really useful. And I just had a major penny dropping moment when I realised how good CSSEdit is. It's been sitting dormant in my apps folder for as long as I can remember!

[dLoLe]

I've watched quite some tutorials regarding this matter, but I must say that this is by far the best!

[paisleenet]

relative to other zen editing tutorials, this one is really concise. thanks!

[liquidplastic62]

Firefox Browser add-on is Firebug. Its awesome and FREE!

[myspacestringz]

@linwclark, Thank you for posting this video, a blessing on your house!

[MrSadin56]

Thank you so much this really cleared up how to use Zen for me

[SunRhythms]

Can you do one for custom regions ..... *and* flash banner....

Im trying to do a custom region for a flash banner on my front page and have it, once that particular slide clicked, go to a blog article or page ...

[Videogametube]

I can't find my customized theme by using the "Appearance" button, but I'm sure it's in the right folder.

How is this possible?

Thanks in advance.

David.

[HuggytheHusky]

Very useful. Thanks!

[josephseven]

great tutorial

[Cornelya89]

good tutorial, but I am using windows 7 :)

[Mitch19817]

Well I think you definitely need to move to linux or mac ))))

[carlosduran46]

fantastic tutorial, great instructor, thanks

[vivganes]

Lin, this tutorial so rocks!!

[bboybram]

gedit

Thick on in Preference:

numbering and highlighting line

Thick on in Plugins:

Quick Open and Auto end Bracket

Snippet... adding snippets will make you work really fast

gedit really powerfully ubuntu has it by default but you can install in in WINDOWS

[nambio0]

awesome video!

[nathanspratt]

Thank you so much!

[SanderDeclerck1]

Thanks a lot, just found this, this looks like a really good video, just lost an entire website that's supposed to go live this week due to a hardware crash, looks like drupal is the way to go now, thanks a lot for this video, as this will certainly save me a lot of time!

[zaigex]

If anyone out there knows how to achieve this workflow on windows, please send me a message.

Thanks

[zaigex]

What programs do I need to do this? I am on Windows 7 but cssedit is only for mac :( I want to have the same workflow as you. My browser of preference is google chrome.

[linwclark]

@zaigex Unfortunately, I am not aware of any CSSedit-like programs available for Windows

[youmused]

@linwclark - reply to zaigex refers to Live CSS - use in conjunction with Firebug or Chrome Inspect Element to get XRay function

[leorezabraba]

@linwclark On Win, you can try Notepad++. Isn't the same, but it works.

[mahmoud357]

@linwclark as @Chuuze said .. Firebug for Firefox is close to that and also each of Chrome and Opera browsers has a built in Element inspector that works like Firefox's Firebug

[ow1n]

@linwclark @zaigex TopStyle

[naturalbornham]

@zaigex Try Notepad++ it works great for me.

[N4R4YAN]

@naturalbornham

or geany :)

[TheXMousex]

@naturalbornham was just about to post a similar comment... I'm surprised at how many people don't know you can do HTML/CSS with notepad -_-

[aeroniro]

@zaigex Hi, I have the same setup as you. Try usingthe "firebug" extension in chrome. This way you can find out which elements belong to what css file etc.

[aeroniro]

@zaigex Hi, I have the same setup as you. Try usingthe "firebug" extension in chrome. This way you can find out which elements belong to what css file etc.

[jlebrech]

@zaigex try stylizer

[ow1n]

@zaigex TopStyle

[agroten10]

@zaigex TopStyle is well regarded, though it is more expensive than CSS edit.

[agroten10]

@zaigex TopStyle is well-regarded, though it is more expensive than CSS edit.

[antonioXbrandao]

@zaigex use "Stylizer", it's a freakin awesome CSS editor for Windows, much cooler than cssedit :)

[simpsda]

@zaigex just use firebug!

[cristobalvideos]

@zaigex well I think the closer you will get is firebug extension

[Asacolips]

@zaigex I recommend using either the Developer Tools in Google Chrome or the equivalent for Firefox. Googling should help you find those and how to use them. The developer tools in chrome are fairly similar, if a little less robust.

[thegenrl]

@zaigex bluegriffon is a decent program that is very similar to the program she is using. best thing is it's multiplatform so you're not stuck with terrible waste-of-money mac.

[cronos72]

@zaigex

phase 5<- is a decent editor for simple stuff

Webocton <-- Powerhouse editor :P that made me switch to using my peace of ** windows XP :P over my mac book. It doesn't have an editor like css edit either but a really good auto complete. Also CSSEDIT is not necessary. You could do this in a plain text editor.

[1K1NDR3D]

@zaigex Try Firebug

[rdeknijf]

@zaigex Stylizer

[harkejuice]

@zaigex just use a text editor and refresh your page as normal, you can also use firebug to make live edits and copy and paste those to your corresponding css file.

[dreamvoidTV]

@zaigex I reccomend Notepad++. It's free x) It has FTP plugin and explorer plugin.

[chirpieguy]

@zaigex

Komodo edit is also pretty good, and is on every platform worth using. (Windows, Mac, Linux)

[claudiuceus]

@zaigex you can use firefox and use the add on called firebug and use notepad++

[passerby500]

hey thanks that was pretty useful for at least giving an idea of how some of the starter themes work.

also 1 note for future videos is that you should record some room noise to fill in sections of the video that have no narrations, it sound kinda abrupt when you start and stop talking since there is a lack room noise that is there while you are narrating

[lippyduck]

Thanks. That was very clear. The thing I find difficult is knowing which .css file to modify for each change. Even using Firebug I can often see which class to change but have to search the files to find where it's defined. At one point I considered simply making all changes in a new empty style.css file but maybe I'm starting to get the idea from your background and layout examples.

[passerby500]

@lippyduck you eventually get a feel for where certain things should be defined.

i take the same approach as you were i just use opera's dragonfly to find the class i want to edit.

[boklam]

great tutorial Lin.

[Ishbel87]

Great tutorial. Keep up the good work :)

[mksandford]

yes, thanks very much this was just what I needed

[kumquatsta]

would appreciate a zen video for drupal 6. how similar are the two?

[DERIGalway]

@kumquatsta for the things covered in this screencast, they are pretty similar, though the CSS file names are different. I think there are Drupal 6 theming tutorials out there, though I don't have links offhand. You can also read the excellent book Front End Drupal.

[arachnopolis]

Great tutorial Lin

[linwclark]

thanks!