Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts

    Different widget styling for sidebar

    Hi,

    Please see url: http://wp.woodensun.com/about-us/testimonials/

    I want the testimonials sidebar widget to have different styling than the regular (page) testimonials.

    REGULAR TESTIMONIALS:
    Code:
    .single-testimonial blockquote {
        border-top:1px solid #ccc;
        background-color: #F5F5F5;
        clear: both;
        margin: 0 0 20px;
        padding: 15px 20px 15px;
    	font-style:italic;
    	line-height:1.6em;
    }
    then for the sidebar I've tried every combination I know of this:

    Code:
    #sidebar.sidebar widget-area .single-testimonial blockquote  {
        border-top:none;
        background-color:transparent;
        clear: both;
        margin: 0 0 20px;
        padding: 0;
    	font-style:italic;
    	line-height:1.6em;
    }
    and nothing works. Can anyone straighten me out on this?

    Thanks!

    John

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    hello johndove523,
    Just the first thing I noticed, you'll need a comma in between those two class names to direct the CSS to both of them. Like this -
    Code:
    #sidebar.sidebar widget-area, .single-testimonial blockquote  {
        border-top:none;
        background-color:transparent;
        clear: both;
        margin: 0 0 20px;
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    to direct the CSS to both of them...
    I don't want it to connect to both of them, I want them distinctly different. But that is the line of code in question.

    Code:
    #sidebar.sidebar widget-area .single-testimonial blockquote

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    Code:
    #sidebar.sidebar widget-area .single-testimonial blockquote
    Code:
    .single-testimonial blockquote #sidebar.sidebar widget-area
    Code:
    .sidebar widget-area .single-testimonial blockquote
    - ??

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by johndove523 View Post
    I don't want it to connect to both of them, I want them distinctly different.
    Not sure why you would group them together then...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    Ex,

    I don't want to group them together; I want a completely separate style for the sidebar widget than for the testimonials on the page. The only thing that separates them is this:

    Code:
    #sidebar.sidebar widget-area
    (this widget didn't come with any stylesheet)

    so, what I'm trying to do is target the same code (.single-testimonial blockquote) in the sidebar more specifically by adding the line above so I can give it a different style (no background, no padding, etc.)

    Does that make sense?

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I see what you're doing johndove523,
    Sorry for being in a hurry and not looking at your link .

    You're just having a specificity problem.
    Try it like this once -
    Code:
    #sidebar .single-testimonial blockquote {
    background: #000;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    johndove523 (12-16-2013)

  • #8
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    Ex,

    YES! That's it! And thanks for including the link on specificity, only, I tried this:

    Code:
    #sidebar.sidebar widget-area .single-testimonial blockquote
    I just added another class that I didn't need, but even so I don't understand why that didn't work. (?) This is a problem I run into all the time and if I had a better understanding of it, it would sure save me a lot of time. Do you know of any other resources that address this subject? Thanks again for the link you sent... and for solving my problem!

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by johndove523 View Post
    I just added another class that I didn't need, but even so I don't understand why that didn't work. (?)

    A space directs the CSS to the next nested div, look what changing the spaces does for you -
    Code:
    #sidebar.sidebar.widget-area .single-testimonial blockquote  {
       background: #000;
    }
    Try one that has a lot of classes in it -
    Code:
    #inner #content-sidebar-wrap #content.hfeed .post-74.page.type-page.status-publish.hentry.entry h1.entry-title {color: #f00;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    johndove523 (12-16-2013)

  • #10
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    A space directs the CSS to the next nested div
    I see and I never knew that. This is a very good revelation!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •