How to Define Page-specific CSS

Community Forums Forums Design Tips and Tricks How to Define Page-specific CSS

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  BrightTribe 1 year, 7 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #19283

    BrightTribe
    Participant
    Post count: 28

    What’s the proper syntax if I want to define page-specific styles?

    For example, I want the blockquote to show up using a theme’s default layout on the entire site except one page.  So what’s the syntax if I want to define blockquote for only one page?  I thought it was something like this:

    DEFAULT:

    blockquote {
    margin: 10px;
    }

    SPECIFIC PAGE:

    #pagename blockquote {
    margin: 10px 30px;
    }

    Thanks for the help!


    Brian Dempsey, Bright Tribe, Inc.
    info@brighttribe.com | 678-267-3267

    #19328

    braddalton
    Participant
    Post count: 9944

    Use the post or page i.d from the source code or create a custom class using the Layout Settings

    page-id-4289


    #19628

    BrightTribe
    Participant
    Post count: 28

    I’m sorry, Brad, but I don’t know what you just said.  I know there is a way to code the style sheet to be page specific.  Can you give me an example of the proper syntax using the page name?


    Brian Dempsey, Bright Tribe, Inc.
    info@brighttribe.com | 678-267-3267

    #19645

    braddalton
    Participant
    Post count: 9944

    Here’s some examples of block quotes. http://css-tricks.com/examples/Blockquotes/

    You can add this code to your child themes style.css file and use a custom body class to display them on a specific page or post. Or you can change the post i.d by finding your own in the source code of the page you want to add the styling to.

    [css]
    .postid-37680 blockquote:before, blockquote p {
    margin: 1em 3em;
    color: #999;
    border-left: 2px solid #999;
    padding-left: 1em;
    background: #f3f3f3;
    }
    [/css]

    Further Reading http://www.studiopress.com/design/how-to-use-block-quotes.htm

    http://www.w3schools.com/tags/tag_blockquote.asp

    You need to a add a specific post i.d or create a custom body class to change the styling of block quotes on a specific page.


    #19780

    BrightTribe
    Participant
    Post count: 28

    How do I do it if I need to define a style on the homepage?


    Brian Dempsey, Bright Tribe, Inc.
    info@brighttribe.com | 678-267-3267

    #19781

    braddalton
    Participant
    Post count: 9944

    Some friendly advice Brian.

    Install Firebug and WordPress on your local computer so you can test and modify your code.

    You could also install a plugin which adds CSS effects and other styling so you don’t need to code.


    #19836

    BrightTribe
    Participant
    Post count: 28

    I use the Inspect Element feature of Chrome every day that does the same thing.  I’m quite proficient with CSS, but I didn’t know the syntax in WordPress to make a style page-specific or how to find the page ID for the homepage.  For years all we did was enterprise level JSP work, and I’m much more of a marketing / creative guy who is doing WordPress.  Thanks for the help.


    Brian Dempsey, Bright Tribe, Inc.
    info@brighttribe.com | 678-267-3267

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

You must be logged in to reply to this topic.