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

Reply via email to