Forum Support

Shape 5
March 29, 2024, 07:28:14 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: help using the slide out menu  (Read 647 times)
webpartner
Jr. Member
**
Offline Offline

Posts: 18



« on: September 15, 2007, 01:17:55 PM »

I'm starting a site using the "User Choice" template and I want to use the slider menu... However, I don't want a tab hanging down over my masthead like a uvula. I really like the way you have a solid bar across the top of the demo page where it says "open/close navigation"... It looks like a variation of the same script and I'd like to do it exactly like that. How would I go about it...?
Thanks,
Bob
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #1 on: September 15, 2007, 04:04:33 PM »

Bob,

I'm not quite sure I understand what you're asking for. Are you trying to move the drop down menu to the very top of the page where the open/close tab is?

Let me know,
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
webpartner
Jr. Member
**
Offline Offline

Posts: 18



« Reply #2 on: September 15, 2007, 05:51:24 PM »

Mike,


Thanks for your response...

No, I'm not trying to move anything...

What I want is the open/close tab itself...
The straight light blue line with open/close on it.

I just looked at the page source and it doesn't appear to be a script...
It looks more like css with a table layout that you're using to hide and reveal the navagation bar... It looks good and works well on your demo page...

I'd rather use that than the slide out menu because I don't want the tab in the middle of the masthead which will be in the top mod (with user 1 & 2 collapsed) and stretch across the entire top of the page. But, that straight line with nothing except open/close on it would work fine...

Bob
Logged
mikek
Administrator
*****
Offline Offline

Posts: 28743



WWW
« Reply #3 on: September 15, 2007, 07:22:27 PM »

Bob,

You will have to edit the css to do this. If you are using the light theme edit light.css and dark.css if you are using the dark theme.

Find:

#s5_drop_down_tab {
     z-index: 2;
     position: absolute;
     height: 23px;
     width: 180px;
     cursor: pointer;
     text-align: center;
     margin: 0px auto;
     background: url(../images/light/s5_drop_down_tab.gif) no-repeat;
     background-position: bottom center; }

and replace with:

#s5_drop_down_tab {
     z-index: 2;
     position: absolute;
     height: 23px;
     width: 100%;
     cursor: pointer;
     text-align: center;
     margin: 0px auto;
     background: url(../images/light/s5_drop_down_tab.gif) no-repeat;
     background-position: bottom center; }

Depending on what you want the background to look like you will need to edit the following from above:

     background: url(../images/light/s5_drop_down_tab.gif) no-repeat;

for a picture:

     background: url(../images/light/picture.gif) repeat-x;

or for a color:

     background: #0000ff;   (change with whatever color you would like)

Then in template_css.css

find:

#s5_open {
     margin: 0px auto;
     cursor: pointer;
     font-weight: bold;
     display: block;
     text-align: center;
     font-size: 11px;
     width: 174px;
     padding-top: 3px;
     visibility: visible;
     font-family: Verdana, Arial, Helvetica, sans-serif;}

#s5_closed {
     margin: 0px auto;
     font-weight: bold;
     padding-top: 3px;
     cursor: pointer;
     text-align: center;
     display: none;
     width: 174px;
     font-size: 11px;
     visibility: hidden;
     font-family: Verdana, Arial, Helvetica, sans-serif;}

and replace with:

#s5_open {
     margin: 0px auto;
     cursor: pointer;
     font-weight: bold;
     display: block;
     text-align: center;
     font-size: 11px;
     padding-top: 3px;
     visibility: visible;
     font-family: Verdana, Arial, Helvetica, sans-serif;}

#s5_closed {
     margin: 0px auto;
     font-weight: bold;
     padding-top: 3px;
     cursor: pointer;
     text-align: center;
     display: none;
     font-size: 11px;
     visibility: hidden;
     font-family: Verdana, Arial, Helvetica, sans-serif;}


And then finally in the index.php file find:

document.getElementById("s5_drop_down_tab").style.left = ((document.documentElement.clientWidth/2) - 90) + 'px';

and delete it, it's towards the bottom.

Hope that helps!
Logged

Mike Knott
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
webpartner
Jr. Member
**
Offline Offline

Posts: 18



« Reply #4 on: September 16, 2007, 12:15:45 PM »

Michael... that was great!

You gave me just what I needed and pointed me in the right direction for the script modifications that I want to make. Your suggestions did exactly what I wanted to do...

It's been a while since I did much with css & php but when I started making the changes that you suggested and looking around to change the height & font & alignment, etc... It all started coming back to me...

I've got a few other questions & things I'd like to discuss with you but I'll save those for now...
Since today is the 16th I figure you guys are pretty busy getting the September template published so I'll leave you alone for awhile 'cause I'm looking forward to seeing what you guys came up with for this month.

Thank you for your help!
Bob
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.