Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
#1 2005-11-03 01:55:06
- kitkioto
- Member
- Registered: 2005-10-06
- Posts: 16
Font not being applied in header
Hi, I know this is a CSS issue, but I’ve transfered some css to text pattern from a previous site (which was applied to a static page) to text patter css, and the fonts I chose for the header (and article titles as well) are no longer being applied.
the site is http://www.orangegroverecords.com
the previous implementation is at http://www.orangegroverecords.com/archive/
the old CSS can be found at http://www.orangegroverecords.com/archive/css/orange.css
the new css is as follows:
———————-
#accessibility
{
position: absolute;
top: -10000px;
}
/*This is the core style sheet for OrangeGroveRecords.com*/
#page {
margin-right: auto;
margin-left: auto; }
/*#page envelopes the entire “vertical” section of the site, from the header down to the bottom of content*/
h1, h2, p {
font-family: “American Typewriter”, Times, “Times New Roman”, serif;
}
body {
font-family: “American Typewriter”, Times, “Times New Roman”, serif;
font-size: 1em;
margin: 0em;
color: #cc6600;
background-color: #ff9900; }
/*#header contains #headerimage, img, #headertext, p.title and p.subtitle*/
#header {
width: 800px;
top: 0em;
left: 0em;
height: 100px;
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: #ffffff;
}
#headertext {
background-color: #ffffff;
width: 800px;
height: 100px;
margin-left: 100px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
position: absolute;
top: 0px;
background-image: url(/images/2.jpg);
background-repeat: no-repeat;
font-weight: normal;
font-size: 1.2em;
background-position: 0px 0px;
}
h1.title{
font-family: “American Typewriter”, Times, “Times New Roman”, serif;
font-size: 1.2em;
line-height: 1em;
text-align: center;
padding-right: 1em;
vertical-align: 0em;
letter-spacing: .7em;
}
h2.subtitle{
font-family: “American Typewriter”, Times, “Times New Roman”, serif;
font-size: 1em;
line-height: 1em;
text-align: center;
padding-right: 1em;
letter-spacing: .3em;
}
/*#content contains #mission, #menubar, and #substance*/
#content {
background-color: #ffffff;
width: 800px;
position: static;
padding: 0em;
margin: 0em;
}
#mission {
text-align: center;
background-color: #ffffff;
position: static;
width: 800px;
padding-top: 1px;
padding-bottom: 1px;
font-size: .6em;
}
/*The following ID selector and Descendant Selectors shape the style of the linked list, by choosing, “inline-block” each list iten is displayed in a “line” each in it’s own “block” duh… This way you can seperate the links and display them horizontally, which I will do underneath the mission statement.*/
#menubar {
padding: 0em;
margin: 0em;}
#menubar ul {
width: 100%;
margin: 0px;
background-color: #ffcc66;
padding: 0em; }
#menubar ul li {
list-style-type: none;
position: static;
table-layout: auto;
display: inline;
margin: 0em;
padding-right: 2em;
padding-left: 2em; }
#menubar ul li a:link, #menubar ul li a:visited {
text-decoration: none;
color: #cc6600;
display: inline; }
#menubar ul li a:hover {
color: #cc6600;
background-color: #ffffcc;
text-decoration: none; }
#substance {
position: relative;
width: 750px;
background-color: #ffffff;
text-align: left;
}
.embed-left{
float: left;
margin: 5px;
padding-top: 0;
padding-left: 0;
padding-right: 1em;
padding-bottom: 1em;
}
.embed-right{
float: right;
margin: 5px;
padding-top: 0;
padding-left: 1em;
padding-right: 0;
padding-bottom: 1em;
}
.light-border{
border: 1px solid;
}
/*#footer should just be at the very end of the page, flush with the bottom.*/
#footer {
padding: 0em;
margin: 0em;
font-size: .6em;
width: 800px; }
#footer ul {
margin: 0px;
background-color: #ffcc66;
padding: 0em;
}
#footer ul li {
list-style-type: none;
position: static;
display: inline;
margin: 0em;
padding-right: 3em;
padding-left: 3em;
}
#footer ul li a:link, #menubar ul li a:visited {
text-decoration: none;
color: #cc6600;
display: inline; ;
}
#footer ul li a:hover {
color: #cc6600;
background-color: #ffffcc;
text-decoration: none;
}
——————
the page code used for the “uses page” is as follows:
<code><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<meta http-equiv=“content-type” content=“text/html; charset=utf-8” /> <link rel=“stylesheet” href=”<txp:css />” type=“text/css” media=“screen” /> <title><txp:page_title /></title>
<body>
<div id=“accessibility”>
<a href=”#content” title=“Go to content”>Go to content</a>
<a href=”#sidebar-1” title=“Go to navigation”>Go to navigation</a>
<a href=”#sidebar-2” title=“Go to search”>Go to search</a>
</div>
<center>
<div id=“page”>
<div id=“header”>
<div id=“headertext”>
<h1 class=“title”><txp:link_to_home><txp:sitename /></txp:link_to_home></h1>
<h2 class=“subtitle”><txp:site_slogan /></h2>
</div>
</div>
<div id=“content”>
<div id=“mission”>
<p>“Orange Grove Records is a co-operative internet record
label. What does this mean? It means that all the members of the label
are working together to share in the success of the label, because the
dedication is a reflection on us all.”</p>
</div>
<div id=“menubar”>
<txp:section_list form=“Links” sort=“linksort” wraptag=“ul” break=“li” />
</div>
<div id=“substance”>
<txp:article />
<txp:if_individual_article>
<p>
<txp:link_to_prev><txp:prev_title /></txp:link_to_prev>
<txp:link_to_next><txp:next_title /></txp:link_to_next>
</p>
</txp:if_individual_article>
<txp:if_article_list>
<p>
<txp:older>Previous</txp:older>
<txp:newer>Next</txp:newer>
</p>
</txp:if_article_list>
</div>
</div>
</div>
</center>
<center>
<div id=“footer”>
<ul>
<li>Copyright © 2005, Orange Grove Records, All rights Reserved</li>
<li><a href=“mailto:alex@orangegroverecords.com”>Questions? Click Me!</a></li>
</ul>
</div>
</center>
<br />
<br />
<br />
</body>
</html></code>
The comments in the CSS were meant for me, obviously. Some of the stuff there may not be so “duh” for others readin it. Also, the comments may not apply, as I had to tweak the xhtml and the CSS as I jamming the previous site into textpattern. I know some of the CSS and xhtml is inefficient and/or inelegant, but so far it’s made due (I plan on fixing it up when I have some free time to sift through the code). Eventually I’d like the site to validate (at the moment there aren’t too many errors), but getting it right visually is of a more immediate need at this time. However, if anyone has comments, ideas (or very long lectures on the awefulness of my coding)… they are welcome, please let me know.
-Alex
Offline
Re: Font not being applied in header
Aside from actual text changes, everything looks the same for me.
Offline
#3 2005-11-03 20:04:57
- kitkioto
- Member
- Registered: 2005-10-06
- Posts: 16
Re: Font not being applied in header
yes, I realized that too
I was staring at it for so long I couldn’t see the trees with the forrest in the way (intentionally reversed)
what had changed was the fact that the site name was now actually a link, not just text… and for some reason was set to bold… I just changed link states to fit the color and text style themes, and applied a font-weight: normal; aspect to them.
the font itself was the font I wanted, it just didn’t look the same in bold…
thanks though,
-Alex
Offline
Pages: 1