How to get Webyep menu to inherit Sidebar CSS???

General discussions about WebYep
Post Reply
coolmemin
Posts: 5
Joined: Wed Feb 20, 2008 12:44 am
Contact:

How to get Webyep menu to inherit Sidebar CSS???

Post by coolmemin » Tue Jul 06, 2010 7:55 am

I posted this question on the rapidweaver forums but i thought i might get more help here

Hi everyone, I need some styling help and I hope somebody here can help me. I know a little bit of CSS but I don’t quite have the whole picture yet so I am a bit stumped on this one. I am currently setting up a webyep page and I have it working pretty much the way i want except the sidebar i created with webyep doesn’t match the styling of the sidebar I have on the rest of the site and i would like it to. I downloaded their custom CSS files and changed a couple of things to make it look a little better but i want it to match exactly with my current sidebar.
The page with the sidebar i want to change is here:
http://testing.mathdigits.com/democoursepage/

To see an example of the sidebar I want you can go here:
http://www.mathdigits.com/videos/
and login with username and password testuser

Any ideas on how to solve this problem?

coolmemin
Posts: 5
Joined: Wed Feb 20, 2008 12:44 am
Contact:

Re: How to get Webyep menu to inherit Sidebar CSS???

Post by coolmemin » Mon Jul 12, 2010 4:17 am

really? I thought this would be an easy problem to solve.....maybe i am mistaken. Isn't there a way to sort of "trick" the webyep menu to act like a sidebar in that it inherits its CSS properties?

johannes
Objective Development
Objective Development
Posts: 815
Joined: Fri Nov 10, 2006 4:39 pm
Contact:

Re: How to get Webyep menu to inherit Sidebar CSS???

Post by johannes » Thu Jul 15, 2010 12:54 pm

It depends on what you sidebars are filled with. The appearance is not only defined by the fact that it's the sidebar, but also by the HTML tags you make the content of. If you put different HTML into two sidebars, they will look differently.

The sidebar in http://www.mathdigits.com/videos/ uses nested lists, embedded in a <nav> tag, invisible elements, empty <span> tags (that create the dashed lines"), etc.

The WebYep Menu simply creates a normal list (<ul> and <li> tags). It assigns various CSS classes to the tags it uses so you can define the appearance, but these CSS classes in themselves do nothing. You must create the proper CSS code that gives them meaning.

If you don't, the sidebar with the WebYep menu uses the same CSS as the other pages. You then would need to make sure to create the same HTML code as in the other pages to make them look the same.

In your case that would mean to manually create the HTML/PHP code of the sidebar (and not use the one the WebYep Plugin offers). Put the PHP code for the WebYep Menu Element in (see WebYep's documentation for that) and all the other HTML code that is used in your other sidebars (the <nav> tag for example).

But there are limits: E.g. your other sidebar uses this empty <span> tag to create the dashed lines - you cannot make the WebYep Menu create those too. You would instead use the CSS classes created by the Menu Element and create CSS code that uses paddings and borders for e.g. the <li> tags which the Menu Element creates.

Post Reply