Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with CSS - changing headings

    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. 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

    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;
    }

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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:

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

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    I would prefer to edit the heading itself rather than the 'a' tag within it, but it's up to you
    Code:
    #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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    sweetchops (05-09-2011)

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    with such a mess he has going on, its better to be more specific in my opinion

  • #5
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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??

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •