...

View Full Version : Help with CSS - changing headings



sweetchops
05-09-2011, 01:54 AM
Hi,

Just like to say upfront that I'm a hack. I've managed to stumble my through creating by business website with VERY limited knowledge and now I'm creating a new blog but am having trouble with something very basic. I can't change the heading sizes!

The new blog I'm working on can be viewed here: www.dogfriendlypenang.com and I've pased the code below. Basically I'm trying to change the size and font of the main heading 'Dog Friendly Penang'. I've been at it for hours.:confused: I know it's probably really obvious but not to me at the moment! I'd also like to change the size and font type of the blog post headings.

I know some of the language is wrong in other places but as I said, I'm a hack. I just keep tinkering until it's not broken but is doing what I want (even if it's not technically the best way).

Any help would be much appreciated :D

body {
color:#eee;
background:#D8D8D8 url('images/bg.jpg') no-repeat center fixed;
}

.container-inner {
width:950px;
margin:0 auto;
padding:1.75em 0 1em;
}

.container {
background:#FFFFFF url('images/repeater.png') repeat;
}

.lteIE6 .container {
background:#FFFFFF;
}

h1,h2,h3,h4,h5,h6 {
color:#000000;
}

h1 a,h3 a,h4 a,h5 a,h6 a {
color:#000000;
}

h2 a {
color:#088A08;
}

h3.sub,h2.sub {
font-size:1.1em;
font-weight:bold;
line-height:1em;
text-transform:uppercase;
letter-spacing:2px;
color:#515151;
border-bottom:1px solid #000;
margin:0 0 10px;
padding:0 0 5px;
}

a {
color:#088A08;
text-decoration:none;
}

a:hover,a:focus {
color:#088A08;
}

p {
color:#151515;
}

h6.top {
color:#ccc;
}

#top {
width:950px;
color:#666;
margin:0 auto 1em;
padding:0 0 .5em;
}

#top a {
color:#666;
}

.login {
float:left;
}

#masthead {
float:left;
height:36px;
}

#masthead h4,#masthead span {
line-height:2em;
margin:0;
padding:10px 0 0;
}

#masthead h4 {
font-weight:bold;
text-transform:uppercase;
float:left;
}

#masthead h4 a {
color:#fff;
text-decoration:none;
}

#masthead span.description {
color:#ccc;
text-transform:none;
font-size:.7em;
padding:.35em 3em;
}

.double-border {
background:url('images/double-border.png') repeat-x bottom;
height:8px;
width:100%;
clear:both;
float:none;
border:none;
margin:1em 0;
}

#header-image {
margin-bottom:20px;
}

#top div.main-nav {
background:#000;
display:block;
float:right;
font-size:10px;
font-weight:bold;
text-align:left;
margin:18px 0 0;
padding:4px 0;
}

#top div.main-nav ul {
list-style:none;
padding-left:0;
margin:0;
}

#top div.main-nav li {
float:left;
position:relative;
min-width:50px;
}

#top div.main-nav a {
border-right:1px dotted #666;
color:#eee;
display:block;
line-height:15px;
text-decoration:none;
padding:0 1em;
}

#top div.main-nav li:last-child a {
border:none;
}

#top div.main-nav ul ul {
display:none;
position:absolute;
top:15px;
left:0;
float:left;
z-index:99999;
padding:4px 0;
}

#top div.main-nav ul ul ul {
left:100%;
top:0;
}

#top div.main-nav ul ul a {
background:#000;
border:none;
color:#999;
height:auto;
line-height:2em;
width:10em;
padding:.5em .5em .5em 1em;
}

#top div.main-nav ul ul a:hover {
color:#eee;
text-decoration:underline;
}

#top div.main-nav ul li:hover > ul {
display:block;
}

#welcome-content {
font-size:2em;
margin-bottom:.75em;
}

.content {
overflow:hidden;
}

.content h2 {
font-family:Georgia, serif;
}

.post,.page {
display:block;
clear:both;
}

.post h4,.post h6 {
font-family:Georgia, serif;
}

.content ul {
list-style-type:disc;
}

.postmetadata {
background:#fff;
color:#999;
font-size:14px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:1em;
}

.postmetadata a:hover {
color:#088A08;
}

.underlined {
border-bottom:1px solid #eee;
}

h6.underlined {
margin:0 0 1em;
}

.welcomebox {
margin-bottom:1.5em;
color:#eee;
text-shadow:1px 1px 1px #000;
padding:1.5em;
}

.page a.post-edit-link {
display:block;
clear:both;
}

.nav-image-left,.nav-image-up,.nav-image-right {
text-align:center;
float:left;
width:25px;
margin:0 10px 0 2px;
}

.nav-image-left a,.nav-image-up a,.nav-image-right a {
background:#eee;
text-decoration:none;
color:#000;
padding:2px 48%;
}

.nav-image-left a:hover,.nav-image-up a:hover,.nav-image-right a:hover {
background:#000;
color:#fff;
}

.nav {
background:#eee;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
margin:0 0 1em;
}

.nav:hover {
background:#ccc;
}

.prev a,.next a {
color:#222;
text-decoration:none;
padding:.2em 1em;
}

.nav-interior {
clear:both;
display:inline;
margin:0;
padding:0;
}

.nav-interior .next {
color:#000;
text-decoration:none;
float:right;
}

.nav-interior .prev {
color:#000;
text-decoration:none;
float:left;
}

.comments-nav .next a {
color:#088A08;
}

.comments-nav .prev a {
color:#088A08;
}

#sidebar {
margin:0;
}

#sidebar h3 {
margin:0;
padding:0 0 .6em;
}

#sidebar .item {
margin:0 0 4em;
}

#sidebar ul {
list-style:none;
font-size:1em;
margin:0 0 1.6em;
}

#sidebar ul li a,ul.txt li {
color:#088A08;
height:1%;
line-height:1.2em;
border-bottom:1px solid #000;
display:block;
padding:6px 0 6px 8px;
}

#sidebar ul li a:hover,ul.txt li:hover {
color:#58FA58;
background-position:1px .8em;
}

#sidebar ul li a span,ul.txt li,h4 a span {
color:#696455;
}

#sidebar ul li.active a {
cursor:default;
color:white;
}

#sidebar ul ul {
list-style:none;
margin:0;
}

#sidebar .widget_categories ul li a,#footer .widget_categories ul li a,#sidebar .widget_twitter ul li a,#footer .widget_twitter ul li a {
border:none;
background:transparent;
color:#088A08;
display:inline;
line-height:inherit;
padding:0;
}

#sidebar .widget_categories ul li,#footer .widget_categories ul li,#sidebar .widget_twitter ul li,#footer .widget_twitter ul li {
padding-left:8px;
}

#sidebar .widget_twitter ul li {
margin-bottom:1.5em;
}

#flickr_badge_wrapper {
background:transparent!important;
border:none!important;
}

.widget_flickr th,.widget_flickr td {
margin:0;
padding:0;
}

.widget_flickr img {
max-width:230px;
}

.widget_rss_links p img {
vertical-align:middle;
margin:0 4px 0 0;
}

#footer-wrap {
background:#000;
}

#footer {
width:950px;
color:#999;
text-align:left;
margin:0 auto;
padding:1.5em 0;
}

#footer p {
color:#999;
}

#footer h3 {
border-bottom:none;
color:#999;
margin:0;
padding:0 0 .6em;
}

#footer .item {
margin:0 0 4em;
}

#footer ul {
list-style:none;
font-size:1em;
margin:0 0 1.6em;
}

#footer ul li a,ul.txt li {
height:1%;
line-height:1.2em;
display:block;
padding:6px 0 6px 8px;
}

#footer ul li a:hover,ul.txt li:hover {
color:#fff;
background-position:1px .8em;
background:#111;
}

#footer ul li a span,ul.txt li,h4 a span {
color:#696455;
}

#footer ul li.active a {
cursor:default;
color:white;
}

#footer ul ul {
list-style:none;
margin:0;
}

#footer ul#recentcomments {
list-style:none;
font-size:1em;
margin:0 0 1.6em;
}

#footer ul#recentcomments li.recentcomments {
display:block;
padding:4px 0 4px 8px;
}

#footer ul#recentcomments li.recentcomments a {
border:0;
background-image:none;
}

#footer ul#recentcomments li.recentcomments a:hover {
color:#fff;
background-position:1px .8em;
background:#111;
}

#footer ul#recentcomments li.recentcomments a span {
color:#696455;
}

.right {
float:right;
}

.left {
float:left;
}

.middle {
float:left;
margin:0 auto;
}

.clear {
clear:both;
}

img.centered {
display:block;
margin-left:auto;
margin-right:auto;
max-width:950px;
}

img.alignright {
display:inline;
max-width:950px;
margin:3px 0 2px 10px;
padding:4px 0 4px 4px;
}

img.alignleft,img.attachment-post-thumbnail {
display:inline;
max-width:950px;
margin:3px 10px 2px 0;
padding:4px 4px 4px 0;
}

img.alignnone {
display:block;
max-width:950px;
margin:3px 10px 2px 0;
padding:4px 4px 4px 0;
}

.alignleft,.attachment-post-thumbnail {
float:left;
}

.alignright {
float:right;
}

.aligncenter,div.aligncenter {
display:block;
margin-left:auto!important;
margin-right:auto!important;
}

.thumbnail,.attachment-thumbnail,#featured-section .timthumbnail,.archive .timthumbnail,.search .timthumbnail,#category-stack .timthumbnail {
float:left;
margin:0 1.5em 1.5em 0;
}

.alignright .attachment-thumbnail {
margin-right:0;
}

.attachment-medium {
max-width:950px;
overflow:hidden;
display:inline;
}

.attachment-large {
max-width:950px;
overflow:hidden;
display:inline;
}

.content .size-medium,.content .size-large {
margin:0 1.5em 1.5em 0;
}

.home .size-medium,.home .size-large {
max-width:590px;
height:auto;
overflow:hidden;
margin:0 .5em .5em 0;
}

.gallery {
width:101%;
}

.gallery img {
border:none!important;
float:none;
}

.content img.size-auto,.content img.size-full,.content img.size-large,.content img.size-medium,.wp-caption {
max-width:100%;
height:auto;
width:auto;
}

img.wp-smiley {
margin:0;
}

.col-0 {
width:100%;
}

.col-1 {
width:100%;
}

.col-2 {
width:50%;
}

.col-3 {
width:33%;
}

.col-4 {
width:25%;
}

.col-5 {
width:20%;
}

.col-6 {
width:16.5%;
}

.col-7 {
width:14%;
}

.col-8 {
width:12.4%;
}

.col-9 {
width:11%;
}

.col-10 {
width:10%;
}

.col-11 {
width:9%;
}

.col-12 {
width:8.33%;
}

.col-13 {
width:7.6%;
}

.col-14 {
width:7.1%;
}

.col-15 {
width:6.66%;
}

.col-16 {
width:6.25%;
}

.col-17 {
width:5.83%;
}

.col-18 {
width:5.55%;
}

.col-19 {
width:5.25%;
}

.col-20 {
width:4.95%;
}

#filters {
clear:both;
height:2em;
margin-bottom:1em;
}

#filters li {
float:left;
margin-right:2em;
}

:focus {
outline:0;
}

.advertisement .box {
background:#e5ecf9;
}

#search {
margin:0;
padding:0;
}

#search #s {
background:#ddd url('images/search.png') 0 center no-repeat;
color:#222;
font-size:1em;
width:150px;
border:1px solid #333;
margin:0;
padding:4px 0 4px 17px;
}

#search input {
border:0;
}

#search #s:hover {
color:#0066cc;
background:#fff url('images/search_blue.png') 0 center no-repeat;
}

.search-excerpt {
margin:0;
}

#comments,#respond {
clear:both;
}

h3#comments {
background:#000;
margin:10px 0 0;
padding:20px 10px;
}

h3#comments span.comments-subscribe {
float:right;
font-size:.7em;
margin-left:3px;
background:url('images/rss.png') no-repeat 0 50%;
color:#cccccc;
padding:0 0 0 19px;
}

h3#respond {
background:#000;
margin:10px 0 0;
padding:20px 10px;
}

ol.commentlist {
list-style-type:none;
border-bottom:5px solid #eee;
overflow:hidden;
margin:0 0 15px;
padding:0;
}

ol.commentlist li .comment-wrapper {
border-top:5px solid #eee;
overflow:hidden;
width:100%;
}

ol.commentlist li.pingback {
border-top:5px solid #eee;
margin-top:-5px;
padding:1em 0;
}

ol.commentlist li.pingback p {
margin:0;
}

ol.commentlist li strong.fn {
padding-left:1em;
}

ol.commentlist li .comment-meta {
width:150px;
float:left;
padding:15px 0;
}

ol.commentlist li .comment-entry {
line-height:2em;
min-height:160px;
margin:0 0 0 150px;
padding:20px 0 0;
}

ol.commentlist li .avatar {
border:1px solid #000;
margin:0 0 1em;
padding:1em;
}

#commentform {
border-top:10px solid #333;
background:#FFF;
margin:0 0 7px;
padding:30px 150px 6px;
}

#commentform input[type=text] {
float:left;
margin-right:5px;
}

#commentform .comment-form-comment label,#commentform .form-allowed-tags {
display:none;
}

#slideshow {
list-style:none;
overflow:hidden;
min-height:425px;
margin:0 0 3em;
padding:0;
}

#slideshow .slide {
width:950px;
text-align:center;
min-height:425px;
background:none;
padding:0;
}

#slideshow .slide h4 {
text-transform:uppercase;
margin:0 0 .5em;
padding:0 16px;
}

#slideshow .slide img {
display:block;
max-width:950px;
text-align:center;
margin:0 auto;
}

.navigation {
clear:both;
overflow:hidden;
width:100%;
margin:1em 0;
}

DanInMa
05-09-2011, 02:18 AM
yup. youve got yourself a very ugly specifity problem there. many css rules are in 2 of your stylesheets twice. Defintely time to consider some optimization.

that being said

you should be able to do so by editing this selector:


#masthead h4 a {
color:#fff;
text-decoration:none;
}

AndrewGSW
05-09-2011, 02:27 AM
I would prefer to edit the heading itself rather than the 'a' tag within it, but it's up to you :)

#masthead h4 {
float: left;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
font-family: Verdana;
}
As this is the main heading I would also use 'h1' rather than 'h4'. Using 'h1' is better for accessibility and SEO (and is more logical).

But, as mentioned, you should really consider re-writing the css.

DanInMa
05-09-2011, 02:31 AM
with such a mess he has going on, its better to be more specific in my opinion

sweetchops
05-09-2011, 02:33 AM
Thanks for that. When i say I've been messing with it, I've really only changed a few font colours and backgrounds. Most of that code is straight from the wordpress template :(

Would love to re-write CSS but that's way out of my league! I'm just fumbling through with a dummies how to guide and google to get the desired result.

Will play around with code as suggested below. I knew that #masthead h4 {
was the right area but nothing seemed to changing.

To change from h4 to h1 do a literally just change the masthead to h1 or will that mess with others things??

AndrewGSW
05-09-2011, 02:37 AM
You would change 'h4' to 'h1' within the HTML and amend the css rules that apply to 'h4', or 'h4' within the masthead. However, as you're not so confident with css you might decide to leave it :confused:

sweetchops
05-09-2011, 02:52 AM
Thanks. I'm running the blog on wordpress.com self through wordpress.org so don't have access to the html. MIght just have to leave as is.

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum