Customise a post on Draft

  • Unknown's avatar
    thoughtsbypc · Member ·

    Hi guys,

    How do we target a page using a CSS selector for a post on “Draft”? I tried to look around and could not find this in the forum. Is this possible? What would the post-id be?

    Perry

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hafizr · Member ·

    Hi,

    Did you mean to edit the CSS of a draft Post when viewed using the Preview button?

  • Unknown's avatar
    thesacredpath · Member ·

    In the editor with the draft post open, you will see something like post=13166. That is the post ID for that particular post. You can then use that for individually styling the post ahead of time.

    You can use the web inspector in your browser when previewing the post to create the CSS rules you need for that post.

  • Unknown's avatar
    thoughtsbypc · Member ·

    Hi Hafizr,

    I was actually in the middle of writing and hit ‘text tab’ and thought ‘do I create some inline changes in the html’.

    But then I remembered that I can also go Appearance > Customise > CSS to make those changes too but that relies on the post (or page) ID.

    The ‘preview button’ is a good suggestion because as ‘The Sacred Path’ suggested, the Chrome dev tools allows View Page Source and Inspect Elements option. Thanks guys!

    A general question for new people going into CSS customisation: How do you guys control the code in Appearance > Customise > CSS? I can imagine that in the future after editing 100 posts or so in the CSS editor for different posts and pages, the code may get overwhelming. Of course we can structure it and add comments BUT is there any other way you guys control your CSS code?

  • Unknown's avatar
    thesacredpath · Member ·

    If you are going to be creating specific CSS for each post, I would suggest using inline CSS within the posts themselves instead of creating rules for each and every post. Here is an example of inline CSS if you are not familiar with using it.

    <p style="color: red; margin-right: 10px; margin-left: 20px; font-style: italic;>This is a paragraph with red italic text, a right margin of 10px and a left margin of 20px.</p>

  • Unknown's avatar
    thoughtsbypc · Member ·

    I suspected that designing per post is the cleanest way of doing it (even though styles are applied per element therefore tedious).

    Thanks again and that makes sense to me.

  • Unknown's avatar
    thesacredpath · Member ·

    You can put an overall div around your entire post content and put the style declarations in that if they are going to apply to all elements in the post or page. You can then apply any unique things within the paragraphs or text as needed.

    If you have stuff that is going to be common to all posts, you can create a CSS class and then declare the class in the parent div you put around the content in the editor

    .my-post {
color: red;
font-size: 120%;
etc
}

    Then in the post:

    <div class="my-post">All your content here</div>

  • Unknown's avatar
    thoughtsbypc · Member ·

    cool. So basically treat “text” tab on each post as html editor and “..Customise > CSS” as CSS editor.

    Thats a good solution and I will be able to knock-off a few common posts that way. Many MANY thanks!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Customise a post on Draft’ is closed to new replies.