Working with HTML/CSS...

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Working with HTML/CSS...

Post by Dr.CSS »

When we answer questions about HTML/CSS a lot of us use Firefox with some addons, one I use the most and develop templates with is the Web Developers Toolbar between this and viewing the source of the page it is amazing how quick you can learn to change your sites look...

Once installed I go to CSS drop down in toolbar and click Edit CSS, I then move it to the left side of my browser, here you will see all the style sheets attached to your template, have fun, go thru them and make all kinds of changes and see what effects what, you can even go to other sites and play with them, nothing you do in it will make any permanent changes, but once you like what you see you can copy/paste it into your style sheet...

EDIT: This is directed more to the person who hasn't a lot of experience in HTML/CSS so something like the Firebug addon may not be as clear to them as Web Dev tool bar...
Last edited by Anonymous on Sun Jul 19, 2009 8:35 pm, edited 1 time in total.
viebig

Re: Working with HTML/CSS...

Post by viebig »

Great post mark!

I also use Firebug(http://getfirebug.com/) along with Web Developer Toolbar.

Also, if you guys have any css issues that you just can solve, try others sources before cmsms forum. A great start is asking on the irc channel #css at freenode.

Regards

G
Stom
Forum Members
Forum Members
Posts: 82
Joined: Tue Jul 31, 2007 1:41 am

Re: Working with HTML/CSS...

Post by Stom »

Also useful: Colorzilla and MeasureIt, a colour picker and on-screen ruler. Both very handy when tweaking your css.
pkbowen
Forum Members
Forum Members
Posts: 28
Joined: Tue Jun 10, 2008 6:23 pm

Re: Working with HTML/CSS...

Post by pkbowen »

I just wanted to point out that Opera has had a pretty comprehensive code inspector installed since approx. v9.1.  To access it, simply go to the 'developer tools' menu and click on Opera Dragonfly (http://www.opera.com/dragonfly/).
HoofArted
Forum Members
Forum Members
Posts: 26
Joined: Sun Jul 22, 2012 1:11 am

Re: Working with HTML/CSS...

Post by HoofArted »

I'd just like to add that Chrome users may appreciate the F12 key when inspecting the code... :)
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Working with HTML/CSS...

Post by Dr.CSS »

To make one from scratch go to layout > templates and click Add New Template link, it will fill with the most basic needed to make one, for existing templates replace the menu stuff with {menu} and where the content is add {content} otherwise you need to read all the default content, link in my signature...
Locked

Return to “Layout and Design (CSS & HTML)”