WordPress.org

Ready to get started?Download WordPress

Forums

Custom paragraph style? (7 posts)

  1. TheOrganicSister
    Member
    Posted 3 years ago #

    I'm using Primepress theme.

    I'm trying to create a custom paragraph style. I'd like it to have a light grey background and a small dotted line.

    I created this on W3schools which worked for their try it yourself feature...

    p.one
    {
    border-style:dotted;
    border-width:1px;
    background-color: #E0E0E0;
    }

    but when i attempt to use it in building a page i get nothing. this is what i'm using on the page:

    <p class"one"> paragraph </p>

  2. dragonsjaw
    Member
    Posted 3 years ago #

    Try using
    <p class="one"> jjjj</p>

  3. TheOrganicSister
    Member
    Posted 3 years ago #

    oops sorry that was a typo on my end. i did use that one and still no luck.

    also tried it without p. and still no luck. very frustrating.

  4. TheOrganicSister
    Member
    Posted 3 years ago #

    okay it seems the only way i can get this to work is to style the paragraph IN the page. as in placing this entire thing in my page editor:

    <p style="font-weight:normal;color:#000000;background-color:#E0E0E0;border: 1px dotted #707070;letter-spacing:0pt;word-spacing:1pt;font-size:12px;text-align:left;font-family:arial, helvetica, sans-serif;line-height:1;margin:50px;padding:10px;width:500px;">this is the paragraph.</p>

    i KNOW there is a better way but my stylesheet doesn't seem to want to accept it. >:(

  5. dragonsjaw
    Member
    Posted 3 years ago #

    It looks like your theme uses a body.custom call for changes.
    Maybe add your special paragraph like:

    body.custom p {
    border-style:dotted;
    border-width:1px;
    background-color: #E0E0E0;
    }

  6. TheOrganicSister
    Member
    Posted 3 years ago #

    yes i tried that too. still no luck. so i'm settling for styling the text. bummer.

  7. Michelle Langston
    Theme Wrangler at Automattic
    Posted 3 years ago #

    Where are you placing that .one class in your stylesheet? If you're placing it near the top of the stylesheet, it might be getting overwritten by later styles. Try placing the .one style near the very bottom of your stylesheet and see if that makes a difference. Also, if the paragraphs are inside divs which have their own paragraph styles, the .one class might be overridden as well.

    Otherwise, I highly suggest you use the Firefox browser and install the Firebug plugin. With firebug, you'll be able to examine a paragraph with the ".one" class and see all of the styles that are affecting it and preventing it from working the way you want it to. Chrome has this feature built in, as well.

    If you post the URL of your site, I can take a look also.

Topic Closed

This topic has been closed to new replies.

About this Topic