Styling the CSS of the links menu element

General discussions about WebYep
Post Reply
krishb
Posts: 1
Joined: Sun Jun 21, 2009 2:48 pm

Styling the CSS of the links menu element

Post by krishb » Sun Jun 21, 2009 2:51 pm

Hi,

I have a rapid weaver blocks page (blocksbox theme).

Im using WebYeb content management.

Ive used the WebYep code to make the navigation menu on the left which works well.

I need to change the look of this menu:

1) change to smaller font size,maybe different font
2) get rid of black bullets and change to small white arrow ‘>’

WebYep documentation has a help on this but I dont understand the steps or where id place the css code in a rapidweaver page?

These are the steps they give..

-----------------------------------------------------------------
from: http://www.obdev.at/products/webyep/exa ... rials.html

Menu Element styling examples

The WebYep Menu Element can by styled by defining certain CSS styles in your stylesheet. These example stylesheets show how to achieve typical designs like bullet lists or buttons.

To try them out:
1. Embed a Menu Element into a <div class="MyMenu">...</div>.
2. Set the $webyep_sMenuType in your config-inc.php to “listJS”.
3. Copy the CSS files and the images to the same folder as your test page
4. Link one of the CSS files to your page - e.g. with: <link href="xxxxxx" rel="stylesheet" type="text/css" /> (where xxxxxx is the name of the stylesheet you want to try out).

---------------------------------------------------------------------

they have a link to download examles:
http://www.obdev.at/downloads/webyep/We ... amples.zip

Could someone explain those steps to me like I was a 3 year old-for example my questions about the steps are:
Step 1: how and where do i embed this menu element?
Step 2: wheres my config-inc.php
step 3: i can do this
step 4: where do i enter that code, where are my css file?

The page I want to do this to is here:

http://www.futuredoctors.co.uk/page38/student_admin.php

and this is the code i put in from webyep for the navigation menu element:
<?php webyep_menu("Fieldname", false, "student_admin.php", "contentFrame", "", ""); ?>

Any help greatly apprecited.

Krish.

PS. Added thought:

There is a rich text element which is working really using Rich Text (TinyMCE).

Is there a way to make the ‘Links Element’work with TinyMCE like the ‘Rich Text element’ does so I can edit the text font, size etc that way? (and the bullets)

Krish

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

Re: Styling the CSS of the links menu element

Post by johannes » Thu Jul 02, 2009 3:17 pm

You edit the CSS code for a page in RapidWeaver by opening the page inspector and choosing the "Header" tab and then the "CSS" subtab.

To change the way an unordered list (that's what WebYep Menus are made of) looks you need some CSS knowledge - as this depends strongly on what you actually want to achieve and on the rest of your page's and site's CSS code, I cannot give a simple step by step instruction here - please refer to the many CSS references and howtos on the net.

But as a starting point, change this

Code: Select all

/* All trees */
.WebYepMenu ul {
   padding: 0px;
}

to that

Code: Select all

/* All trees */
.WebYepMenu ul {
   padding: 0px;
   list-style-image: url(mybullet.gif);
}


Change "mybullet.gif" to the filename (and path) to some buttet image of your choice in your site.

Please also see the tutorial video for creating custom WebYep pages in RapidWeaver at
http://www.obdev.at/products/webyep/exa ... rials.html

TinyMCE or other WYSIWYG editors can unfortunately not be used with the WebYep Menu Element.

constancy
Posts: 1
Joined: Wed Aug 19, 2009 7:53 am

Re: Styling the CSS of the links menu element

Post by constancy » Thu Aug 20, 2009 12:19 pm

How can I apply the affects of an already edited CSS to a different page? I am building a web site in Dreamweaver. I have edited the CSS of my home page to take on the look I want. How can I apply or duplicate this to each page so I dont have to keep editing them? Thanks!

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

Re: Styling the CSS of the links menu element

Post by johannes » Thu Aug 27, 2009 5:43 pm

Usually you should not place the CSS code directly in the pages. You should create a separate .css file and link this to the pages via

Code: Select all

<link href="mystilesheet.css" rel="stylesheet" type="text/css" />

That way every change you make to the CSS file's stiles will affect _every_ page.

SnookenX
Posts: 1
Joined: Wed Nov 11, 2009 5:42 pm

Re: Styling the CSS of the links menu element

Post by SnookenX » Wed Nov 11, 2009 6:06 pm

krishb wrote:Hi,

I have a rapid weaver blocks page (blocksbox theme).

Im using WebYeb content management.

Ive used the WebYep code to make the navigation menu on the left which works well.

I need to change the look of this menu:

1) change to smaller font size,maybe different font
2) get rid of black bullets and change to small white arrow ‘>’

WebYep documentation has a help on this but I dont understand the steps or where id place the css code in a rapidweaver page?

These are the steps they give..

-----------------------------------------------------------------
from: http://www.obdev.at/products/webyep/exa ... rials.html

Menu Element styling examples

The WebYep Menu Element can by styled by defining certain CSS styles in your stylesheet. These example stylesheets show how to achieve typical designs like bullet lists or buttons.

To try them out:
1. Embed a Menu Element into a <div class="MyMenu">...</div>.
2. Set the $webyep_sMenuType in your config-inc.php to “listJS”.
3. Copy the CSS files and the images to the same folder as your test page
4. Link one of the CSS files to your page - e.g. with: <link href="xxxxxx" rel="stylesheet" type="text/css" /> (where xxxxxx is the name of the stylesheet you want to try out).

---------------------------------------------------------------------

they have a link to download examles:
http://www.obdev.at/downloads/webyep/We ... amples.zip

Could someone explain those steps to me like I was a 3 year old-for example my questions about the steps are:
Step 1: how and where do i embed this menu element?
Step 2: wheres my config-inc.php
step 3: i can do this
step 4: where do i enter that code, where are my css file?

The page I want to do this to is here:

http://www.futuredoctors.co.uk/page38/student_admin.php

and this is the code i put in from webyep for the navigation menu element:
<?php webyep_menu("Fieldname", false, "student_admin.php", "contentFrame", "", ""); ?>

Any help greatly apprecited.

Krish.

PS. Added thought:

There is a rich text element which is working really using Rich Text (TinyMCE).

Is there a way to make the ‘Links Element’work with TinyMCE like the ‘Rich Text element’ does so I can edit the text font, size etc that way? (and the bullets)

Krish


Hi Krish,

do you have the easy solution to remove the bullets in the webyep menus?

Thanks for your help!

Marcel

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

Re: Styling the CSS of the links menu element

Post by johannes » Mon Nov 16, 2009 10:47 am

You can set the list type by using

Code: Select all

ul {
   list-style-type: none;
}


If you do not want this to apply to all lists in your page, but just the WebYep Menu, embedd the Menu Element in a div with some CSS class (e.g. "TheWebYepMenu") and use instead:

Code: Select all

.TheWebYepMenu ul {
   list-style-type: none;
}


If you also want to get rid of the padding added by the typical HTML list, you might want to add:

Code: Select all

.TheWebYepMenu ul {
   list-style-type: none;
   padding: 0;
}

Post Reply