Advertisement:

Author Topic: menu to the top for curve default  (Read 19984 times)

Offline rspsloading

  • Semi-Newbie
  • *
  • Posts: 38
menu to the top for curve default
« 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?
« Last Edit: February 04, 2013, 11:46:03 AM by Yoshi2889 »

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,667
  • Master of BBC Abuse
Re: menu to the top for curve default
« Reply #1 on: July 27, 2011, 07:30:48 PM »
You mean like this?

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,905
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: menu to the top for curve default
« Reply #2 on: July 28, 2011, 01:05:28 AM »

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,667
  • Master of BBC Abuse
Re: menu to the top for curve default
« Reply #3 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

Offline rspsloading

  • Semi-Newbie
  • *
  • Posts: 38
Re: menu to the top for curve default
« Reply #4 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
« Last Edit: July 28, 2011, 09:15:05 AM by rspsloading »

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,667
  • Master of BBC Abuse
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #5 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.

Offline rspsloading

  • Semi-Newbie
  • *
  • Posts: 38
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #6 on: July 28, 2011, 06:49:43 PM »
alright! thank you im waiting for you :) i needed this code bad, and ok.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,667
  • Master of BBC Abuse
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #7 on: July 28, 2011, 06:51:39 PM »
No, you do not need this code bad. You want it. There is a difference.

Offline rspsloading

  • Semi-Newbie
  • *
  • Posts: 38
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #8 on: July 28, 2011, 06:52:44 PM »
lol ok

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,905
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: menu to the top for curve default
« Reply #9 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...

Offline [unplugged]

  • Sophist Member
  • *****
  • Posts: 1,312
  • Gender: Male
  • I know just enough to get me in trouble...
    • Empire of the Sun
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #10 on: July 29, 2011, 07:11:58 PM »
Makes for a much better layout IMO :D
« Next Edit: Tomorrow at 08:34:45 PM by SunKing »   <---- « someone stole my sig... :o »


Offline MiY4Gi

  • Full Member
  • ***
  • Posts: 523
  • Gender: Male
  • Mm...
    • MyAnimeClub.net
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #11 on: July 30, 2011, 02:36:08 PM »
Where's the banner go?  ???
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.

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,905
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #12 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
« Last Edit: July 30, 2011, 11:28:08 PM by ahrasis »

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,667
  • Master of BBC Abuse
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #13 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.

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,667
  • Master of BBC Abuse
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #14 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.
« Last Edit: July 31, 2011, 05:01:06 AM by Antechinus »

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,905
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #15 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.
« Last Edit: August 01, 2014, 12:47:08 AM by ahrasis »

Offline Antechinus

  • SMF Friend
  • SMF Master
  • *
  • Posts: 25,667
  • Master of BBC Abuse
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #16 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.

Offline Hj Ahmad Rasyid Hj Ismail

  • SMF Hero
  • ******
  • Posts: 4,905
  • Gender: Male
  • Busy mode is on.
    • ahmad.rasyid.ismail on Facebook
    • ahrasis on GitHub
    • ahrasis on LinkedIn
    • @ahrasis on Twitter
    • ElkArte Malaysia
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #17 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.

Offline Masterd

  • SMF Hero
  • ******
  • Posts: 3,927
  • Gender: Male
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #18 on: August 01, 2011, 01:25:27 PM »
This is really nice and inovating, Ant! ;)

Offline Draffi

  • Jr. Member
  • **
  • Posts: 268
Re: menu to the top for curve default NEED HELP! STILL NOT SOLVED
« Reply #19 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?