CSS title bar

For help and advice about coding

Moderator: Tech Moderators

User avatar
RobD
Posts: 1499
Joined: Sun Mar 18, 2007 9:16 pm
Tag: Too cool for School
Location: In a field
Contact:

CSS title bar

Postby RobD » Tue Sep 15, 2009 10:26 am

Hi all,

I want to change the font of my title (delbridge.co.uk) to Lucida Handwriting but I'm struggling. As I understand it I have to the type of font to the body bit at the top and then the actual font in the #welcomeheading a bit but I'm lost....anyone know? Here's the style.css:

Code: Select all


* { margin: 0; padding: 0; list-style: none; }

body {
   text-align: center;
   color: #fff;
   font-family: "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif;
   background-color: #000;
}

body a {
      color: #42adfb;
}


#upperBar {
   height: 0px;
   background: #01bcff;
}

#wrapper {
width: 940px;
margin: 0 auto;
text-align: left;
   position: relative;
}   

#welcomeheading a {
   margin-bottom: 10px;
   padding-bottom: 15px;
   font: 40pt "Trebuchet MS", "Lucida Grande", Lucida, Vernada, sans-serif;
   padding-top: 10px;
   color: #fff;
   text-decoration: none;
}

#welcomeheading {
      text-align: center;
}

#welcomeheading a:hover {
   color: #ddd;

}

#middleword {
   color: #909090;
}

#welcomeheading a:hover #middleword {
   color: #fff;
}
 
 
.description {
   text-align: center;
         font: normal 14px Verdana, Helvetica, Sans-serif;
   color: #fff;
   padding-bottom: 5px;
   padding-top: 10px;


               
#content {
   float: right;
   width: 640px;
   margin-top: 0px;
}

   #content .notice p {
      border-top: 1px solid #bbb;
      border-bottom: 1px solid #bbb;
      padding: 5px 0px;
      font-size: 12px;
   margin: 1px;
}
      #content .notice {

   margin-bottom: 20px;
}

    #content .post {
            float: left;
      position: relative;
      width: 640px;
      margin-bottom: 30px;
   padding-top: 10px;
}
   
   #content .post h2 a {
   color: #FFF;
   text-decoration: none;
   
   padding: 3px 0;
   font-size: 24px;
   font-weight: bold;
}

   #content .post h2 a:hover {
      color: #D5F3FF;
   }
   
   #content .post h3 {
      font-size: 12px;
      font-weight: normal;
      color: #999;
         margin-bottom: 0px;
   margin-top: 5px

}

 #content .post-details {

}

 #content .prevnext {
   margin-top: 20px;
   font: normal 13px/20px Verdana, Helvetica, Sans-serif;

   
}   
   #content .post h3 a {
      color: #999;
   }             
   
   #content .post h3 a:hover {
      text-decoration: none;
   }
   
   #content .post img {
   max-width: 500px;
   max-height: 600px;
   margin-bottom: 10px;
   margin-top: 10px;

}     


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

.alignleft {
   float: left;
}

.alignright {
   float: right;
}


.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

#content p.wp-caption-text 
   {
   font-size: 11px;
   line-height: 17px;

   margin: 10px;
   color: #000;
   text-align: center;
}
   
   #content .post a img {
   }
      
   #content .post ul {
      margin-left: 20px !important;
   }
   
   #content .post ul li {
      list-style-type: disc !important;
   }
   
   #content p,
   #content .post ul li {
      font: normal 13px/20px Verdana, Helvetica, Sans-serif;
      margin-bottom: 10px;
      margin-top: 10px;
   color: #eaeaea;
   margin-right: 0px;
   text-align: justify;
}
   
   #content blockquote {
   margin-left: 10px;
   border-left: 3px solid #555;
   padding-left: 10px;
   font-style: italic;
}
   
   #content p a {
      color: #42adfb;
   }
   
   #content p a:hover {
      text-decoration: none;
   }
   
   #content small {
       margin: 0 auto;
       text-align: center;
       display: block;
       border-top: 3px solid #333;
       border-bottom: 1px solid #333;
       font-size: 11px;
       color: #999;
   }
   
   #content ol {
   line-height: 1.6;
}
   #content ol.commentlist {
      margin-top: 10px;
   }
   
   #content ol.commentlist li {
      border-top: 1px solid #333;
      margin-bottom: 10px;
   }
   
      #content ol.commentlist li .commentMeta {
         width: 120px;
         float: left;
         margin-top: 5px;
      }
      
          #content ol.commentlist li .commentMeta span {
            display: block;
         }
         
         #content ol.commentlist li .commentMeta span.author,
         #content ol.commentlist li .commentMeta span.author a {
            color: #CCC;   
            text-decoration: none;
            margin-bottom: 5px;
         }                     
         
         #content ol.commentlist li .commentMeta span.date a {
            color: #666;
            text-decoration: none;
            font-size: 11px;
         }

         #content ol.commentlist li .commentMeta span.moderate a {
            color: #42adfb;
         }
      
      #content ol.commentlist li .commentText {
         width: 450px;
         float: right;
         padding: 5px;
         font-size: 12px;
      }
   
   
   #content ol.commentlist .avatar {
float: left;
}


   #content h3 {
      color: #42adfb;

   }
   
   #content #commentform input {
      padding: 5px;
      font-family: Arial, Helvetica, Sans-serif;
   }
   
   #content #commentform textarea {
      width: 410px;
      padding: 10px;
      font-family: Arial, Helvetica, Sans-serif;
   }
   
   #content .nextprevious {
      height: 40px;
      display: block;
   }
   
   #content .nextprevious a {
      color: #CCC;
   }               
   
   #content .nextprevious .left {
      float: left;
   }             
   
   #content .nextprevious .right {
      float: right;
   }
   
   #content .adBrite {
      display: block;
      margin-bottom: 20px;
      border: 1px solid #333;
   }

#sidebar {
   width: 232px;
   float: none;
   padding-top: 8px;
   text-align: left;
}

#sitemeter {
   text-align: center;
   width: 160px;
      font-size: 11px;
      color: #999;
}
#sitemeter img{
   padding-bottom: 8px;
   padding-top: 8px;
}

   #sidebar h2 {
      font-weight: normal;
      font-size: 16px;
      text-transform: uppercase;
      margin-bottom: 10px;
   padding-top: 8px;
}
   
   #sidebar a img {
      border: none;
   }
   

   #sidebar ul {
      margin-top: 10px;
      margin-bottom: 10px;
}
   
   #sidebar ul li {
      font-size: 11px;
      background: url(img/bullet.png) 0 5px no-repeat;
      padding: 0 10px;
      margin: 0 0 5px 5px;
   }
   
   #sidebar ul li a {
      color: #999;
      text-decoration: none;
   }
   
   #sidebar ul li span {
      color: #666;
      margin-left: 5px;
   }
   
   #sidebar ul li a:hover {
      color: #CCC;
   }
   
   #sidebar ul#nav {
      margin: 10px 0 20px 0;
   }
   
   #sidebar ul#nav li {
      margin: 0;
      padding: 0;
   }
      
   #sidebar ul#nav li a {
      display: block;
      height: 17px;
      padding: 7px 10px;
      background: url(img/nav_off.png) 0 0 no-repeat;
      margin-bottom: 5px;
      text-decoration: none;
      font-size: 12px;
      text-transform: uppercase;
      font-weight: bold;
      color: #999;
   }
   
   #sidebar ul#nav li a:hover {
      background: url(img/nav_off.png) 0 -31px no-repeat;
   }       
   
   #sidebar ul#nav li a.active {
      background: url(img/nav_on.png) 0 0 no-repeat;
      color: #FFF;
   }


#footer hr {
height: 1px;

}


#sidebar #footer {
   border-top: 1px double #ccc;
    border-bottom: 1px solid #ccc;
    padding: 7px 0 2px;
    font-size: 11px;
   margin-top: 10px;
   margin-bottom: 20px;
}

    #sidebar #footer p {
        margin-bottom: 5px;
        color: #eee;
   text-align: center;
}
   
    #sidebar #footer a {
        color: #999;
   text-decoration: none;
}
   
    #sidebar #footer a:hover {
        text-decoration: none;
        color: #fff;
    }

.clearfix {
   clear: both;
}   

.ctc {
text-align: center;
   text-decoration: none;
   line-height: 80%;
   background-color: #000;
   margin-bottom: 10px;
   padding-right: 10px;
   padding-top: 0px;
   padding-bottom: 10px;
}   


.ctc a {
   text-decoration: none;
   text-transform: lowercase;
   font-family: "Lucida Grande",Tahoma,"Lucida Sans Unicode",Verdana,sans-serif;
   margin: 4px;
   border: thin none #060606;
}
.ctc a:hover{
   color: #fff;
   margin: 3px;
   border: thin solid #8acef3;
   background-color: #0c0c0c;
}

[disabled] {

   color:#dddddd;

   border-color:#dddddd!important;

   background:none!important;

}

 #upperBox {
   margin-bottom: 10px;
   text-align: center;
   position: absolute;
   right: 0;
   padding-top: 5px;
}
   
 #upperBox a img {
      display: block;
      margin: 0 auto;
      border: none;
   }
   

    #upperBox p {
      margin: 5px 0;
      font-size: 10px;
      text-align: center;
   }
   
    #upperBox input {
      height: 18px;
      padding: 5px 5px 5px 25px;
      background: url(img/upperBox_search.png) top left no-repeat;
      border: 0;
      width: 100px;
      color: #9ec7eb;
      margin-top: 5px;
   }
   
    #upperBox input:focus {
      color: #FFF;
   }
Woop Woop Woop

User avatar
Blak
Tech Moderator
Posts: 1759
Joined: Mon Mar 19, 2007 12:07 pm
Tag: Hasn't realised that there are custom ranks yet
Contact:

Re: CSS title bar

Postby Blak » Tue Sep 15, 2009 10:43 am

#welcomeheading a {} contains the styles for the a tag inside the div with the id "welcomeheading".

change the line
font: 40pt "Trebuchet MS", "Lucida Grande", Lucida, Vernada, sans-serif;
to
font: 40pt "Lucida Handwriting", "Trebuchet MS", "Lucida Grande", Lucida, Vernada, sans-serif;


It's worth pointing out that Lucida Handwriting isn't a standard font and people without it installed will see the next font that you've specified. Lucida Grande is only standard on mac, Lucida Sans Unicode is its standard counterpart on windows.

User avatar
RobD
Posts: 1499
Joined: Sun Mar 18, 2007 9:16 pm
Tag: Too cool for School
Location: In a field
Contact:

Re: CSS title bar

Postby RobD » Tue Sep 15, 2009 10:52 am

Thanks Blak, thats worked perfectly... Now I love you and RB!
Woop Woop Woop

User avatar
Savara
Posts: 2071
Joined: Sun Sep 23, 2007 5:45 pm
Location: London
Contact:

Re: CSS title bar

Postby Savara » Tue Sep 15, 2009 3:04 pm

Hussy. :P

User avatar
RobD
Posts: 1499
Joined: Sun Mar 18, 2007 9:16 pm
Tag: Too cool for School
Location: In a field
Contact:

Re: CSS title bar

Postby RobD » Tue Sep 15, 2009 10:02 pm

Savara wrote:Hussy. :P


Yes, yes I am :D

and lame at coding!!!
Woop Woop Woop


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 1 guest

cron