New div class for 'prose'

  • Resolved Antony W. Serio

    (@antony-w-serio)


    9 years, 9 months ago

    I am attempting to help my neighbor, who is a writer, set up his first blog. Unfortunately, this is my first blog as well. Right now, we are having issues with posts formatting correctly. My neighbor writes a lot of prose. Naturally, he would like to have the first line of each paragraph indented. I have updated the style.css with the following bit of code:
    .prose p {
    text-indent: 8em;
    }
    Then, I bracket each post with <div class=’prose’> and </div>.
    However, I must be doing something wrong, because it isn’t working. I am very new at css, so I could be defining the class in the wrong place. I am using a child theme.

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hi,

    Please put the text of the div into p tag.

    eg. <div class=’prose’> <p>and</p> </div>

    In your css you say you want the paragraph in a div with the class ‘prose’ to have a certain style. This means you should either make sure your text is in a paragraph (which is the neatest way to do it, as text should generally be in a paragraph) or remove the paragraph factor from your css.

    So you can fix this with css;

    .prose {
text-indent:8em;
}

    Or fix it with a bit of html;
    <div class="prose"><p> text </p></div>

    Thread Starter Antony W. Serio

    (@antony-w-serio)

    It looks like adding <p> </p> worked, after a fashion, but not the way I wanted it to. Until I added blank lines in the html code, only the first line was indented. With blank lines in the code, each paragraph is indented, but there is now a gap between paragraphs. Adding <br> betweem paragraphs either inserts a blank line, or if in the middle of a line of text, starts a new ‘paragraph’, that does not indent. Adding </p> at the end of each paragraph indents, but also adds a gap. Any ideas?

    The post that I am attempting to work with is at:
    https://garmanlord.com/wordpress/2015/06/08/the-psychology-of-religion-part-1-2/

    there is now a gap between paragraphs

    Manage this using margin and padding settings on your special paragraph style:

    .prose p {
 text-indent: 8em;
 margin 4px 0 0 0;
 padding: 0;
}

    Use a browser inspector like firebug to show how your css is being used.

    Thread Starter Antony W. Serio

    (@antony-w-serio)

    I still have a gap with:

    .prose p {
text-indent: 3em;
margin 4px 0 0 0;
 padding: 0;
}

    in my stlye.css .

    Thread Starter Antony W. Serio

    (@antony-w-serio)

    Thanks. I’ll have to wait until I get home to try firebug. Work machines are locked down.

    Thread Starter Antony W. Serio

    (@antony-w-serio)

    I have no idea what I am looking at in firebug. The CSS for the page is:

    img.wp-smiley, img.emoji {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
    border: medium none !important;
    box-shadow: none !important;
    display: inline !important;
    height: 1em !important;
    margin: 0 0.07em !important;
    padding: 0 !important;
    vertical-align: -0.1em !important;
    width: 1em !important;
}

    the HTML is:

    <html lang="en-US">
<head>
<body class="single single-post postid-43 single-format-standard logged-in admin-bar custom-background wordpost customize-support" data-pinterest-extension-installed="ff1.35">
</html>

    I have no idea where to begin…

    Thread Starter Antony W. Serio

    (@antony-w-serio)

    I think I was able to figure it out. I created another div class:
    div.no-bottom-margin p { margin-bottom: 0px; }
    and wrapped the main body of the text in:
    <div class="no-bottom-margin"> main body </div>.
    That seemed to do the trick. I think I am starting to understand div classes…

    Thanks to everybody for the help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘New div class for 'prose'’ is closed to new replies.