WordPress.org

1. thinkingwriter
   Member
   Posted 7 years ago #

   I use Strayhorn 1.5. I would like to use css styles in my posts for certain text. In other words, when I add a post, I want to apply original css styles to portions of the tex. I have created the style definitions and added them to styles.css in the default theme and then refered to the styles in code included in the post. However, the posts do not pick up the styles. I know there is a way to do it, because it is done on at least one blog using 1.5, at URI:

   http://johnaugust.com

   I'm wondering if I should make a separate stylesheet for these original styles and, if so, where I should import the style sheet into a page.

   Any help?

2. Lorelle
   Member
   Posted 7 years ago #

   Did you add the information to style.css or styles.css. Most of the Themes call on the former, just to make sure.

   In your post, you have to assign the style selectors. Did you do that? For instance:

   <div class="fred">This is something that would look freddy if applied.</div>

   With fred making this look different from the rest of the text. Is that how you applied it, or similar?

   You can hard code the styles into the tag, but not all tags will work.

   <p style="color:red; background: green">This is red text with a green background.</p>

   It's much more difficult to code hovers on links and things like that, but basic stuff can be hard coded into your post.

   As for importing unique style sheets into a specific post, ignoring all the rest...if ANYONE comes up with a way to do that, I will be doing the joyous dance of glee. There are a few work arounds, like styling an individual post by putting styles in a single selector like:

   post-456 {color:red; background: green}

   But you can't get any fancy stuff that would apply to too much in there, though you might be able to get away with:

   #post-456 p {color:red; background:green}
#post-456 ul li {list-image: square; padding: 3px}....

   Am I onto something here, folks?

3. thinkingwriter
   Member
   Posted 7 years ago #

   Here's the markup that goes in the post (placed in backticks for this post only):

   <code>
<ul class="screenbox">
<li class="sceneheader">EXT. JOE'S BAR</li>
<li class="action">Bill stares at a watery scotch.</li>
<li class="character">BILL (V.O.)</li>
<li class="dialogue">All I could think of was code. What's the damn code?</li>
</ul>
</code>

   Here’s the CSS code (also in backticks for this post only):

   .screenbox {
list-style: none;
width: 420px;
background: #eee;
border: 1px solid #333;
padding: 5px 14px;

   }

   .screenbox li {
   font: 12px/14px Courier, fixed;
   }

   .sceneheader,
   .action,
   .character {
   padding-top: 1.5ex;
   }

   .action {
   padding-right: 5%;
   }

   .character {
   margin-left: 40%;
   }

   .dialogue {
   margin-left: 25%;
   padding-right: 25%;
   }

   .parenthetical {
   margin-left: 32%;
   padding-right: 30%;
   }

   /* special case: dialogue followed by
   a parenthetical; the extra line needs
   to be suppressed */

   .dialogue + .parenthetical {
   padding-bottom: 0;
   }

   .transition {
padding-top: 3ex;
margin-left: 65%;
padding-bottom: 1.5ex;
}

   The question is, where do the styles go? I tried adding the to style.css, the stylesheet in 1.5's default theme, and it did not work.

   Thanks.

4. thinkingwriter
   Member
   Posted 7 years ago #

   Oh, and to answer your question, you are correct, it was added to style.css, not styles.css. My error in my original question.

5. lawtai
   Member
   Posted 7 years ago #

   i could be wrong, but don't you need your stylesheet to look lik ethis?

   li .dialogue li .whatever?

6. thinkingwriter
   Member
   Posted 7 years ago #

   The styles were taken from the site I mentioned above - they work that way for him. So was the code. The only thing he didn't explain is where to put the styles - in their own stylesheet or added to an existing stylesheet, and on what page to import the stylesheet (e.g. @import "http://thinkingwriter.com/new-style.css" or something like that. I've tried it as its own stylesheet, adding the @import to the header.php page in the deafult theme, and I've tried just adding to style.css with no other new code. Neither of these works.

   Here's a link to a post where he explains what he did:
   http://johnaugust.com/archives/2004/new-css-template-for-screenplay-formatting

   If I could get him to explain more, I would - but he's a busy man.

7. Lorelle
   Member
   Posted 7 years ago #

   When you added it to the style.css file, and then viewed the page, (skip the import stuff right now - different issue) did you refresh the page?

   And did you actually physcially check the source code on your test page to see if the styles showed up in the HTML? That will help us narrow the situation down.

8. thinkingwriter
   Member
   Posted 7 years ago #

   Yes to both. I just posted it again for all to see.

   http://thinkingwriter.com

9. thinkingwriter
   Member
   Posted 7 years ago #

   I have to run away until morning. If anyone has any help, I'll be checking in again then. Thanks for the suggestions.

Topic Closed

This topic has been closed to new replies.