Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: rspsloading on July 27, 2011, 07:20:01 PM

Title: menu to the top for curve default
Post by: rspsloading on July 27, 2011, 07:20:01 PM
so how can i get the curve default smf theme to be right at the top instead of where it normally is. also which code do i need to edit to change the background of the navigation menu to something else?
Title: Re: menu to the top for curve default
Post by: Antechinus on July 27, 2011, 07:30:48 PM
You mean like this?
Title: Re: menu to the top for curve default
Post by: Hj Ahmad Rasyid Hj Ismail on July 28, 2011, 01:05:28 AM
You mean like this?
Nice...
Title: Re: menu to the top for curve default
Post by: Antechinus on July 28, 2011, 03:19:39 AM
Basic css changes. No template hacking required.

Well ok, not quite so basic. I should say really clever css changes. ;D
Title: Re: menu to the top for curve default
Post by: rspsloading on July 28, 2011, 07:41:12 AM
yes like that, please can you tell me what codes and what i need to change? i need this really bad!
also what code in index.template do i need to change i need help bad please anyone
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Antechinus on July 28, 2011, 06:36:50 PM
I can't dig out the code right now but will find it tonight. It's on one of my local host test sites. There are no template changes required. It's all done with css.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: rspsloading on July 28, 2011, 06:49:43 PM
alright! thank you im waiting for you :) i needed this code bad, and ok.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Antechinus on July 28, 2011, 06:51:39 PM
No, you do not need this code bad. You want it. There is a difference.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: rspsloading on July 28, 2011, 06:52:44 PM
lol ok
Title: Re: menu to the top for curve default
Post by: Hj Ahmad Rasyid Hj Ismail on July 28, 2011, 10:38:40 PM
Well ok, not quite so basic. I should say really clever css changes. ;D
Lol. I thought so too...
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: [unplugged] on July 29, 2011, 07:11:58 PM
Makes for a much better layout IMO :D
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: MiY4Gi on July 30, 2011, 02:36:08 PM
Where's the banner go?  ???
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Hj Ahmad Rasyid Hj Ismail on July 30, 2011, 11:03:03 PM
Basically, if css is the only modifications, then it will be the manipulation of absolute position. Something like adding to the menu css:
Code: [Select]
position: absolute;
top: 0;
left: 0;
background: lightgrey;
I don't know whether this will work but you can test them with some further customization of course. But I don't know how Antechinus is doing it. May be a different approach.

I will write a tip or trick on this in the coding board. Check it there!  :P
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Antechinus on July 31, 2011, 01:02:29 AM
That's basically how I did it, but with fixed positioning and some extra styling tweaks. For fixed positioning you also need some z-index added.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Antechinus on July 31, 2011, 04:47:35 AM
Ok I dug it up. I was playing with quite a few elements so suit yourself.

Code: [Select]
/* Styles for the standard dropdown menus.
------------------------------------------------------- */
#main_menu
{
padding: 0;
margin: 0;
width: 100%;
float: left;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
background: #e3e9ef;
border: 1px solid #ccc;
box-shadow: 1px 2px 2px 1px #666;
}

.dropmenu, .dropmenu ul
{
list-style: none;
line-height: 2em;
padding: 0;
margin: 0;
}
.dropmenu
{
padding: 0 5%;
margin: 0;
}
.dropmenu a
{
display: block;
color: #222;
text-decoration: none;
padding: 0;
}
.dropmenu a span
{
display: block;
padding: 0 5px;
font-size: 0.9em;
line-height: 1.85em;
margin-top: 0.35em;
border-radius: 5px;
}
/* the background's first level only */
.dropmenu li a.firstlevel span.firstlevel
{
display: block;
position: relative;
white-space: pre;
}
.dropmenu li
{
float: left;
padding:0;
margin: 0 2px;
position: relative;
height: 2.3em;
line-height: 2.4em;
}
.dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
left: -6px;
width: 16em;
font-weight: normal;
background: #fff url(../images/theme/menu_gfx.png) -30px -137px repeat-x;
border: solid 1px #999;
border-radius: 5px;
box-shadow: 1px 2px 2px 1px #777;
padding: 4px 0;
}
.dropmenu li li
{
width: 16em;
margin: 0;
left: 0;
}
#admin_menu .dropmenu li ul
{
width: 19em;
}
#admin_menu .dropmenu li li
{
width: 19em;
}
.dropmenu li li a
{
border-radius: 3px;
width: 15.2em;
margin: 0 0.4em;
}
#admin_menu .dropmenu li li a
{
width: 18.2em;
margin: 0 0.4em;
}
.dropmenu li li a span
{
display: block;
line-height: 2.2em;
}
.dropmenu li li a span img
{
vertical-align: middle;
}
.dropmenu li ul ul
{
margin: -2.7em 0 0 15em;
padding: 6px 0 4px 0;
}
#admin_menu .dropmenu li ul ul
{
margin: -2.7em 0 0 18em;
}
/* the active button */
.dropmenu li a.active span.firstlevel
{
color: #fff;
font-weight: bold;
background: #5a6c85;
}
/* the hover effects */
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel
{
color: #000;
cursor: pointer;
text-decoration: none;
}
.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel
{
background: #fd9604;
}
.dropmenu li a.active:hover, .dropmenu li:hover a.active
{
color: #fff;
}
/* the hover effects on level 2 and 3 */
.dropmenu li li a.chosen
{
font-weight: bold;
color: #fff;
background: #5a6c85;
border-radius: 4px;
}
.dropmenu li li a.chosen:hover
{
color: #444;
}
.dropmenu li li a:hover, .dropmenu li li:hover>a
{
background: #D1DDEF;
color: #444;
text-decoration: none;
}
.dropmenu li:hover ul ul, .dropmenu li:hover ul ul ul
{
top: -999em;
}
.dropmenu li li:hover ul
{
top: auto;
}
.dropmenu li:hover ul
{
display: block;
top: 2.3em;
}
.dropmenu li li.additional_items
{
background: #fff;
}

/* The dropdown menu toggle image */
#menu_toggle
{
float: left;
position: fixed;
z-index: 16;
top: 3.4em;
left: 1.8%;
}
#menu_toggle span
{
position: relative;
right: 5000px;
}

and this for the admin/profile/etc menus:

Code: [Select]
div#admin_menu
{
padding: 2.7em 2.4em 0 5%;
margin: 0;
position: fixed;
z-index: 15;
float: left;
top: 0;
left: 0;
background: #e3e9ef;
border: 1px solid #ccc;
border-radius: 0 0 5px 0;
box-shadow: 1px 2px 2px 1px #666;
}
#admin_menu .dropmenu
{
clear: left;
position: relative;
padding: 0;
margin: 0;
}
#admin_menu .dropmenu li
{
position: relative;
float: left;
}
#admin_menu .dropmenu li li
{
position: relative;
left: 0;
}
#adm_submenus
{
padding: 0.5em 1em;
margin-bottom: -1.4em;
overflow: hidden;
}
#adm_submenus .dropmenu
{
padding: 0;
}
#admin_content p.description{margin-bottom: 0;}
/* End testing fixed admin menu */

and this for the search box:

Code: [Select]
/* the upper_section, float the two each way */
#upper_section
{
padding: 5px;
margin-bottom: -4.6em;
}
#upper_section ul li.greeting
{
font-size: 1.3em;
font-weight: bold;
line-height: 1.5em;
}
#upper_section div.news
{
width: 287px;
float: right;
}
/* Additional class. */
#upper_section div.news h2
{
clear: both;
}
/* Additional classes for the search form. */
#search_form
{
float: right;
padding: 0;
height: 1.4em;
line-height: 1.4em;
position: fixed;
z-index: 32;
top: 0.5em;
right: 5.5%;
}
#search_form input.input_text
{
width: 160px;
border: 1px solid #888;
border-radius: 3px;
background: #fff;
position: relative;
top: 0;
}
#search_form input.input_text:focus
{
box-shadow: 1px 1px 1px 1px #aaa;
}
#search_form input.button_submit
{
border: 1px solid #888;
border-radius: 3px;
position: relative;
padding: 1px 4px;
top: 0;
float:right;
}
/* End additional classes. */

That's for a fixed menu. It uses css3 with no consideration given to IE8.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Hj Ahmad Rasyid Hj Ismail on July 31, 2011, 05:56:02 AM
That is a very nice modifications indeed. However, except for the search box, I prefer admin menu to be where it is.

Note: By the way, I think you missed the modification to body css top margin.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Antechinus on July 31, 2011, 05:59:35 AM
You don't have to quote a mass of code just to comment on the post directly above. ;D

Yes, I did forget the body padding but I'm sure they can figure that one out.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Hj Ahmad Rasyid Hj Ismail on August 01, 2011, 06:55:57 AM
My foolishness. Why do I always have to press quote to reply...

I like the box shadow approach. It differentiate the menu from the rest of the body when scrolling up and down. A really nice approach indeed.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Masterd on August 01, 2011, 01:25:27 PM
This is really nice and inovating, Ant! ;)
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Draffi on September 29, 2011, 03:05:57 PM
Hot to add some Links in this place, like Twitter, Bookmark, Link1, Link2.....

Please, is there a solution for this?
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Hj Ahmad Rasyid Hj Ismail on September 30, 2011, 10:45:29 PM
Hot to add some Links in this place, like Twitter, Bookmark, Link1, Link2.....

Please, is there a solution for this?
I couldn't understand your problem. Please open a new thread with better details.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: MiY4Gi on October 01, 2011, 07:34:07 AM
Hot to add some Links in this place, like Twitter, Bookmark, Link1, Link2.....

Please, is there a solution for this?

I assume that since Antechinus only made css changes to move the menu to the top, if you want to add more links/buttons to the menu, then you'd do it in the usual way, which has been discussed many times before in the forum. Use the search facility to find these discussion threads - search terms like "menu buttons", "dropdown menu", "menu links", etc, should show you the threads you need. There are also modifications that add buttons to the menu, so you can search the modifications section as well.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: BaghdadGhost on November 16, 2011, 09:27:53 PM
does this apply on custom theme?

I am using ClearSky on smf v2.0.1


thanks
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Sir Osis of Liver on November 16, 2011, 09:48:59 PM

The button array for the menubar is in /Sources/Subs.php.  You can add/modify buttons there - look for "all the buttons".  Most (all?) themes use the same Subs.php.

Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: BaghdadGhost on November 29, 2011, 11:25:25 AM

The button array for the menubar is in /Sources/Subs.php.  You can add/modify buttons there - look for "all the buttons".  Most (all?) themes use the same Subs.php.

thank you sir
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: GraphicJunki on July 06, 2012, 06:55:59 PM
Nice css  tweek thanks  :D
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: AllanD on January 05, 2013, 08:44:15 AM
Sorry to bring up an old topic but I added this to my forum, I changed the menu graphics but for some reason it not showing the new images just the default ones.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: nemwar on January 29, 2013, 11:40:36 PM
Hi Guys,

sorry, but i have to grab this old topic,
cause i used the changes Antechinus made.

After all, i need one or two changes to fit it perfectly to my needs
and i'm sure you can help me to fix it.

The distance from the menu to the forum-title and smflogo is a litte too small,
how can i make it a little bigger?

Hope you can help me!

Greets NemWar



Ok I dug it up. I was playing with quite a few elements so suit yourself.

Code: [Select]
/* Styles for the standard dropdown menus.
------------------------------------------------------- */
#main_menu
{
padding: 0;
margin: 0;
width: 100%;
float: left;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 20;
background: #e3e9ef;
border: 1px solid #ccc;
box-shadow: 1px 2px 2px 1px #666;
}

.dropmenu, .dropmenu ul
{
list-style: none;
line-height: 2em;
padding: 0;
margin: 0;
}
.dropmenu
{
padding: 0 5%;
margin: 0;
}
.dropmenu a
{
display: block;
color: #222;
text-decoration: none;
padding: 0;
}
.dropmenu a span
{
display: block;
padding: 0 5px;
font-size: 0.9em;
line-height: 1.85em;
margin-top: 0.35em;
border-radius: 5px;
}
/* the background's first level only */
.dropmenu li a.firstlevel span.firstlevel
{
display: block;
position: relative;
white-space: pre;
}
.dropmenu li
{
float: left;
padding:0;
margin: 0 2px;
position: relative;
height: 2.3em;
line-height: 2.4em;
}
.dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
left: -6px;
width: 16em;
font-weight: normal;
background: #fff url(../images/theme/menu_gfx.png) -30px -137px repeat-x;
border: solid 1px #999;
border-radius: 5px;
box-shadow: 1px 2px 2px 1px #777;
padding: 4px 0;
}
.dropmenu li li
{
width: 16em;
margin: 0;
left: 0;
}
#admin_menu .dropmenu li ul
{
width: 19em;
}
#admin_menu .dropmenu li li
{
width: 19em;
}
.dropmenu li li a
{
border-radius: 3px;
width: 15.2em;
margin: 0 0.4em;
}
#admin_menu .dropmenu li li a
{
width: 18.2em;
margin: 0 0.4em;
}
.dropmenu li li a span
{
display: block;
line-height: 2.2em;
}
.dropmenu li li a span img
{
vertical-align: middle;
}
.dropmenu li ul ul
{
margin: -2.7em 0 0 15em;
padding: 6px 0 4px 0;
}
#admin_menu .dropmenu li ul ul
{
margin: -2.7em 0 0 18em;
}
/* the active button */
.dropmenu li a.active span.firstlevel
{
color: #fff;
font-weight: bold;
background: #5a6c85;
}
/* the hover effects */
.dropmenu li a.firstlevel:hover, .dropmenu li:hover a.firstlevel
{
color: #000;
cursor: pointer;
text-decoration: none;
}
.dropmenu li a.firstlevel:hover span.firstlevel, .dropmenu li:hover a.firstlevel span.firstlevel
{
background: #fd9604;
}
.dropmenu li a.active:hover, .dropmenu li:hover a.active
{
color: #fff;
}
/* the hover effects on level 2 and 3 */
.dropmenu li li a.chosen
{
font-weight: bold;
color: #fff;
background: #5a6c85;
border-radius: 4px;
}
.dropmenu li li a.chosen:hover
{
color: #444;
}
.dropmenu li li a:hover, .dropmenu li li:hover>a
{
background: #D1DDEF;
color: #444;
text-decoration: none;
}
.dropmenu li:hover ul ul, .dropmenu li:hover ul ul ul
{
top: -999em;
}
.dropmenu li li:hover ul
{
top: auto;
}
.dropmenu li:hover ul
{
display: block;
top: 2.3em;
}
.dropmenu li li.additional_items
{
background: #fff;
}

/* The dropdown menu toggle image */
#menu_toggle
{
float: left;
position: fixed;
z-index: 16;
top: 3.4em;
left: 1.8%;
}
#menu_toggle span
{
position: relative;
right: 5000px;
}

and this for the admin/profile/etc menus:

Code: [Select]
div#admin_menu
{
padding: 2.7em 2.4em 0 5%;
margin: 0;
position: fixed;
z-index: 15;
float: left;
top: 0;
left: 0;
background: #e3e9ef;
border: 1px solid #ccc;
border-radius: 0 0 5px 0;
box-shadow: 1px 2px 2px 1px #666;
}
#admin_menu .dropmenu
{
clear: left;
position: relative;
padding: 0;
margin: 0;
}
#admin_menu .dropmenu li
{
position: relative;
float: left;
}
#admin_menu .dropmenu li li
{
position: relative;
left: 0;
}
#adm_submenus
{
padding: 0.5em 1em;
margin-bottom: -1.4em;
overflow: hidden;
}
#adm_submenus .dropmenu
{
padding: 0;
}
#admin_content p.description{margin-bottom: 0;}
/* End testing fixed admin menu */

and this for the search box:

Code: [Select]
/* the upper_section, float the two each way */
#upper_section
{
padding: 5px;
margin-bottom: -4.6em;
}
#upper_section ul li.greeting
{
font-size: 1.3em;
font-weight: bold;
line-height: 1.5em;
}
#upper_section div.news
{
width: 287px;
float: right;
}
/* Additional class. */
#upper_section div.news h2
{
clear: both;
}
/* Additional classes for the search form. */
#search_form
{
float: right;
padding: 0;
height: 1.4em;
line-height: 1.4em;
position: fixed;
z-index: 32;
top: 0.5em;
right: 5.5%;
}
#search_form input.input_text
{
width: 160px;
border: 1px solid #888;
border-radius: 3px;
background: #fff;
position: relative;
top: 0;
}
#search_form input.input_text:focus
{
box-shadow: 1px 1px 1px 1px #aaa;
}
#search_form input.button_submit
{
border: 1px solid #888;
border-radius: 3px;
position: relative;
padding: 1px 4px;
top: 0;
float:right;
}
/* End additional classes. */

That's for a fixed menu. It uses css3 with no consideration given to IE8.
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: Antechinus on February 03, 2013, 04:45:52 PM
You don't have to quote a mass of code just to comment on the post directly above. ;D

Yes, I did forget the body padding but I'm sure they can figure that one out.

;)
Title: Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
Post by: nemwar on February 04, 2013, 11:37:03 AM
Antechinus, i'am very pleased to see, that you still read this threat because it is marked as "solved".

I understand, that repeat the changes in the code isn't useful,
but maybe as "author" of this snippet you also have an litte tip for me?


After all, i need one or two changes to fit it perfectly to my needs
and i'm sure you can help me to fix it.

The distance from the menu to the forum-title and smflogo is a litte too small,
how can i make it a little bigger?

Hope you can help me!


Title: Re: menu to the top for curve default
Post by: NanoSector on February 04, 2013, 11:47:59 AM
I removed the caps from the title.

If your matter is not solved, mark it as such, don't add caps to the title. Thank you.
Title: Re: menu to the top for curve default
Post by: Hj Ahmad Rasyid Hj Ismail on February 04, 2013, 07:58:08 PM
Hai nemwar. Welcome to SMF. It is advisable for you to open your own thread with details of your forum, problems and/or needs.
Title: Re: menu to the top for curve default
Post by: Antechinus on February 05, 2013, 02:16:51 AM
Nemwar just wants some more top padding on the body tag. Since he/she has already made a theme that's been approved, I figured adding a bit of top padding to the body would not be a huge issue.
Title: Re: menu to the top for curve default
Post by: Hj Ahmad Rasyid Hj Ismail on February 05, 2013, 11:07:20 PM
Sorry, is nemwar and rspsloading the same guy? Well, I honestly don't know that. I also do not know that he has a theme that's been approved. Nor that I know that the theme is related to this topic. If that is so, it is not a big issue at all. But re-reading again and again, I am just not sure. I think I'll just leave this to your good hand Antechinus, since you know more :)
Title: Re: menu to the top for curve default
Post by: Antechinus on February 06, 2013, 06:06:10 PM
http://www.simplemachines.org/community/index.php?topic=484024.msg3389866#msg3389866

What I meant is that anyone who can make a theme should be able to figure out a bit of body padding. ;)
Title: Re: menu to the top for curve default
Post by: Hj Ahmad Rasyid Hj Ismail on February 06, 2013, 07:38:27 PM
That is a very nice theme. And yes, he should be able to figure that out.