HTML Question and Font too! - Blog Forum

gandcsundvik · #1 October 31st, 2009, 05:56 PM

Hi. My blog is at www.3kidsincollege.com. I would like to change the title font (set in "settings" "title" and "Description" in the dashboard) if possible. It says "3 kids in college" and then "A Daily Dose of Something Good"...However, I bet I can't change that font or size or color...so any idea how I would insert a larger title with different font in the HTML page (deleting the settings title If I do).

AND, one more thing, the orginal template had an "edit" tab at the top...I changed it via HTML to say "about" but I do not know how to fix it so when "about" is clicked it does, indeed, go to my "about" page and not to a "can't be found" oops page!

I appreciate the knowledge I have found from you guys. Thanks in advance for your help!

Thanks!
Cindy

Here is my HTML for my entire Blog

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Theme Name: Desk Mess
Theme URI: Desk Mess WordPress Theme
Description: Casual work-desk theme for a different blogging experience.Brought to you <a href="http://www.geekwithlaptop.com">Geek with Laptop</a>
Author: Geek With Laptop
Author URL: Laptop and Netbook News from the Geek perspective - GeekWithLaptop.com
Tags: valid XHTML, fixed width, wood, two columns, widgets, gravatars, right sidebar,
The CSS/XHTML is released under GPL: GNU General Public License Versions | Open Source Initiative
Converted to blogger template by FalconHive
Theme URI: Blogspot Templates
Version: 1.00
Date: 08 February 2009
----------------------------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
/* = GLOBAL = */
* {margin:0;padding:0;}
body {
margin: 0;
padding: 0;
background:#ae8858 url(http://1.bp.blogspot.com/_0CLPmP1ydO...Y/s1600/bg.jpg) repeat top left;
font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
font-size: 12px;
line-height:21px;
color: #635537;
}
a:link, a:visited, a:active {
color: #d21600;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-size:25px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
line-height:normal;
padding-bottom:2px;
}
h2 {
font-size:20px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
line-height:normal;
padding-bottom:11px;
padding-top:15px;
}
h3 {
font-size:17px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
line-height:normal;
padding-bottom:10px;
padding-top:14px;
}
/* === HEADER === */
#header-container {
width: 990px;
margin: auto;
padding: 0;
}
#header{
position:relative;
height:295px;
}
#cup {
float:left;
background:url(http://4.bp.blogspot.com/_0CLPmP1ydO.../s1600/cup.png) no-repeat;
height:275px;
width:259px;
margin-top:26px;
}
#logo {
margin-left:-37px;
float:left;
background:url(http://4.bp.blogspot.com/_0CLPmP1ydO...s1600/logo.png) no-repeat;
width:304px;
height:170px;
}
#logo h2{
font-family:"Copperplate Gothic Bold", Arial, sans-serif;
font-size:30px;
color:#fff;
text-align:center;
margin:70px 0 0 24px;
width:280px;
}
#logo p{
color:#fff;
margin-left:15px;
text-align:center;
}
#headerright{
float:left;
background:url(http://4.bp.blogspot.com/_0CLPmP1ydO.../righthead.png) no-repeat;
width:534px;
height:295px;
margin-left:-85px;
}
/* === MENU === */
#menu {
height:55px;
left:20px;
margin:0;
padding:0;
position:absolute;
text-transform:uppercase;
top:248px;
}
#menu, #menu ul {
line-height:3.5;
list-style-image:none;
list-style-position

utside;
list-style-type:none;
}
#menu a, #menu a:hover {
border:medium none;
display:block;
text-decoration:none;
}
#menu li {
background:transparent url(http://2.bp.blogspot.com/_0CLPmP1ydO...nu_button2.png) repeat scroll 0 0;
float:left;
height:61px;
list-style-image:none;
list-style-position

utside;
list-style-type:none;
margin-left:2px;
margin-right:2px;
text-align:center;
width:99px;
}
#menu a, #menu a:visited {
color:#332613;
display:block;
font-weight:bold;
padding:10px 12px;
}
#menu a:hover, #menu a:active {
color:#D21600;
text-decoration:none;
}

/* === MAIN AREA == */
.clear {
position: relative;
clear: both;
height: 5px;
}
#wrapper {
margin: 0 auto;
position: relative;
width: 977px;
background-image: url(http://4.bp.blogspot.com/_0CLPmP1ydO...ainmidpart.png);
background-repeat: repeat-y;
}
#mainwrap{
width:990px;
margin:0 auto;
}
#maintop {
margin: 0 auto;
position: relative;
width: 977px;
}
#maintopimg {
position: relative;
padding:0;
background:url(http://3.bp.blogspot.com/_0CLPmP1ydO...aintoppart.png);
height:113px;
}
#content {
position: relative;
width: 950px;
margin: 0 0 0 45px;
}

/* === MAIN BLOG === */
#main-blog {
float:left;
width:580px;
padding:15px 10px 10px 10px;
}
#main-blog h1 {
font-size:22px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
line-height:normal;
padding-bottom:2px;
}
#main-blog h1 a, #main-blog h1 a:visited, #main-blog h1 a:active{
color:#4a4131;
text-decoration:none;
border-bottom:1px solid #b2b0a4;
}
#main-blog h1 a:hover{
color:#d21600;
text-decoration:none;
border-bottom:1px solid #d21600;
}
.postdata {
margin-bottom: 20px;
font-size: 12px;
font-weight: normal;
font-style:italic;
color: #4a4131;
}
.post {
margin-bottom:60px;
}
.post p {
margin:0;
padding:0 0 10px;
}
.post ul {
margin-left:35px
}
.post-comments {
float: right;
width: 63px;
height: 61px;
padding:18px 0 0 24px;
font-size:18px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
margin:-7px 20px 0 0;
background: url(http://2.bp.blogspot.com/_0CLPmP1ydO...commentbck.png) no-repeat;
}
.post-social {
float: right;
width: 78px;
height: 74px;
margin:-22px 30px 0 0;
background: url(http://img8.imageshack.us/img8/6044/socialbcklk6.png) no-repeat;
}
.rss {
background: url(http://4.bp.blogspot.com/_0CLPmP1ydO...00/rssicon.png) no-repeat 0 50%;
padding-left:20px;
padding-top:1px;
}
.post-comments a:link, .post-comments a:visited, .post-comments a:active{
color:#4a4131;
text-decoration:none;
}
.post-comments a:hover {
color:#d21600;
text-decoration:none;
}

/* === SIDEBAR == */
#sidebar-top {
background: url(http://2.bp.blogspot.com/_0CLPmP1ydO...sidebartop.png) no-repeat;
height: 90px;
min-height: 90px;
}
#sidebar-content {
background: url(http://1.bp.blogspot.com/_0CLPmP1ydO...sidebarmid.png) repeat-y;
padding:9px 30px 30px 30px;
}
#sidebar-bottom {
background: url(http://1.bp.blogspot.com/_0CLPmP1ydO...ebarbottom.png) no-repeat;
height: 37px;
min-height: 37px;
text-align:right;
margin-left:-1px;
}
#sidebar {
width:305px;
position:relative;
float:left;
margin:-20px 0 0 -8px;
}
.subcolumn{
width:255px;
}
#search{
width:252px;
height:125px;
background:url(http://3.bp.blogspot.com/_0CLPmP1ydO.../searchbck.png) no-repeat;
margin-left:4px;
}
.form-input {
margin: 65px 10px 10px 37px;
width: 173px;
padding: 2px 2px;
background: #faf6f6;
border: 1px solid #e3dccb;
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
.form-input:focus {
background:#f2f0f0;
border: 1px solid #b5b4b2;
}
.search-submit {
margin:0 0 0 84px;
width: 85px;
background: #faf6f6;
border: 1px solid #e3dccb;
color: #666;
font-size:.85em;
}
.widgeth .widget {
width:252px;
margin-left:4px;
background:url(http://2.bp.blogspot.com/_0CLPmP1ydO.../widgetbck.png) repeat-y;
border-bottom:1px solid #e3dccb;
margin-bottom:10px;
text-align:center;
padding-bottom:10px;
margin-top:10px;
}
#calendar_wrap{
margin-left:55px;
}
.widgeth p {
padding-left:5px;
}

.widgeth h2 {
height:40px;
width:252px;
background:url(http://4.bp.blogspot.com/_0CLPmP1ydO...0/widgeth2.png) no-repeat;
text-align:center;
padding:22px 0 0 0;
font-size:20px;
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
line-height:normal;
color:#4a4131;
margin:0;
}
.widgeth ul {
margin:0 0 15px 0;
padding:5px 0;
border:none ;
list-style:none;
}
.widgeth ul li {
padding:5px 15px 10px 15px;
margin:0px;
background: url(http://4.bp.blogspot.com/_0CLPmP1ydO...tseparator.png) no-repeat 25% 100%;
}
.widgeth ul li a{
color: #d21600;
text-decoration:none;
}
.textwidget{
padding:0 8px 0 8px;
}
.widgeth ul li a:hover{
color: #635537;
text-decoration:none;
}
/* --- YOUR-LINK-HERE --- */
img {
}
p img {
padding: 0;
max-width: 100%;
}
img.aligncenter {
border: 1px solid #59350b;
margin-left: auto;
margin-right: auto;
display: block;
}
img.alignright {
border: 1px solid #59350b;
margin: 0 0 13px 13px;
display: inline;
}
img.alignleft {
border: 1px solid #59350b;
margin: 0 13px 13px 0;
display: inline;
}
.alignleft {
float: left
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #59350b;
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;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

/* == FOOTER == */
#bottom{
background:url(http://2.bp.blogspot.com/_0CLPmP1ydO...00/footer2.png) no-repeat;
height:154px;
}
#bottom p{
text-align:center;
}
#wp-footer{
position:absolute;
background: url(http://1.bp.blogspot.com/_0CLPmP1ydO.../footer-wp.png) no-repeat;
width:95px;
height:26px;
margin-top:95px;
margin-left:460px;
}
#wp-footer a {
display: block;
height: 0;
padding-top:26px;
overflow: hidden;
text-decoration: none;
width: 95px;
}
#wp-footer a:hover {
background: url(http://1.bp.blogspot.com/_0CLPmP1ydO.../footer-wp.png) no-repeat 0 -28px;
}

/*------------------COMMENTS----------*/
.commentlist {
padding: 0;
text-align: justify;
}
.commentlist p {
margin: 0 15px 10px 2px;
clear:both;
}
#commentform p {
margin: 5px 0;
}
.nocomments {
text-align: center;
margin: 0;
padding: 0;
}
.alt{
margin-top: 1px;
padding: 10px 10px 5px 10px;
background: #f2f2f2;
border: 1px solid #b2b0a4;
}
.alt2{
margin-top: 1px;
padding: 10px 10px 5px 10px;
background: #ffffff;
border: 1px solid #b2b0a4;
}
.administrator {
margin-top: 1px;
padding: 10px 10px 5px 10px;
background:#e5dfcf url(http://1.bp.blogspot.com/_0CLPmP1ydO...600/author.png) no-repeat center ;
border: 1px solid #7e7d75;
}
.cgravatar {
float: left;
width: 60px;
height: 60px;
margin: 0px 12px 0px 0px;
border: 1px solid #47453a;
}
.comment-author {
font-size: 120%;
font-family:Geneva, Arial, Helvetica, sans-serif;
color: #2b2d2f;
}
.comment-author a:link , .comment-author a:visited, .comment-author a:active {
color: #d21600;
border-bottom: 1px solid #d21600 ;
text-decoration: none;
}
.comment-author a:hover {
color: #635537;
border-bottom:1px solid #b2b0a4;
text-decoration: none;
}
.comment-date {
margin-left:2px;
margin-top:3px;
font-size: .75em;
color: #888;
}
#com{
width:580px;
padding: 0 0 5px 0px;
clear: both;
}
#comhead{
background:url(http://3.bp.blogspot.com/_0CLPmP1ydO...1600/comh3.png) no-repeat;
margin-bottom:10px;
color:#271b03;
padding:8px 0 0 40px;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
width: 175px;
height: 36px;
}
#respond {
width:580px;
padding: 0 0 5px 10px;
clear: both;
}
#respond {
background:url(http://3.bp.blogspot.com/_0CLPmP1ydO...1600/comh3.png) no-repeat;
width: 175px;
height: 36px;
margin-top:25px;
color:#271b03;
padding:8px 0 0 70px;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
}
#commentform {
margin: 10px 10px 30px 0px;
font: 110% Arial, Helvetica, sans-serif;
}
#commentform p {
padding: 6px 0px;
margin: 0px;
}
#commentform label{
color: #787878;
font-size: 87%;
}
#commentform input{
width: 200px;
background: #fff;
border: 1px solid #b2b0a4;
padding: 5px;
margin-top: 3px;
font: 100% 'Trebuchet MS', Verdana, Sans-Serif;
}
#commentform textarea{
height: 130px;
background: #fff;
border: 1px solid #b2b0a4;
padding: 5px;
margin-top: 3px;
font: 100% 'Trebuchet MS', Verdana, Sans-Serif;
overflow: auto;
}
#commentform #submit{
cursor

ointer;
}
.contactform input, .contactform textarea {
background: #333;
border: 1px solid #b2b0a4;
color: #fff;
}
.contactform input:focus, .contactform textarea:focus {
background:#444444;
border: 1px solid #000;
padding-bottom:30px;
color:#fff;
}
.contactform #contactsubmit {
width: 85px;
background: #111;
border: 1px solid #666;
color: #e3e3e3;
font-size:.85em;
}
.contactform #contactsubmit:focus{
width: 85px;
background: #333;
border: 1px solid #666;
color: #e3e3e3;
font-size:.85em;
}
.contactform textarea {
width: 340px;
height: 200px;
margin-bottom:10px;
}
.ddfmwrap {
width: 450px;
margin: 0;
padding: 10px 0;
}
.ddfmwrap form.ddfm {
width: 450px;
margin: 0;
padding: 0;
}
.ddfmwrap form.ddfm legend {
font-size: 1.1em;
font-weight: normal;
color: #635537;
}
.ddfmwrap form.ddfm label {
padding-top: 4px;
color: #635537;
font-weight: normal;
line-height: normal;
}
.ddfmwrap form.ddfm fieldset {
padding: 15px 15px 15px;
border: 1px solid #b2b0a4;
}
.ddfmwrap p {
color: #635537;
}
form.ddfm .credits {
display: none;
}
.ddfmwrap .required {
color: #cf0e0e;
}
.ddfmwrap .fmtext, .ddfmwrap .fmtextarea, .ddfmwrap .fmselect {
padding: 4px 5px;
background: #fdfef6;
border: 1px solid #b2b0a4;
color: #635537;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 1em;
}
.ddfmwrap .fmtextarea {
height: 200px;
}
.ddfmwrap .fmtext:focus, .ddfmwrap .fmtextarea:focus, .ddfmwrap .fmselect:focus {
border: 1px solid #918b6e;
}
.ddfmwrap .submit {
margin-left:-8px;
text-align: left;
}
.ddfmwrap .submit input {
padding: 3px 12px;
background: #fdfef6;
border: 1px solid #918b6e;
color: #2b2d2f;
font: normal 0.9em Arial, Helvetica, Geneva, sans-serif;
}
#wp-calendar {
empty-cells:show;
font-size:12px;
font-weight:bold;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
width:200px;
}
#blog-pager-newer-link{padding-left:20px;float:left}
#blog-pager-older-link{padding-right:20px;float:right}
#blog-pager{text-align:center}
]]></b:skin>

</head>
<body>

<div id='mainwrap'>

<div id='header-container'>

<div id='header'>
<div id='cup'/>
<div id='logo'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='3 Kids In College (Header)' type='Header'/>
</b:section>
</div>

<div id='headerright'/>
<ul id='menu'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Post RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS'>Comments</a></li>
<li><a href='About' title='About'><span>About</span></a></li>
</ul>
</div>

</div>


<div id='maintop'>
<div id='maintopimg'/>
</div>


<div id='wrapper'>

<div id='content'>

<div id='main-blog'>
<div class='clear'/>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>


<div id='sidebar'>
<div id='sidebar-top'/>
<div id='sidebar-content'>
<div id='subcolumn'>
<div id='search'>
<form action='/search' id='searchform' method='get'>
<div>
<input class='form-input' id='s' name='q' size='35' type='text' value=''/>
<input class='search-submit' name='search' type='submit' value='Search'/>
</div>
</form>
</div>
<b:section class='widgeth' id='widgeth' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Gadget1' locked='false' title='Health Tip of The Day' type='Gadget'/>
<b:widget id='HTML2' locked='false' title='MP3 Clips' type='HTML'/>
<b:widget id='AdSense2' locked='false' title='' type='AdSense'/>
<b:widget id='HTML3' locked='false' title='Movie &amp; TV Show Preview Widget' type='HTML'/>
<b:widget id='NewsBar1' locked='false' title='' type='NewsBar'/>
<b:widget id='Gadget3' locked='false' title='Daily Calendar' type='Gadget'/>
<b:widget id='Poll1' locked='false' title='How happy are you?' type='Poll'/>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
</b:section>
</div>
</div>
<div id='sidebar_bottom'/>
</div>

<div class='clear'/>
</div>

</div>


<div id='bottom'>
<p style='padding-top:110px; clear:both;'> Copyright © 2009 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> All rights reserved. Theme by <a href='http://www.geekwithlaptop.com' style='text-decoration:none; color: #635537;' title='Geek with Laptop'>Laptop Geek</a>. | Distributed by <a href='http://freetemplates4all.blogspot.com' target='_blank' title='Free Blogger Templates'>Blogspot Templates</a>.</p>
</div>

</div>

</body>
</html>

Nathan · #2 October 31st, 2009, 10:12 PM

The about page problem is easy. This is what you have:

Code:

<li><a href='About' title='About'><span>About</span></a></li>

This is what you need:

Code:

<li><a href='http://blogaddress.com/aboutPage' title='About'><span>About</span></a></li>

Naturally you will have to substitute the correct URL of you about page. The way to make an about page is to make a new post on your blog, manually set its date so that it is the oldest post, title it about, and make it say something about your blog and you.

Then copy the address of that page and paste it in the link code.

Nathan · #3 October 31st, 2009, 10:15 PM

The font for the webpage title can be changed by changing:

Code:

#logo h2{
font-family:"Copperplate Gothic Bold", Arial, sans-serif;
font-size:30px;
color:#fff;
text-align:center;
margin:70px 0 0 24px;
width:280px;
}
#logo p{
color:#fff;
margin-left:15px;
text-align:center;
}

The "#logo h2" style selector controls the appearance of the main blog title.

The "#logo p" style selector controls the appearance of the text that appears just below.

The styling values font-family and font-size should be fairly self explanatory as far as figuring out how to change them. If you need help look at the W3Schools CSS tutorials or else just ask me.

I hope my explanation have helped.

gandcsundvik · #4 November 1st, 2009, 03:19 PM

Thank you, thank you, thank you, Nathan. Someday I want to be as smart as you! The font changed perfectly and looks good. I am just still stuck on the about page link. I did the new post, did the about me blog, but I am not sure what you mean by "Then copy the address of that page and paste it in the link code." I changed the HTML as instructed. Still, I am looking for away for my readers to click on "about" and get to the "about" page. Thanks again. You rock!

Cindy

Nathan · #5 November 1st, 2009, 06:53 PM

Okay, each post on your blog has a specific address. You can find the address of each post by click on it in the archive in your sidebar or by clicking on the post title. The address of your About Page is:

Code:

http://www.3kidsincollege.com/2009/10/when-my-youngest-went-to-college-i.html

So to make the "About" link go to your about page you have to direct it to that address:

Code:

<li><a href='http://www.3kidsincollege.com/2009/10/when-my-youngest-went-to-college-i.html' title='About'><span>About</span></a></li>

I just used the URL "aboutPage" as an example because I didn't know what the URL of your about page was. The above code should work though because it uses the actual address of your about post.

gandcsundvik · #6 November 1st, 2009, 07:39 PM

Thanks, Nathan. I found the address of my post and made the code: <li><a href='http://www.3kidsincollege.com/2009/10/when-my-youngest-went-to-college-i.html' title='About'><span>About</span></a></li>

But, duh, I don't know where to put it do that about links to the post. Just learning...your patience is appreciated.

Do I put it somewhere in the HTML? How do I direct it to the address above? I don't know how to "Paste it in the link code"

Again, thanks. I owe you a beer

Cindy

Nathan · #7 November 1st, 2009, 07:48 PM

Ah...

Go to Settings->Edit Html and look for:

Code:

<li><a href='http://blogaddress.com/aboutPage' title='About'><span>About</span></a></li>

Replace that code with:

Code:

<li><a href='http://www.3kidsincollege.com/2009/10/when-my-youngest-went-to-college-i.html' title='About'><span>About</span></a></li>

gandcsundvik · #8 November 2nd, 2009, 08:12 PM

Perfect! You made my day!

Nathan · #9 November 2nd, 2009, 09:21 PM

Quote:

Originally Posted by gandcsundvik

Perfect! You made my day!

Excellent. I'm glad it works for you.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode