menu links
techie211 - February 15, 2009 - 23:43
hi ppl, I'm new to drupal and just got my test site up. Here is the link to my site...http://mendhamtwp.dnsalias.com:8082.
It's very plain right now. I was asked to created a site for a school district with only an elementary and middle school. I found these two sites...
http://www.rhs.morrow.k12.or.us/ and http://www.echo.k12.or.us/ and would like to know how to create the left sidebar with the roll-over links and right sidebar. The layout in these two sites are the design I'm looking for. Is there a certain theme I need to use? Any info is appreciated.
J
=-=
Looks like the developer of the first site you link to simply styled the li 's in the theme with css. Viewing the page source will help you.
here's a copy/paste from the
here's a copy/paste from the page source. can this be done with pretty much any theme? I see the reference to the li's but not sure how to use them in other themes.??? also, does this edit create the
roll-over buttons?
****************************************************************************
< li class="leaf">Home/a>li
< li class="leaf">Announcements/a>li
***************************************************************************
=-=
every theme has li 's you can't see the css because it is in an included file. I guide you to firefox with firebug where you will be able to inspect the css like , li and know where to target it.
ok, I'm using firebug and on
ok, I'm using firebug and on the left side I see the html code and on the right side I'm seeing the styles.css/common.css it's related to. I'm not sure which file to edit. What's the html file called? I think once I know that I'll be ok??? I did find the *.css files.
oh,also, the 'blue' menu bars from the first link's left sidebar, are they separate files(.jpg or .gif) that I need to create?
here's that link again http://www.rhs.morrow.k12.or.us/
thanks!
=-=
drupal doesn't use .html files. XHTML and CSS is what drupal uses. XHTML is stored in your themes tpl.php files and they coloring positioning and such are called from CSS files.
style.css if where you will want to alter css or add css to your liking.
There are many tutorials around the net with how to work with CSS. W3C schools is a good place to start.
The menu links do not look like images to me. Inspect that sites elements and if they are images you will see that in the css files. To me they look like simple background-color: #hex value being called in css within the proper container div. This color changes on hover. The text color also changes on hover. ie: color: #hex value
here is a link to my site
here is a link to my site firebug results. http://mendhamtwp.dnsalias.com:8082/mendhamfirebug.jpg
I'm confused as to which file is showing up in the left window in firebug? Is that the *.tpl.php file? because when I open the file up in notepad I try to do a 'find' of what I see in firebug but it does not show up in the file? I'm confused as to which xhtml/tpl.php file I need to edit to get those menus to show up. Or do I even need to edit the files or maybe do it thru the admin console/module? I know you said the 'themes tpl.php' and I did find that but it doesn't look like the 'file' firebug pulls up. sorry again for the confusion. I am very green to this.
=-=
link to image not working. but I don't need it.
The left window shows you the generated HTML, it doesn't specifically reside in your tpl.php files as its generated on the fly by modules and theme functions and the like and placed in the tpl.php by the php variables. ie: $content holds within it everything that is put into that variable and will render it when the variable is called. That said, that is not the area you should play with. Styling is done in the CSS files. style.css if where you will want to add/change your CSS under most all circumstances. Especially when you are new.
What the left window does do for you is allow you to click on a div and the right window will show you what CSS is being used there. That said, understanding the way CSS is structured and how elements can inherit other elements is important.
view it this way:
tpl.php controls the layout and the printing of variables.
style.css controls the coloring and styling of the layout
It may help to read and work with the theme developers guide in the documentation section as well as use google to learn about XHTML and CSS and how they work in conjunction with one another.
ok, I found this site
ok, I found this site http://www.cssplay.co.uk/menus/menutwo.html and would like to use those menus on the sidebar on my site http://mendham.webhop.org
Which files do I edit? I'm thinking the styles.css but there is also xhtml code on there. which file do I enter that code into? I'm going to test with firebug and see how that goes.
thanks!
=-=
first thing you have to do is inspect the way Drupal builds its menus then adapat and apply the changes accordingly.