• Welcome to Simple Machines Community Forum. Please login or sign up.
December 03, 2021, 11:02:39 AM

News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord


menu to the top for curve default

Started by rspsloading, July 27, 2011, 07:20:01 PM

Previous topic - Next topic

rspsloading

July 27, 2011, 07:20:01 PM Last Edit: February 04, 2013, 11:46:03 AM by Yoshi2889
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?



Antechinus

Basic css changes. No template hacking required.

Well ok, not quite so basic. I should say really clever css changes. ;D

rspsloading

July 28, 2011, 07:41:12 AM #4 Last Edit: July 28, 2011, 09:15:05 AM by rspsloading
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

Antechinus

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.

rspsloading

alright! thank you im waiting for you :) i needed this code bad, and ok.

Antechinus

No, you do not need this code bad. You want it. There is a difference.


Hj Ahmad Rasyid Hj Ismail

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...

[unplugged]

« Next Edit: Tomorrow at 08:34:45 PM by SunKing »   <---- « someone stole my sig... :o »



MiY4Gi

Check out my new website, MyAnimeClub.net. I plan to create the largest anime community, and most fun and user-friendly anime forum in the world. It's still in the development stage though.

Hj Ahmad Rasyid Hj Ismail

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

Antechinus

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.

Antechinus

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.

Hj Ahmad Rasyid Hj Ismail

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.

Antechinus

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.

Hj Ahmad Rasyid Hj Ismail

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.

Masterd


Draffi

Hot to add some Links in this place, like Twitter, Bookmark, Link1, Link2.....

Please, is there a solution for this?

Advertisement: