Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #10424

    Hey,

    I am trying to add a specific style that I can use on particular content within my posts. I am experimenting in the style.css file. Here is what I am attempting to add to accomplish this:

    .thequote{

    font-family: Arial, Helevtica, Verdana, san-serif;

    font-weight: bold;

    letter-spacing: 0px;

    font-size: 20px;

    font-style: italic;

    }

    I would like to add <style=”thequote”>CONTENT HERE</style> to the content and have it reference this style. Thus far I have had no success. I am adding the script to the right css file? I am missing anything in the script itself? I am a bit stymied. Thanks in advance for your help!

    #68017

    OK, I have varied my approach with no luck. I have added this code to the custom.css file:

    #quote-container

    {

    margin: auto;

    width: 650px;

    background: #B01327;

    padding: 5px

    }

    .thequote {

    font-family: “Times New Roman”, Times, serif;

    font-size: 20pt;

    color: #FFFFFF;

    font-weight: bold;

    }

    .theauthor {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 10pt;

    color: #000000;

    font-style: italic;

    And added this to the post:

    <div id=”quote-container”>

    <p class=”thequote”>A woman’s head is always influenced by heart; but a man’s heart by his head.</p>

    <p class=”theauthor”> – Lady Marguerite Gardiner Blessington</p>

    </div>

    And the result is no change to the content:

    http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

    Help!

    #68018

    I just tried this experiment to see if this worked:

    <html>
    <head>
    <style>

    p#exampleID1 { background-color: blue; }
    p#exampleID2 { text-transform: uppercase; }

    </style>
    </head>
    <body>
    <p id="exampleID1">This paragraph has an ID name of "exampleID1" and has a blue CSS defined background.</p>
    <p id="exampleID2">This paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters.</p>
    </body>
    </html>

    Result here:

    http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

    The blue background does not work, but the transform case does. Can a theme dampen certain customizations?

    #68019

    checking your source code it seems your style tag is a little messed up:


    <style>
    <p>p#exampleID1 { background-color: blue; }
    p#exampleID2 { text-transform: uppercase; } </p>
    </style>

    should read:



    <style type='text/css'>
    p#exampleID1 { background-color: blue; }
    p#exampleID2 { text-transform: uppercase; }
    </style>

    If you want to add css modifications I would recommend to add them to the custom.css file in css. You dont need to worry about style tags, paragraphs etc within the css file

    #68020

    Kriesi, Thanks for the reply back! Yes, you are correct. If I added that it corrected the problem. Unfortunately, that was just an experiment that I was trying because the code I added in custom.css was not working. The real issue is what I started the post with:

    #quote-container
    {
    margin: auto;
    width: 650px;
    background: #B01327;
    padding: 5px
    }

    .thequote {
    font-family: "Times New Roman", Times, serif;
    font-size: 20pt;
    color: #FFFFFF;
    font-weight: bold;
    }
    .theauthor {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000000;
    font-style: italic;

    And added this to the post:

    <div id="quote-container">
    <p class="thequote">A woman's head is always influenced by heart; but a man's heart by his head.</p>
    <p class="theauthor"> - Lady Marguerite Gardiner Blessington</p>
    </div>

    And the result is no change to the content:

    http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

    Any thoughts on what I am doing wrong in the custom.css file? I will continue to experiment. Thanks!

    #68021

    Hi encoompassmore,

    I’m sorry none of us has responded until now. But it looks like you are on the right track!

    I would suggest adding your css to the custom.css file located in your themes css folder. That way, even if you update the theme the css changes stay.

    The only change I would suggest is making quote-container a class. Then your HTML you would add into the HTML editor would be:

    <div class="quote-container">
    <p class="thequote">A woman's head is always influenced by heart; but a man's heart by his head.</p>
    <p class="theauthor"> - Lady Marguerite Gardiner Blessington</p>
    </div>

    Hope that helps :)

    Regards,

    Devin

    #68022

    Thanks for the reply. I have been playing with the code and have now got this to work by putting code directly in the post:

    <style type="text/css">
    #quote-container {background: #937CB9; margin: 0px 0px 0px 0px; padding: 15px 15px 15px 15px; border: 2px solid #7C689B}
    p#thequote {font-family: Helvetica, Arial, serif; font-size: 20pt; color: #333333; font-weight: bold;}
    p#theauthor {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; font-style: italic;}
    </style>

    <div id="quote-container">
    <p id="thequote">A woman's head is always influenced by heart; but a man's heart by his head.</p>
    <p id="theauthor">- Lady Marguerite Gardiner Blessington</p>
    </div>

    Result:

    http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

    But when I try and put any version of the code in custom.css, it does not work. This is what I have tried:

    #quote-container {background: #937CB9; margin: 0px 0px 0px 0px; padding: 15px 15px 15px 15px; border: 2px solid #7C689B}
    #thequote {font-family: Helvetica, Arial, serif; font-size: 20pt; color: #333333; font-weight: bold;}
    #theauthor {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; font-style: italic;}

    Could you tell me what I should be putting in custom.css, because everything I try does not work for me… I really appreciate your help! :-)

    #68023

    it seems for whatever resaon your custom css file was removed from the header.php file. please make sure that it is included in your head like this:


    <link rel="stylesheet" href="<?php echo get_bloginfo('template_url'); ?>/css/custom.css" type="text/css" media="screen"/>

    #68024

    That helped some. I am able to have the content styling executed like I want. The quote container does not work, however. Here is what I put in custom.css:

    #quote-container {background: #937CB9; margin: 0px; padding: 15px; border: 3px solid #7C689B; border-radius: 10px;}
    #thequote {font-family: Helvetica, Arial, serif; font-size: 20pt; color: #333333; font-weight: normal;}
    #theauthor {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #000000; font-style: italic;}

    and here is what i put in the post:

    <div id="quote-container">
    <p id="thequote">A woman's head is always influenced by heart; but a man's heart by his head.</p>
    <p id="theauthor">- Lady Marguerite Gardiner Blessington</p>
    </div>

    Here is the result:

    http://greatestlovequotes.com/love-quotes-by-lady-marguerite-gardiner-blessington-32/

    There should be a light purple box around the quote with rounded corners…

    It is so weird, because when I put the css code directly in the post, it all works. It is only when I put it in the custom.css file that it does not work. Should I be amending the code in any way? Thanks for your help!

    #68025

    Hi Hi encoompassmore,

    Try disabling Total Cache and see if that allows the css to load properly.

    #68026

    Yes, now it works just fine! Thank you! But I have to say, what the heck? Why did Total Cache do that? I reactivated it once the css worked properly, and the css still works fine. Did I need to empty the cache in order for my browser to see the changes?

    Any additional insight would be helpful so I know how to handle this type of problem in the future. I appreciate your help!

    #68027

    Yay! I’m glad that worked. It was such a weird error and will most likely not happen again. Cache can be a little finicky, so just keep that on your mind if you run into an issue later on that you can’t really seem to nail down the root cause of.

    #68028

    Thanks for you help and insight!

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Adding a new style’ is closed to new replies.