Basic CSS Question
-
Trying to get a hold on the basics of CSS via a tutorial, but am hoping a person can speed up my learning curve by pointing to the place in the code below that controls:
a) sidebar/widget font color
b) size of heading: blog title ….how can I increase the size of the title’s heading?Thanks!
***********
THEME NAME: blog.txt
THEME URI: http://www.plaintxt.org/themes/blogtxt/
DESCRIPTION: Where a blog and its text join together. An exceptionally clean theme—a classic. For WordPress 2.6.x.
VERSION: 4.6.1
AUTHOR: Scott Allan Wallick
AUTHOR URI: http://scottwallick.com/
TAGS: variable width, fixed width, variable columns, two columns, three columns, widgets, theme options, options page, white, gray, typography, microformats, hatom, hcard
*/
a,a:link{outline:none;text-decoration:none;}
div#header a,div#header a:link{color:red;}
div.hfeed a,div.hfeed a:link,div.entry-content ul.xoxo li.hentry span a,div.entry-content ul.xoxo li.hentry span a:link{border-bottom:1px solid #9aa1ae;color:#34425b;}
div.hfeed .entry-title a,div.hfeed .entry-title a:link,div.hfeed div.entry-meta a,div.hfeed div.entry-meta a:link{border-bottom:none;}
div.sidebar a,div.sidebar a:link{background:#fff;border-bottom:1px solid #ccd0d6;color:#34425b ;}
div#footer a,div#footer a:link{border-bottom: 1px solid #ccd0d6;color: #9aa1ae;}
div.hfeed a:visited,div.entry-content ul.xoxo li.hentry span a:visited{color:#677284;}
div.hfeed .entry-title a:visited{color:#34425b;}
div#header a:hover{color:#9aa1ae;}
div#footer a:hover{border-bottom: 1px solid #34425b;color: #34425b;}
div.hfeed a:hover,div.hfeed .entry-title a:hover,div.hfeed div.entry-meta a:hover,div.sidebar a:hover,div.entry-content ul.xoxo li.hentry span a:hover{border-bottom:1px solid #0d1117;color:#0d1117;}
div.hfeed a:active,div.sidebar a:active{color:#677284;border-bottom:1px solid #b4b9c3;}
body{background:#fff;color:#222;line-height:140%;margin:0 0 2em;padding:0;}
body abbr.published,body abbr.comment-published{border:none;}
body img{border:none;max-width:99%;}
body input#s{background:#f6f6f7;border:1px solid #9ca1a8;font-size:1em;line-height:normal;padding:0.3em 0.2em;}
body.author div.hfeed div.archive-meta p{color:#555;font-size:0.9em;margin:0;}
body.single div.navigation{margin:4em 0 0;}
div#footer{color:#9aa1ae;font-size:0.9em;padding:6em 0 0;}
div#globalnav,div.access,div#footer span#theme-link span.additional-name,div#footer span#theme-link span.family-name{display:none;}
div#header a{text-decoration:none;}
div#header div#blog-description,div#header div.archive-description{font-size:1.1em;line-height:133%;}
div#header h1#blog-title{border-bottom:0.1em solid #ccd0d6;font-weight:normal;font-size:4em;line-height:64%;letter-spacing:1px;margin:0;text-transform:uppercase;}
div#wrapper .important{background:#f5f5dc url(images/important.png) no-repeat 0.5em center;border-bottom:1px solid #d0d0bb;border-top:1px solid #d0d0bb;padding:0.3em 0.5em 0.3em 2.3em;}
div#wrapper div.entry-content .download{background:url(images/file-download.png) no-repeat center left;}
div#wrapper div.entry-content .html{background:url(images/file-html.png) no-repeat center left;}
div#wrapper div.entry-content .html,div#wrapper div.entry-content .download,div#wrapper div.entry-content .pdf,div#wrapper div.entry-content .zip{margin-left:2px;padding:2px 0 2px 19px;}
div#wrapper div.entry-content .pdf{background:url(images/file-pdf.png) no-repeat center left;}
div#wrapper div.entry-content .zip{background:url(images/file-zip.png) no-repeat center left;}
div.comments h3{color:#4d5663;font-size:1.4em;font-weight:400;margin:4em 0 0.3em;}
div.comments h3.comment-header span.comment-count{color:#7a818a;font-size:0.8em;padding-left:0.2em;}
div.comments ol#comments{margin:0 0 0 2em;padding:0;}
div.comments ol#comments li{margin:1em 0 5em;padding:0;}
div.comments ol#comments li img.photo { float:left; margin:0 1em 0.5em 0; }
div.comments ol#pingbacks{list-style:none;margin:1em 0 0 1.5em;padding:0;}
div.comments ol#pingbacks li{border:1px solid #ccd0d6;color:#777;font-size:0.9em;list-style:none;margin:0 0 1.5em;padding:1em;}
div.comments ol#pingbacks p{margin-bottom:0;}
div.comments ol.commentlist li .fn,div.sidebar ul li#blogtxt-recent-comments .fn{font-weight:700;}
div.comments ol.commentlist p{margin:0.5em 0;}
div.comments ol.commentlist span.comment-meta,div.comments p#loggedin{font-style:italic;}
div.comments span.req-field{color:#c00;}
div.entry-content .alignleft{float:left;margin:0.5em 1em 0.5em 0;}
div.entry-content .alignright{float:right;margin:0.5em 0 0.5em 1em;}
div.entry-content .center,div.entry-content .aligncenter{display:block;margin:1em auto;}
div.entry-content .clearer,div.entry-content .entry-edit{clear:both;width:99%;}
div.entry-content .content-column{width:40%;}
div.entry-content .more-link{font-size:95%;font-weight:700;text-transform:uppercase;}
div.entry-content a:hover img.center,div.entry-content a:hover img.aligncenter,div.entry-content a:hover img.alignright,div.entry-content a:hover img.alignleft{border:1px solid #2c384d;}
div.entry-content blockquote blockquote,div.comments ol.commentlist blockquote blockquote{border-left:5px solid #ccd0d6;font-size:0.9em;padding:0 1em;}
div.entry-content blockquote,div.comments ol.commentlist blockquote{background:#ebedef;color:#4d5663;padding:0.1em 1em;}
div.entry-content code,div.entry-content pre,div.comments ol.commentlist code,div.comments ol.commentlist pre{color:#494C5C;font:1em/133% “courier new”,courier,monospace;}
div.entry-content del,div.comments ol.commentlist del{background:#ebedef;color:#31343a;}
div.entry-content div.page-link{font-size:0.9em;font-weight:700;margin:0 0 1.5em;text-align:center;}
div.entry-content h2,div.entry-content h3{font-size:1.5em;margin:1.5em 0 -0.3em;}
div.entry-content h2,div.entry-content h3,div.entry-content h4,div.entry-content h5,div.entry-content h6{font-weight:400;}
div.entry-content h4{font-size:1.4em;margin:1.5em 0 -0.3em;}
div.entry-content h5{font-size:1.3em;margin:1.5em 0 -0.4em;}
div.entry-content h6{font-size:1.2em;margin:1.5em 0 -0.5em;}
div.entry-content img.center,div.entry-content img.alignright,div.entry-content img.alignleft{border:1px solid #9aa1ae;}
div.entry-content ins,div.comments ol.commentlist ins{background:#f5f5dc;}
div.entry-content ol ol{list-style:lower-alpha;}
div.entry-content p,div.formcontainer p{margin:1em 0;}
body.attachment h3.entry-title{margin:-1.5em 0 0.5em 0;}
div.entry-content div.entry-attachment{margin:-0.5em 0 1em;}
div.entry-content div.entry-caption{margin-bottom:2em;}
body.attachment h3.entry-title,div.entry-content div.entry-attachment,div.entry-content div.entry-caption{text-align:center;}
div.entry-content .wp-caption-text{font-style:italic;margin:0.2em auto 1em auto;text-align:center;}
div.entry-content div.gallery{clear:both;float:left;margin:1em auto;text-align:center;width:100%;}
div.entry-content div.gallery dl{float:left;margin:0 auto;text-align:center;}
div.entry-content div.gallery dl.gallery-columns-2{width:49%;}
div.entry-content div.gallery dl.gallery-columns-3{width:33%;}
div.entry-content div.gallery dl.gallery-columns-4{width:24%;}
div.entry-content div.gallery dl.gallery-columns-5{width:19%;}
div.entry-content div.gallery dd{font-style:italic;margin:0 auto 1em auto;text-align:center;}
div.entry-content div.gallery *{margin:0;padding:0;}
div.entry-content div.entry-attachment img,div.entry-content div#nav-images div img{max-width:none;overflow:hidden;}
body.attachment div#wrapper div#content div#nav-images{clear:both;margin:1em auto 2em auto;width:100%;}
body.attachment div#nav-images div{margin:0;padding:2% 2% 4% 2%;width:46%;}
body.attachment div#nav-images div.nav-previous{text-align:right;}
body.attachment div#nav-images div.nav-next{text-align:left;}
body.attachment div.entry-meta,body.attachment div.comments{clear:both;width:100%;}
div.entry-content div.entry-caption,div.entry-content q,div.comments ol.commentlist q{color:#494c5c;}
div.entry-content ul li ul{list-style:square;line-height:150%;}
div.entry-content ul.xoxo,div.entry-content ul.xoxo li{list-style:none;margin:0;padding:0;}
div.entry-content ul.xoxo li h3{margin-bottom:0.3em;}
div.entry-content ul.xoxo li ul{margin:0;padding:0;}
div.entry-content ul.xoxo li ul li{list-style:square;margin:0 0 0 2em;}
div.entry-content ul.xoxo li.hentry span.entry-title{font-size:1em;text-transform:none;}
div.entry-content ul.xoxo li.hentry span.entry-date{font-size:1em;}
div.entry-content ul.xoxo li ul li p{font-style:italic;margin-top:0.3em;}
div.formcontainer form#commentform,div.sidebar ul,div.sidebar ul li#blogtxt-recent-comments blockquote.comment-summary,div.sidebar ul li#blogtxt-recent-comments blockquote.comment-summary p{margin:0;padding:0;}
div.formcontainer div.form-input{margin:0 0 1em;}
div.formcontainer div.form-input input{width:20em;}
div.formcontainer div.form-input input,div.formcontainer div.form-textarea textarea{background:#f6f6f7;border:1px solid #7a818a;font-size:1em;line-height:normal;padding:0.3em;}
div.formcontainer div.form-textarea-label{margin:1em 0 0.2em;}
div.formcontainer textarea#comment{height:12em;margin:0 0 0.5em;overflow:auto;width:25em;}
div.formcontainer,p#mustlogin{margin:0 0 1em 1.5em;}
div.hentry div.archive-meta{font-style:italic;margin:0.5em 0 2em 2em;}
div.hentry div.entry-meta{background:#f6f7f8;border-bottom:1px solid #ccd0d6;border-top:1px solid #ccd0d6;color:#677284;font-size:0.9em;margin:1em 0 5em;padding:0.2em 0.5em;text-align:center;clear:both;}
div.hentry div.entry-meta span.meta-sep{padding:0 0 0 0.3em;}
div.hfeed .entry-title{font-size:1.6em;font-weight:400;line-height:133%;margin:0 0 -0.3em;text-transform:uppercase;}
div.hfeed .page-title{color:#4d5663;font-size:1.7em;font-weight:400;line-height:133%;margin:2em 0 0;}
div.hfeed .page-title span.page-subtitle{color:#7a818a;font-size:0.8em;padding-left:0.2em;}
div.hfeed div#post-0 input#s{width:50%;}
div.hfeed div.p1{margin:5em 0 0;}
div.nav-next{float:right;text-align:right;}
div.nav-previous{float:left;text-align:left;}
div.navigation{font-size:0.9em;height:1.2em;text-align:center;text-transform:uppercase;}
div.navigation div{width:48%;}
div.sidebar{line-height:150%; margin-right:-3px;}
div.sidebar ul li{list-style:none;margin:0 0 2.5em;padding:0;}
div.sidebar ul li h3{font-weight:bold;font-size:1.2em;line-height:133%;letter-spacing:1px;margin:0 0 0.1em;text-transform:uppercase;}
div.sidebar ul li ul li{color:#4d5663;margin:0;padding:0;}
div.sidebar ul li ul li ul{margin:0 0 0.2em;}
div.sidebar ul li ul li ul li{color:#9aa1ae;list-style:disc;margin:0 0 0 2em;}
div.sidebar ul li#blogtxt-recent-comments span.comment-entry-title{font-size:0.8em;}
div.sidebar ul li#blogtxt-recent-comments ul li{margin:0 0 2em;}
div.sidebar ul li#tag-cloud{width:95%;overflow:hidden;line-height:250%;background:transparent;}
div.sidebar ul li#tag-cloud h3{margin-bottom:-1em;}
div.sidebar ul li#calendar div#calendar_wrap{margin:0.5em 0 0;}
div.sidebar ul li#calendar table#wp-calendar{text-align:center;width:75%;}
div.sidebar ul li#calendar table#wp-calendar tbody a{font-size:1.1em;font-weight:700;}
div.sidebar ul li#google-search div form#gsearch,div.sidebar ul li#calendar table#wp-calendar caption{text-align:left;}
div.sidebar ul li#rss_links ul li a,div.sidebar ul li#rss-links ul li a{background:url(images/feed.png) no-repeat left center;padding:0 0 0 15px;}
div.sidebar ul li#search form#searchform{margin:0.2em 0 0;padding:0;}
div.sidebar ul li#search input#s{width:7em;}
div.sidebar ul li.entry-interact ul li.comment-link a{background:url(images/comments.png) no-repeat left center;padding:0 0 0 15px;}
div.sidebar ul li.entry-interact ul li.trackback-link a{background:url(images/trackbacks.png) no-repeat left center;padding:0 0 0 15px;}
div.sidebar ul li.widget_text div.textwidget p{margin:0 0 0.5em;} -
Actually, it’s harder (at least for me) to look at the code as opposed to looking at the actual blog along with the code. And as I was typing this, I found the demo of the blog so that helps!
Your first question:
a) sidebar/widget font color
Are you talking about the titles or the stuff inside the widgets? If the titles:
div.sidebar ul li h3{font-weight:bold;font-size:1.2em;line-height:133%;letter-spacing:1px;margin:0 0 0.1em;text-transform:uppercase;}You would add to this section a color command, i.e., color:#333333;, like this:
div.sidebar ul li h3{ font-weight:bold; font-size:1.2em; line-height:133%; letter-spacing:1px; margin:0 0 0.1em; text-transform:uppercase; color:#333333; {If the stuff inside the widget:
div.sidebar ul li ul li{color:#4d5663;margin:0;padding:0;}b) size of heading: blog title ….how can I increase the size of the title’s heading?
Header code is h1
div#header h1#blog-title{border-bottom:0.1em solid #ccd0d6;font-weight:normal;font-size:4em;line-height:64%;letter-spacing:1px;margin:0;text-transform:uppercase;}So to make it larger, change the font size.
HTH
-
Thank you so much, I’m embarrassed to tell you I spent hours trying to find those lines. One last prayer I am hoping you can answer….
a) is it possible to have the sidebar text begin below the header? I’d like for it to be spaced down on both sidebars about 5 or 6 <p>’s… Not sure if this is clear… Thank you so much!
-
Yes. I would try putting some padding in the top.
Let me give you a couple of hints for working with CSS that I’ve learned (and I’m completely self-taught so I’m no expert). First, if you are on a PC, get the developer’s toolbar for Firefox. I find it absolutely essential when I’m trying to figure out what to change. (Which is why I like to look at the blog.) (Another good FF plug in is Firebug – when it works. Sometimes, I can’t get it to work.)
Second, I use Google like crazy. I can’t remember the syntax of certain things so I Google CSS padding or CSS color (for example) and I find the exact way I should put it in.
Lastly, if you learn like I did, it’s a lot about trial and error.
HTH
-
Oh – and that is a gorgeous theme you found. Had I found that one, I wouldn’t have had to code my entire theme from scratch :(
-
thanks for the tips vivian….i have the firefox plug, but i’ve only been using it for about an hour now. How involved is the padding code? Thank you so much!
-
Like I said, use Google because I never remember the exact syntax. Here is where I’d look http://www.w3schools.com/css/css_padding.asp
- The topic ‘Basic CSS Question’ is closed to new replies.
WordPress.com Forums 