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?
You mean like this?
Basic css changes. No template hacking required.
Well ok, not quite so basic. I should say really clever css changes. ;D
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
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.
alright! thank you im waiting for you :) i needed this code bad, and ok.
No, you do not need this code bad. You want it. There is a difference.
lol ok
Quote from: Antechinus on July 28, 2011, 03:19:39 AM
Well ok, not quite so basic. I should say really clever css changes. ;D
Lol. I thought so too...
Makes for a much better layout IMO :D
Where's the banner go? ???
Basically, if css is the only modifications, then it will be the manipulation of absolute position. Something like adding to the menu css:
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
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.
Ok I dug it up. I was playing with quite a few elements so suit yourself.
/* 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:
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:
/* 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.
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.
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.
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.
This is really nice and inovating, Ant! ;)
Hot to add some Links in this place, like Twitter, Bookmark, Link1, Link2.....
Please, is there a solution for this?
Quote from: 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?
I couldn't understand your problem. Please open a new thread with better details.
Quote from: 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?
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.
does this apply on custom theme?
I am using ClearSky on smf v2.0.1
thanks
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.
Quote from: Krash. 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.
thank you sir
Nice css tweek thanks :D
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.
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
Quote from: 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.
/* 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:
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:
/* 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.
Quote from: 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.
;)
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?
Quote from: nemwar on January 29, 2013, 11:40:36 PM
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!
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.
Hai nemwar. Welcome to SMF. It is advisable for you to open your own thread with details of your forum, problems and/or needs.
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.
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 :)
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. ;)
That is a very nice theme. And yes, he should be able to figure that out.