Is This Thing On?

This is pretty much everything I have to say, but with more swear words.

Headway 3.02 generated css list

There have been numerous requests for the base css style for the new Headway 3.0x. Unfortunately, there is no exact css file because Headway 3 creates a css file based on the visual editor inputs. If you want to see what it’s generated for your site, take a look at the source code for your site. You’ll see a link to a css file that looks like a bunch of numbers and letters. This is the dynamic css file that Headway has created. Click on that and you’ll see the base css for your website.

It’s also been ‘optimized’ so that all of the carriage returns and tabs have been deleted. These just make the code a little easier to read, but a bit slower for browsers to read. I recently took all the code for one of my sites and added in the carriage returns so that I could see what some of the classes and id’s are. This is what I came up with.

There are no guarantees that this will be the same list you would see on your site. Also NEVER edit the core Headway files. If you want to edit your css, do so in the live CSS editor or in a style.css file of your child theme.

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;margin:0;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
a{outline:none;}
img{outline:none;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1}
div.wrapper{margin:0 auto;padding:10px 0}
div.grid-container{height:auto;margin:0}
div#whitewrap{width:100%;float:left}
.clear{clear:both}
.block{position:static;box-shadow:none;background:none;margin:0;border:none;overflow:hidden;float:left;box-sizing:border-box;-moz-box-sizing:border-box}
div.block-content{display:block;float:left;width:100%;height:100%}
.column:first-child{margin-left:0}
.row{float:left}
.column{float:left}
.block-type-header span.banner{margin:20px 10px 0;display:block}
.block-type-header span.banner a{display:block;text-decoration:none}
.block-type-header .tagline{margin:10px 10px 0;display:block}
.block-type-navigation div.block-content > div{height:100%;display:block}
.block-type-navigation ul{height:100%;padding:0;margin:0;list-style:none;line-height:1}
.block-type-navigation ul li{display:block;height:100%;float:left;margin:0}
.block-type-navigation ul li a{text-decoration:none;display:table;height:100%;padding:0 15px;width:100%}
.block-type-navigation a span{display:table-cell;vertical-align:middle}
.block-type-navigation a span.sf-sub-indicator{display:none}
.block-type-navigation li ul.sub-menu{height:auto;left:-9999px;position:absolute;clear:left;width:180px;z-index:50}
.block-type-navigation li ul.sub-menu li{height:auto;clear:left;width:100%}
.block-type-navigation li ul.sub-menu li a{width:100%}
.block-type-navigation li ul.sub-menu li{height:30px}
.block-type-navigation li ul.sub-menu ul{margin:-30px 0 0 180px;clear:left}
.block-type-navigation ul li ul.sub-menu li,.block-type-navigation ul li ul.sub-menu li a{margin:0}
.block-type-navigation ul.menu > li:hover > ul.sub-menu,.block-type-navigation ul.menu > li:hover > ul.sub-menu li:hover ul,.block-type-navigation ul.menu > li.sfHover > ul.sub-menu,.block-type-navigation ul.menu > li.sfHover > ul.sub-menu > li.sfHover > ul{left:auto}
.block-type-navigation .nav-vertical{position:relative}
.block-type-navigation .nav-vertical ul li{height:auto;width:100%;padding:0}
.block-type-navigation .nav-vertical ul li a{padding:10px 15px}
.block-type-navigation .nav-vertical li ul.sub-menu{width:130px;right:-130px;margin:-32px 0 0 130px}
.block-type-breadcrumbs p.breadcrumbs{margin:13px 10px}
.block-type-widget-area ul.widget-area{padding:0;margin:0}
.block-type-widget-area li.widget{padding:5px 10px;list-style:none}
.block-type-widget-area li.widget ul{padding:0 0 0 25px;margin:5px 0;list-style:disc}
.block-type-widget-area li.widget span.widget-title{margin:15px 0 10px;display:block}
.block-type-widget-area .horizontal-sidebar li.widget{float:left;margin:0 15px 0 15px;width:20%}
li.widget table#wp-calendar th,li.widget table#wp-calendar td{color:#444;text-align:center}
li.widget table#wp-calendar a{color:#444}
li.widget table#wp-calendar caption{font-weight:bold;font-size:14px;line-height:100%}
li.widget table#wp-calendar td#today{color:#111}
li.widget table#wp-calendar tfoot .pad{background:none}
.block-type-content a{color:inherit}
.block-type-content div.loop{width:100%;float:left;clear:both;box-sizing:border-box;-moz-box-sizing:border-box}
.block-type-content .entry-title{margin:15px 0 5px}
.block-type-content .entry-title a{color:inherit;font-size:inherit;text-decoration:inherit}
.block-type-content div.entry-content{width:100%;float:left;margin:20px 0}
.block-type-content div.post{clear:both;padding:0 0 30px;margin:0 0 10px;float:left;width:100%}
.block-type-content .entry-meta,.block-type-content .entry-utility{clear:both}
.block-type-content div.entry-meta a,.block-type-content div.entry-utility a{color:inherit;text-decoration:none}
.block-type-content div.entry-meta a:hover,.block-type-content div.entry-utility a:hover{text-decoration:underline}
a.more-link{clear:both;float:left}
div.entry-content h1,div.entry-content h2{margin:0 0 20px}
div.entry-content h3,div.entry-content h4,div.entry-content h5,div.entry-content h6{margin:0 0 15px}
div.entry-content p{margin:0 0 15px}
div.entry-content hr{background-color:#ccc;border:0;height:1px;margin:0 0 15px}
div.entry-content ul,div.entry-content ol{padding:0 0 0 40px;margin:15px 0}
div.entry-content ul ul,div.entry-content ol ol{margin:0}
div.entry-content ul li{list-style:disc}
div.entry-content ul ul li{list-style:circle}
div.entry-content ul ul ul li{list-style:square}
div.entry-content ol li{list-style:decimal}
div.entry-content ol ol li{list-style:lower-alpha}
div.entry-content ol ol ol li{list-style:lower-roman}
.align-left,.alignleft{float:left;margin:0 7px 0 0}
.align-right,.alignright{float:right;margin:0 0 0 7px}
.aligncenter{display:block;margin-left:auto;margin-right:auto;clear:both}
img.border{padding:1px;border:1px solid #ddd}
img.no-border{padding:0;border:none}
img.wp-smiley{border:none}
.wp-caption{padding:5px;border:1px solid #eee;background:#fcfcfc;margin-top:15px;margin-bottom:15px}
.wp-caption img{border:1px solid #ddd;margin:0 auto;display:block;padding:0}
.wp-caption img.wp-smiley{border:none}
.wp-caption p{text-align:center;color:#555;margin:5px 0 0;font-style:italic}
blockquote{color:#666;padding:5px 0 5px 26px;border-top:0 dotted;border-bottom:0 dotted;border-left:2px solid #f6f6f6;margin:10px 0 0 10px}
.drop-cap{font-size:310%;line-height:120%;margin-bottom:-0.25em;color:#888;float:left;padding:0 6px 0 0}
code{background:#EAEAEA;font-family:Consolas,Monaco,Courier,monospace;font-size:0.9em;margin:0 1px;padding:1px 3px}
.code{display:block;background:#eee;border:1px solid #ddd;color:#555;font-family:Consolas,Monaco,Courier,monospace;padding:10px;overflow:auto;white-space:pre;font-size:12.5px;line-height:18px;margin:5px 0}
div#comments span.heading{font-size:18px}
div#comments ol.commentlist{margin-top:10px}
div#comments .comment-avatar{float:left;margin:10px;text-align:right}
div#comments .comment-avatar img{box-shadow:1px 1px 0 rgba( 100,100,100,.3);-webkit-box-shadow:1px 1px 0 rgba( 100,100,100,.3);-moz-box-shadow:1px 1px 0 rgba( 100,100,100,.3)}
div#comments .comment-body{float:left;width:80%;font-size:1.3em;line-height:1.8em;margin:0 0 0 15px}
div#comments .comment-body p{margin:10px 0 0 0}
div#comments .comment-author{margin:0 0 15px 0}
div#comments .comment-date{float:left;padding:10px 0 30px 0;font-size:.9em;font-style:italic}
div#comments .reply{float:right;padding:10px 0 30px 0;font-size:.9em}
div#comments .comment-number{margin:0 0 20px 0;font-size:1.6em}
div#comments a#leavecomment{padding-left:10px;font-size:.75em}
#respond{margin:0 0 0 5%}
form#commentform{margin-bottom:20px}
h3#reply-title{margin:20px 0 30px 0;font-size:18px}
form#commentform label{display:inline-block;margin:0;float:left;line-height:25px}
form#commentform p{clear:both;float:left;width:100%}
form#commentform span.required{display:inline;color:#c00;line-height:25px;margin:0 0 0 3px}
#respond input[type='text']{width:80%;background:#f8f8f8;border:1px solid #e6e6e6;font-size:2em}
#respond p.form-allowed-tags{margin:15px 0;width:65%}
#respond input[type='text'],form#commentform textarea{padding:7px;background:#f8f8f8;border:1px solid #e6e6e6;font-size:.9em;width:80%;clear:both;float:left;margin:0 0 10px}
.block-type-footer p a{color:inherit}
.block-type-footer .footer-left{margin-left:10px;float:left;margin-top:5px}
.block-type-footer .footer-right{margin-right:10px;float:right;margin-top:5px}
.block-type-footer .copyright{clear:both;text-align:center;margin:25px 0 0;padding:20px 0 0}
li.widget table#wp-calendar{width:100%}
li.widget table#wp-calendar th,li.widget table#wp-calendar td{padding:5px 0}
li.widget table#wp-calendar caption{margin:0 0 8px 0}
strong{font-weight:bold}
em{font-style:italic}
.notice{background:#FFFFE0;border:1px solid #E6DB55;margin:0 0 15px;padding:10px;font-size:110%;line-height:160%}
.warning{background:#FBE3E4;border:1px solid #FBC2C4;margin:0 0 15px;padding:10px;color:#8A1F11;font-size:110%;line-height:160%}
.grid-width-1{width:20px}
div.wrapper .grid-left-1{margin:0 0 0 60px}
div.wrapper section.row section.column.grid-left-1:first-child{margin:0 0 0 40px}
div.wrapper.grid-active .grid-width-1{width:20px}
div.wrapper.grid-active .grid-left-1{left:40px}
.grid-width-2{width:60px}
div.wrapper .grid-left-2{margin:0 0 0 100px}
div.wrapper section.row section.column.grid-left-2:first-child{margin:0 0 0 80px}
div.wrapper.grid-active .grid-width-2{width:60px}
div.wrapper.grid-active .grid-left-2{left:80px}
.grid-width-3{width:100px}
div.wrapper .grid-left-3{margin:0 0 0 140px}
div.wrapper section.row section.column.grid-left-3:first-child{margin:0 0 0 120px}
div.wrapper.grid-active .grid-width-3{width:100px}
div.wrapper.grid-active .grid-left-3{left:120px}
.grid-width-4{width:140px}
div.wrapper .grid-left-4{margin:0 0 0 180px}
div.wrapper section.row section.column.grid-left-4:first-child{margin:0 0 0 160px}
div.wrapper.grid-active .grid-width-4{width:140px}
div.wrapper.grid-active .grid-left-4{left:160px}
.grid-width-5{width:180px}
div.wrapper .grid-left-5{margin:0 0 0 220px}
div.wrapper section.row section.column.grid-left-5:first-child{margin:0 0 0 200px}
div.wrapper.grid-active .grid-width-5{width:180px}
div.wrapper.grid-active .grid-left-5{left:200px}
.grid-width-6{width:220px}
div.wrapper .grid-left-6{margin:0 0 0 260px}
div.wrapper section.row section.column.grid-left-6:first-child{margin:0 0 0 240px}
div.wrapper.grid-active .grid-width-6{width:220px}
div.wrapper.grid-active .grid-left-6{left:240px}
.grid-width-7{width:260px}
div.wrapper .grid-left-7{margin:0 0 0 300px}
div.wrapper section.row section.column.grid-left-7:first-child{margin:0 0 0 280px}
div.wrapper.grid-active .grid-width-7{width:260px}
div.wrapper.grid-active .grid-left-7{left:280px}
.grid-width-8{width:300px}
div.wrapper .grid-left-8{margin:0 0 0 340px}
div.wrapper section.row section.column.grid-left-8:first-child{margin:0 0 0 320px}
div.wrapper.grid-active .grid-width-8{width:300px}
div.wrapper.grid-active .grid-left-8{left:320px}
.grid-width-9{width:340px}
div.wrapper .grid-left-9{margin:0 0 0 380px}
div.wrapper section.row section.column.grid-left-9:first-child{margin:0 0 0 360px}
div.wrapper.grid-active .grid-width-9{width:340px}
div.wrapper.grid-active .grid-left-9{left:360px}
.grid-width-10{width:380px}
div.wrapper .grid-left-10{margin:0 0 0 420px}
div.wrapper section.row section.column.grid-left-10:first-child{margin:0 0 0 400px}
div.wrapper.grid-active .grid-width-10{width:380px}
div.wrapper.grid-active .grid-left-10{left:400px}
.grid-width-11{width:420px}
div.wrapper .grid-left-11{margin:0 0 0 460px}
div.wrapper section.row section.column.grid-left-11:first-child{margin:0 0 0 440px}
div.wrapper.grid-active .grid-width-11{width:420px}
div.wrapper.grid-active .grid-left-11{left:440px}
.grid-width-12{width:460px}
div.wrapper .grid-left-12{margin:0 0 0 500px}
div.wrapper section.row section.column.grid-left-12:first-child{margin:0 0 0 480px}
div.wrapper.grid-active .grid-width-12{width:460px}
div.wrapper.grid-active .grid-left-12{left:480px}
.grid-width-13{width:500px}
div.wrapper .grid-left-13{margin:0 0 0 540px}
div.wrapper section.row section.column.grid-left-13:first-child{margin:0 0 0 520px}
div.wrapper.grid-active .grid-width-13{width:500px}
div.wrapper.grid-active .grid-left-13{left:520px}
.grid-width-14{width:540px}
div.wrapper .grid-left-14{margin:0 0 0 580px}
div.wrapper section.row section.column.grid-left-14:first-child{margin:0 0 0 560px}
div.wrapper.grid-active .grid-width-14{width:540px}
div.wrapper.grid-active .grid-left-14{left:560px}
.grid-width-15{width:580px}
div.wrapper .grid-left-15{margin:0 0 0 620px}
div.wrapper section.row section.column.grid-left-15:first-child{margin:0 0 0 600px}
div.wrapper.grid-active .grid-width-15{width:580px}
div.wrapper.grid-active .grid-left-15{left:600px}
.grid-width-16{width:620px}
div.wrapper .grid-left-16{margin:0 0 0 660px}
div.wrapper section.row section.column.grid-left-16:first-child{margin:0 0 0 640px}
div.wrapper.grid-active .grid-width-16{width:620px}
div.wrapper.grid-active .grid-left-16{left:640px}
.grid-width-17{width:660px}
div.wrapper .grid-left-17{margin:0 0 0 700px}
div.wrapper section.row section.column.grid-left-17:first-child{margin:0 0 0 680px}
div.wrapper.grid-active .grid-width-17{width:660px}
div.wrapper.grid-active .grid-left-17{left:680px}
.grid-width-18{width:700px}
div.wrapper .grid-left-18{margin:0 0 0 740px}
div.wrapper section.row section.column.grid-left-18:first-child{margin:0 0 0 720px}
div.wrapper.grid-active .grid-width-18{width:700px}
div.wrapper.grid-active .grid-left-18{left:720px}
.grid-width-19{width:740px}
div.wrapper .grid-left-19{margin:0 0 0 780px}
div.wrapper section.row section.column.grid-left-19:first-child{margin:0 0 0 760px}
div.wrapper.grid-active .grid-width-19{width:740px}
div.wrapper.grid-active .grid-left-19{left:760px}
.grid-width-20{width:780px}
div.wrapper .grid-left-20{margin:0 0 0 820px}
div.wrapper section.row section.column.grid-left-20:first-child{margin:0 0 0 800px}
div.wrapper.grid-active .grid-width-20{width:780px}
div.wrapper.grid-active .grid-left-20{left:800px}
.grid-width-21{width:820px}
div.wrapper .grid-left-21{margin:0 0 0 860px}
div.wrapper section.row section.column.grid-left-21:first-child{margin:0 0 0 840px}
div.wrapper.grid-active .grid-width-21{width:820px}
div.wrapper.grid-active .grid-left-21{left:840px}
.grid-width-22{width:860px}
div.wrapper .grid-left-22{margin:0 0 0 900px}
div.wrapper section.row section.column.grid-left-22:first-child{margin:0 0 0 880px}
div.wrapper.grid-active .grid-width-22{width:860px}
div.wrapper.grid-active .grid-left-22{left:880px}
.grid-width-23{width:900px}
div.wrapper .grid-left-23{margin:0 0 0 940px}
div.wrapper section.row section.column.grid-left-23:first-child{margin:0 0 0 920px}
div.wrapper.grid-active .grid-width-23{width:900px}
div.wrapper.grid-active .grid-left-23{left:920px}
.grid-width-24{width:940px}
div.wrapper .grid-left-24{margin:0 0 0 980px}
div.wrapper section.row section.column.grid-left-24:first-child{margin:0 0 0 960px}
div.wrapper.grid-active .grid-width-24{width:940px}
div.wrapper.grid-active .grid-left-24{left:960px}
.block{margin-bottom:10px}
section.column{margin:0 0 0 20px}
div#whitewrap div#grid div.grid-column{margin:0 9px 0 9px}
#block-1{height:130px}
#block-2{height:40px}
#block-3{min-height:320px}
#block-4{min-height:270px}
#block-5{min-height:70px}
div.wrapper{width:940px;margin:30px auto 30px;padding:15px 15px}
div.wrapper.grid-active div.grid-container{width:941px} 
body{font-size:13px;font-family:palatino linotype,palatino,serif;line-height:100%;color:#555555;}
body{background-color:#dddddd;}
div.wrapper{background-color:#ffffff;box-shadow:#c7c7c7 1px 1px 8px }
.block-type-header span.banner a{font-family:palatino linotype,palatino,serif;color:#222222;font-size:34px;line-height:100%;text-decoration:none;}
.block-type-header .tagline{font-family:palatino linotype,palatino,serif;color:#999999;font-size:15px;line-height:120%;font-style:italic;font-weight:normal}
.block-type-navigation{border-top-width:1px;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-color:#eeeeee;border-style:solid;}
.block-type-navigation ul.menu li a{text-decoration:none;color:#888888;text-transform:uppercase;font-variant:none;font-family:palatino linotype,palatino,serif;}
.block-type-navigation ul.menu li.current_page_item a{color:#222222;}
.block-type-navigation ul.menu li a:hover{color:#555555;}
.block-type-widget-area li.widget{line-height:150%;}
.block-type-widget-area li.widget span.widget-title{font-size:13px;border-style:solid;border-top-width:1px;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-color:#eeeeee;letter-spacing:1px;text-transform:uppercase;font-variant:none;line-height:250%;color:#111111;font-family:palatino linotype,palatino,serif;}
.block-type-widget-area li.widget a{color:#333333;}
.block-type-content div.post{border-style:solid;border-top-width:0px;border-bottom-width:1px;border-left-width:0px;border-right-width:0px;border-color:#efefef;}
.block-type-content .entry-title{font-family:palatino linotype,palatino,serif;font-size:24px;color:#333333;line-height:110%;}
.block-type-content div.entry-meta{font-family:palatino linotype,palatino,serif;color:#818181;}
.block-type-content div.entry-content{color:#555555;font-family:palatino linotype,palatino,serif;font-size:13px;line-height:180%;}
.block-type-footer{border-top-width:1px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-color:#eeeeee;border-style:solid;}
.block-type-footer p.copyright{color:#666666;}
.block-type-footer p#footer-headway-link{color:#666666;}
.block-type-footer a#footer-admin-link{color:#666666;}
.block-type-footer a#footer-go-to-top-link{color:#666666;}
.block-type-navigation ul.sub-menu{background-color:#eeeeee;}

2 Responses to Headway 3.02 generated css list

  1. Great list, Kelli!

    AJ at Headway mentioned a cool add-on for Chrome that has a “beautify” function that really ROCKS!!! It cleans up that mess instantly! It is called Pendule, and here is the link to it at the Chrome webstore:
    https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi

    This video shows what it can do:

    http://screencast.com/t/ogkMaDwo

    And here is a link to AJ’s blog post where he shows not only Pendule off, but a cool Gradient creating tool as well.

    http://headwaythemes.com/how-to-build-a-site-in-10-minutes-part-2/

    Thanks for all you give us, Kelli!

    Terry

    • Kelli Wise says:

      AJ always has amazing suggestions. He’s my Headway Hero. I uploaded Pendule on his suggestion and I use it a lot when helping people out.