Hi Rebecca, any vertical separators you add to the other items will be treated a little differently because of their context. The items in the top nav that currently have vertical separators are HTML divs with a class of "topnavigation_counts_container", whereas the remaining items in the top nav are HTML list items that don't have that class. In the topnavigation CSS, we have some rules that only target vertical separators that are within those "topnavigation_counts_container" divs. These rules affect the margin and float direction of the vertical bars. So we just need to change the selector to target the vertical splitter, without regard to context. (This is safe to do because these exact vertical separators are not used anywhere else)
In topnavigation.css, change this: .topnavigation_counts_container .topnavigation_usersection_splitter into this: .topnavigation_usersection_splitter This should get you a lot closer, with mild vertical alignment issues on the remaining bars, which is due to the list items in the top nav having different margins from the divs in the top nav. Probably the easiest way to fix this is to just target the vertical bars in these elements only and adjust their vertical margins: .topnavigation_explore > li .topnavigation_usersection_splitter { // Adjust margins here. } Hope that helps. Best regards, Dean Angerer On Fri, Jul 20, 2012 at 10:11 PM, juan wang <rebeccajuanw...@gmail.com> wrote: > Hi everyone: > > As you can see, there are two small vertical lines placed before the latest > message and my collections as a splitter. > I want to add the same vertical line effect to each of Create+Collect and > Explore so that the whole topnavigation looks like much more consistency. > I found it is the <div class="topnavigation_usersection_splitter">|</div> > code that describe the vertical line effect. > However, I found the Create+collect and Explore are different from others. I > can't simply add the same code <div > class="topnavigation_usersection_splitter">|</div> before them to achieve > that. > I great appreciate it if someone could help me with this. > > > > Rebecca > > _______________________________________________ > oae-dev mailing list > oae-dev@collab.sakaiproject.org > http://collab.sakaiproject.org/mailman/listinfo/oae-dev >
_______________________________________________ oae-dev mailing list oae-dev@collab.sakaiproject.org http://collab.sakaiproject.org/mailman/listinfo/oae-dev