SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to Style the First Widget of the Sidebar?

    I've installed a wordpress-based directory and am trying to style the sidebar widgets. The default style of all widgets in the sidebar is enclosed in a border with a title text and background. However, I wish to remove all these styling when I'm inserting an image in the widget.

    To see what I mean, you can go to this website. On the right hand sidebar, the first image "Add Listing Here" is enclosed in a border. How do I remove the styling for this image?

    Any suggestion? Many thanks in advance.

  2. #2
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    To see which HTML elements are referenced via CSS, view the HTML document's source.

    The element in question has a class of .itembox. Find that in your CSS and remove the border declaration.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks kohoutek for the quick reply.

    But if I remove the styleing for .itembox, it will remove everything. This is not I want, I just want to remove the border, title and background for the first widget at the sidebar.

    Any idea?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If its always the first item then you can use :first-child (ie7+).

    Code:
    #sidebar > .itembox:first-child {
    	border:none;
    	text-align:center;
    }
    #sidebar > .itembox:first-child h2 { display:none }
    #sidebar > .itembox:first-child .itemboxinner {
    	background:none;
    	padding:0;
    }
    #sidebar > .itembox:first-child .textwidget { padding:0 }

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent! Paul! That's what I'm looking for.

    It is working perfectly now. Thank you so much for your help. :-)
    ----------------------------------------------------------------------------
    Affiliate Marketing Directory: Great Resources for Affiliate Marketers
    Add Your Affiliate Marketing Product & Services Free here.

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just realized one problem, using the :first-child will affect all the first widget of the sidebar but I only want to target one specific widget only.

    Is there any way just to select the first widget at the sidebar of the homepage?

    Appreciate your advice. Thank you.
    ----------------------------------------------------------------------------
    Affiliate Marketing Directory: Great Resources for Affiliate Marketers
    Add Your Affiliate Marketing Product & Services Free here.

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I don't know how your WordPress is set up, but here are three options:

    1) Create a new widget without assigning it the .itembox class
    2) Modify the CSS with Paul's code and place that CSS directly in your index.php and then use a PHP conditional (if is_home()) function to have this code only apply for the homepage
    3) Place the is_home() conditional function inside your functions.php

    See the WordPress is_home() function page on how to use and implement it.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could just add a class to that specific image and then target it directly assuming you are able to adjust the html.

    If not then the only chance is that you could use the id that is already on the body tag to target only the home page.

    Code:
    #PPTHomePage etc...
    i.e.
    Code:
    #PPTHomePage #sidebar > .itembox:first-child {
    	border:none;
    	text-align:center;
    }
    #PPTHomePage #sidebar > .itembox:first-child h2 { display:none }
    #PPTHomePage #sidebar > .itembox:first-child .itemboxinner {
    	background:none;
    	padding:0;
    }
    #PPTHomePage #sidebar > .itembox:first-child .textwidget { padding:0 }
    That assumes that the id is only present on the home page. Otherwise there is no way to target an element on one page only unless there is something in that page that is unique to that page and in the right context.

  9. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Right, forgot about that option! It's probably the simplest one.

    With Paul's code, you'd just need to place the conditional I mentioned above in your header.php inside your opening body tag.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  10. #10
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for the excellent suggestion!

    I'm grateful for your time but first, I need to apologize because I realized the first widget at the sidebar also appear deeper in the category pages and logout page. In other word, I couldn't just target only the first widget at the homepage, it was wrong approach. In such case, what do you suggest? Or what is the best way to do this?

    So sorry for the wrong information as I'm still trying to familiarize with this new directory theme.

    Many thanks in advance again.
    ----------------------------------------------------------------------------
    Affiliate Marketing Directory: Great Resources for Affiliate Marketers
    Add Your Affiliate Marketing Product & Services Free here.

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I suggest identifying it via the class. I'm sure that widget has the same class or ID throughout all the pages you mentioned. Just style it via the class or ID and don't worry about being fancy with the first-child pseudo class .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  12. #12
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ryan.

    Could you kindly elaborate a little bit on how to assign a class to the widget? I know where is the child theme stylesheet and I can easily add the css code there but where and how do I assign the class to the widget? In a php file, which particular one should I add to?

    Hopefully, it is not too much to ask. Pls forgive newbie.

    Thank you very much.
    ----------------------------------------------------------------------------
    Affiliate Marketing Directory: Great Resources for Affiliate Marketers
    Add Your Affiliate Marketing Product & Services Free here.


Bookmarks

Posting Permissions

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