Customizing SMF > Graphics and Templates

menu to the top for curve default

<< < (6/8) > >>

GraphicJunki:
Nice css  tweek thanks  :D

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

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


--- Code: ---/* 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;
}
--- End code ---

and this for the admin/profile/etc menus:


--- Code: ---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 */
--- End code ---

and this for the search box:


--- Code: ---/* 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. */
--- End code ---

That's for a fixed menu. It uses css3 with no consideration given to IE8.

--- End quote ---

Antechinus:

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

--- End quote ---

;)

nemwar:
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!



--- End quote ---

Navigation

[0] Message Index

[#] Next page

[*] Previous page