WordPress.org

Support

Support » Themes and Templates » Seperating the Body CSS

Seperating the Body CSS

  • I want to be specific to each time a font is used on my page. Example is the body of my posts i want to be a certain font and size, while the header can be a different font and size.

    Whenever i change the font in the BODY of my CSS it is changing it for the whole page. I can’t be specific? Like for the post which i would gather would be .storycontent or .p attribute.

    site is http://dirtydalerz.com SFW

    Any help would be greatly appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
  • /*
    Theme Name: SnobTheme by egoSconnesso[dot]net
    Description: Three column theme using elegant light and gray. A snob theme.
    Author: egoSconnesso[dot]net
    Author URI: http://www.egosconnesso.net/
    */

    /* Basics and Typography */
    body {
    background: #006600;
    /* background-image: url(‘images/background.gif’); */
    background-image: url(‘http://dirtydalerz.com/site/bg.jpg’);
    margin: 0;
    padding: 0;
    font: 75%/1.2 “Trebuchet MS”, Verdana, Arial, Sans-Serif;
    color: #FFF;
    text-align: center;
    }
    #header {
    position: relative;
    top:4px;
    width: 800px;
    height: 150px;
    margin: 0 auto;
    padding: 0
    }
    #header h1 {
    padding: 46px 0 0 0;
    margin: 0;
    font-size: 1.7em;
    text-align: center;
    }
    #header h1 a {
    color: #fff;
    }
    #header h1 a:hover {
    color: #efefef;
    text-decoration: none;
    }
    #head {
    text-align:center;
    }

    p {
    font-size: 1em;
    font : Georgia;
    margin: 0 0 1.2em;
    padding: 0;
    padding-left: 2pt;
    padding-right: 2pt;
    line-height: 1.5em;
    color: #FFF;
    }
    ol, ul {
    font-size: 1em;
    line-height: 1.5em;
    margin: 1.2em 0 1.2em 3em;
    padding: 0;
    }
    h1, h2, h3, h4, h5, h6 {
    margin: .9em 0;
    font-family: “Trebuchet MS”, Verdana, Arial, Sans-Serif;
    color: #FFFFFF;
    }
    h1, h2 {
    font-size: 1.3em;
    }
    h3 {
    font-size: 1.2em;
    }
    h4 {
    font-size: 1.0em;
    }
    a {
    text-decoration: none;
    background: none;
    }
    a:link {
    color: #606060;
    }
    a:visited {
    color: #606060;
    }
    a:hover, a:active {
    color: #cecece;
    }
    input, textarea, select {
    border: 1px solid #000;
    background: #c7c7c7;
    color: #000;
    font: 8pt/1.2 Tahoma, Arial, sans-serif;
    }
    .button {
    border: 1px solid #000;
    background: #c7c7c7;
    color: #000;
    font: bold 8pt/1.2 Tahoma, Arial, sans-serif;
    }
    blockquote {
    margin: 6px 4px;
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff url(‘images/bqbg.gif’) no-repeat right bottom;
    font-size: 0.9em
    }
    code {
    font-family: monospace;
    color: #666;
    }
    form, img {
    margin: 0px;
    padding-top: 0pt;
    padding-right: 2pt;
    padding-bottom: 0pt;
    padding-left: 2pt;
    border: 0px none;
    }
    #small {
    font-size: 0.9em;
    color: #999;
    }
    #container {
    width:975px;
    margin: 0 auto;
    padding: 0;
    background: #000000;
    border-left: 1px solid #999;
    border-right: 1px solid #999;
    border-top: 0px none;
    border-bottom: 7px solid #999;
    text-align: left
    }

    #topcontentdouble {
    float: left;
    width: 300px;
    height: 27px;
    /*background: #fff;*/
    margin: 0 9px;
    display: inline;
    }
    #topcontent {
    width: 950px;
    background: #fff;
    margin: 9px auto 0 auto;
    height: 27px;
    }
    #bottomcontentdouble {
    display: inline;
    float: left;
    width: 500px;
    /*background: #fff;*/
    margin: 9px 9px 0 9px;
    height: 27px;
    }
    #content {
    float: left;
    width: 525px;
    margin: 0 9px;
    display: inline;
    }

    #singlecontent {
    width: 730px;
    padding:0;
    margin: 0 auto;
    }
    .post {
    margin: 0 6px 30px 5px;
    padding: 5px;
    background: #000000;
    border: 1px dashed #006600;
    }

    .post a {
    color: #c;
    text-decoration: none;
    }
    .post a:hover {
    color: #FFFFFF;
    }
    .post a:visited {
    color: #cecece;
    }
    .post h2 {
    color: #606060;
    font-size: 1.8em;
    margin: 40px 0 0 10px;
    }
    .post h3 {
    float: right;
    color: #FFFFFF;
    font-size: 1em;
    margin: 0; padding: 0;
    }
    .meta {
    font-size: .9em;
    line-height: 18px;
    }
    .feedback {
    text-align: right;
    font-size: 1.0em;
    }
    .author {
    width: 200px;
    float: right;
    text-align: right;
    }
    .pauth {
    text-align: left;
    font-size: 1.0em;
    color: #006600;
    }

    /* Page Navigation */
    .postnavigation {
    height: 45px;
    }
    .left {
    float: left;
    padding-left: 105px;
    }
    .right {
    float: right;
    padding-right: 105px;
    }
    .leftdouble {
    float: left;
    padding-left: 10px;
    }
    .rightdouble {
    float: right;
    padding-right: 10px;
    }

    /* Sidebars */
    #sidebar2 {
    position: relative;
    float: right;
    width: 200px;
    margin: 10px 0 0 10px;
    display: inline;
    }
    #sidebar {
    position: relative;
    float: left;
    width: 200px;
    margin: 10px 0 0 10px;
    display: inline;
    }
    #sidebar h2 {
    margin:0; padding: 3px 0;
    color: #FFFFFF;
    }
    #sidebar ul, #sidebar2 ul {
    padding:0; margin:0;
    }
    #sidebar ul li, #sidebar2 ul li {
    list-style-type: none;
    list-style-image: url(‘none’);
    }
    #sidebar ul, #sidebar ul li {
    margin: 0;
    padding: 0;
    }
    #sidebar ul li ul, #sidebar2 ul li ul {
    margin: 0 5px 0 0;
    padding: 2px 3px 5px 3px;
    }
    #sidebar ul li ul li, #sidebar2 ul li ul li {
    margin: 0;
    display: block;
    background: url(‘images/bullet.gif’) no-repeat 0 .6em;
    padding-left:10px; padding-right:0; padding-top:0; padding-bottom:0
    }
    #sidebar ul li ul li a {
    display: block;
    height:1%; /* IE WIN */
    }
    #sidebar ul li ul li a:hover {
    text-decoration: none;
    }
    #sidebar ul li ul li ul {
    margin: 0;
    padding: 0;
    }
    #sidebar2 ul, #sidebar ul li {
    margin: 0;
    padding: 0;
    }
    .sidebg {
    background: #000000;
    padding: 5px
    }

    /* The following is the fix for 3-pixel-jog bug in IE */
    /* Hide from IE5-mac. Only IE-win sees this. \*/
    * html #content {
    /*margin-right: 7px;*/
    }

    * html #sidebar, * html #sidebar2 {
    height: 1%;
    }
    /* End hide from IE5/mac */

    /* Comments */

    #response {
    margin: 0px 110px;
    }
    #commentlist {
    padding: 0px 10px 0px 10px;
    margin-left: 10px;
    margin-right: 10px;
    color: #FFFFFF;
    list-style-type: none;
    text-align: justify;
    }
    #commentlist li p{
    padding: 0px;
    margin: 8px 0px 0px 0px;
    }
    .commentname {
    width: 220px;
    float: left;
    color: #FFFFFF;
    font-size: 0.9em;
    margin: 0;
    padding: 0 0 2px 0;
    }
    .commentinfo{
    width: 250px;
    float: right;
    text-align: right;
    }
    .commenttext {
    clear: both;
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: 70px;
    border-top: 1px solid #FFFFFF;
    text-align:left;
    line-height:16px;
    font-color: #FFFFFF;
    }

    /* Comment Form */
    h2#postcomment {
    margin: 40px 0px 0px 0px;
    padding: 0 0 20px 10px;
    }
    #commentform {
    padding: 1px 20px;
    margin: 0;
    }
    #commentboxes {
    width: 200px;
    float: left;
    color: #000;
    font-size: 0.9em;
    }

    #inputbox {
    clear: both;
    color: #777;
    font-size: 0.9em;
    }
    #button {
    padding-top: 0.5em;
    }
    #commentsbottom {
    margin: 0;
    padding: 0;
    height: 22px;
    }

    /* Credits */
    #footer {
    margin: 10px auto;
    width: 950px;
    font-size: 10px;
    }
    #footer p {
    margin-top: 0;
    }
    .clearer {
    clear: both;
    line-height: 0px;
    }

    /* Typography */

    .post {
    color: #000;
    text-align: left;
    }

    .title a {
    clear:both;
    text-align: left;
    height: 20px;
    color: #FFFFFF;
    display: block;
    text-decoration: none;
    font-size: 26px;
    padding: 8px 0 6px 0;
    font-weight: bold;
    }
    .title a:hover {
    color: #999999;
    }
    .storycontent {
    color: #FFFFFF;
    padding: 5px 0px 5px 0px;
    }
    .singlepages p {
    text-align: left;
    margin: 0px 105px 80px 105px;
    line-height: 20px;
    }
    .storycontent a {
    color: #006600;
    text-decoration: none;
    }
    .storycontent a:hover {
    color: #009900;
    text-decoration: line-through;
    }
    .storycontent a:visited {
    color: #006600;
    }

    /* Page Navigation */
    .left a {
    color: #FF00CC;
    font-size: 0.9em;
    }
    .right a{
    font-size: 0.9em;
    color: #606060;
    }
    .leftdouble a{
    color: #606060;
    font-size: 0.9em;
    }
    .rightdouble a{
    font-size: 0.9em;
    color: #606060;
    }

    /* Comments */
    .commentauthor {
    font-weight: bold;
    font-size: 1.2em;
    padding: 0 0 2px 0;
    margin: 0;
    color: #FFFFFF;
    }
    .commentauthor a {
    font-weight: bold;
    margin: 0;
    background: url(‘images/bullet.jpg’) no-repeat top right;; padding-left:0; padding-right:20px; padding-top:0; padding-bottom:0
    }
    .commentdate {
    font-size: 0.8em;
    text-align: right;
    line-height: 18px;
    padding: 0;
    margin: 0;
    }
    #nocomment, #commentsclosed {
    text-align: center;
    color: #FFFF00;
    font-size: 1.1em;
    }

    /* Comments Form */
    #comment {
    width: 320px;
    }
    #comment, #author, #url, #email, #press{
    background: #fff;
    font-size: 1.1em;
    color: #FFFFFF;
    padding: 1px 2px 1px 1px;
    }
    #comment, #author, #url, #email{
    border: 1px solid #FFFFFF;
    }
    #comment:hover, #author:hover, #url:hover, #email:hover{
    border: 1px solid #777;
    }
    #comment:focus, #author:focus, #url:focus, #email:focus{
    background: #fff;
    border: 1px solid #FFFFFF;
    color: #777;
    padding: 1px 2px 1px 1px;
    }
    #commentboxes p {
    margin: 0;
    padding-bottom: 0.9em;
    }

    h2#comments {
    margin-bottom:40px;
    }

    p.feeds {
    float: right;
    margin-top: -1.8em;
    font-size: 0.9em;
    }

    p.feeds a, p.feeds a:hover {
    text-decoration: none;
    }

    p.feeds a:hover {

    color: #000000;
    }
    #inputbox {
    clear: both;
    color: #777;
    font-size: 0.9em;
    }
    #inputbox a {
    color: #777;
    }
    #inputbox a:hover {
    color: #FFFFFF;
    }

    p.inputbox {
    margin: 0;
    padding-bottom: 10px;
    }

    p.pages {
    margin: 0;
    padding: 40px 40px;
    padding-top: 0;
    text-align: center;
    }

    p.pages a {
    color: #cecece;
    }

    /* Credits */
    p.credits {
    padding: 0px;
    text-align: center;
    margin: 10px 0px;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.9em;
    }
    p.credits a {
    color:#006600;
    }

    /* Search/Archives/Categories Results Pages */
    .searchresult, .searchresult h2 {
    padding: 0;
    margin: 0;
    color: #FF00FF;
    }
    .searchresult a {
    color: #FFF;
    }
    .searchinfo {
    font-size: .9em;
    line-height: 18px;
    padding: 0 0 2px 0;
    color: #FFF;
    margin: 0 ;
    }
    .searchdetails {
    font-size: .9em;
    line-height: 18px;
    padding: 0 0 2px 0;
    color: #FFF;
    margin: 0 ;
    border-bottom: 1px solid #666;
    }

    /*
    This piece of code is for clearing
    the floats without structural markup
    Don’t modify it
    */
    .clearfix:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clearfix {
    display: inline-table;
    }

    /* Hides from IE-mac \*/
    * html .clearfix {
    height: 1%;
    }
    .clearfix {
    display: block;
    }
    /* End hide from IE-mac */
    .alt {
    border-bottom: 1px solid #efefef;
    }
    .notice {
    color: #59a212;
    font-size: 1.2em;
    font-weight: bold;
    }
    .notice2 {
    color: #577305;
    font-weight: bold;
    }
    #wp-calendar a {
    background: #f4fbd9;
    }`

    that is the codeing .. just need to be able to fix the font styles .. but it keeps pulling from my BODY font style.

    you can either take the text style out of the body and give each tag its own style, or the section you want to have in a different font create a class and apply it so something like this maybe :

    In your css :

    #content_txt {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 0.7em;
    	color: #333333;
    }

    Then if you want your text to have that effect in the writing section in the admin for post or page go to the html tab and do this :

    <div id="content_txt">your text here</div>

    Is that what you wanted?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Seperating the Body CSS’ is closed to new replies.