CODEWITHSUNDEEP
csswordpresswidget
Adrian
Adrian

Reputation: 2012

adding styles to different part of an unordered list, wordpress widget

I think the best way to describe my problem is to show you.

http://yourinternship.hailstormcommerce.com/?page_id=21

On the sidebar on the left there is a widget that uses ul, a the moment I have a bottom-border applied to the first li and then the border turned off for any child li after that.

My issue is , the border for "Your Internship" at the very top of the widget doesnt appear until its submenu is finished, ie above "Accomodation". But I want it straight underneath "Your Internship" , like the rest of the menu pages. So basically its bordering the entire li. I understand why this is happening, and the only way I was able to get around it was by putting a border underneath ul li a but the problem is this ends up being very messy, for controlling the width of the border etc. (using padding etc).

Has anyone any suggestions on how I could apply a border to the first link?

Also, on the same note , is it possible to remove the last border under "Contact Us"?

Im asking the second question here as well as I guess my overall problem has to do with styling particular parts of a widget from wordpress.

Thanks in advance for any help. Any questions let me know, because I may have made that sound confusing. Cheers

Upvotes: 0

Views: 189

Answers (2)

Uirri
Uirri

Reputation: 273

It might be a bit messier than you want to, but here is a suggestion.

To get the line directly underneath "Your Internship" (but still keeping it above "Your Accomdation") you can do the following:

#menu-your-internship-sidebar .current_page_parent > a {
    display: block
    border-bottom: solid 1px #DDD;
 }

For removing the last border under "Contact Us" you just set the li:last-child bottom border to 0, like this:

#menu-your-internship-sidebar li:last-child {
    border: none
}

EDIT: If you want to remove the border above "Your Accomdation":

#menu-your-internship-sidebar > li.current-page-parent {
    border: none;
}

Upvotes: 1

bookcasey
bookcasey

Reputation: 40433

It's possible. I made a simplified example that you can learn from:

<ul class="widget">
  <li class="active">Your Internship
    <ul>
      <li>Benefit of our program</li>
      <li>Students</li>
      <li>University</li>
      <li>Why Choose Us</li>
      <li>Your Internship Process</li>
      <li>Your Language Course</li>
    </ul>
  </li>
  <li>Your Accomodation</li>
  <li>Your Employers</li>
  <li>Information for Interns</li>
  <li>Apply Now</li>
  <li>Contact Us</li>
</ul>

To get rid of the border on the active and last item use this pseudo selectors:

.widget > li:last-child, .active {
  border: none;
}

To re-add a border on the "active" class, I used a pseudo element:

.active:before {
  content: "";
  width: 100%;
  position: absolute;
  top: 25px;
  border-bottom: 2px solid salmon;
}

Demo

Upvotes: 1

Related Questions