phpBB Academy at StarTrekGuide

phpBB3 MODs and Styles Development - Olympus MOD Database - phpBB programming Academy

Skip to content

[HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

How-to's, little tricks, tutorials, code examples (snippets) and read-me's.
Post a reply

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Drift Angel » 19 Apr 2008, 17:38

i really can't get it to work ... i'm integrating it to a vista style and i can't get it to work :(
Drift Angel     Nada
Cadet II
Cadet II
 
Posts: 29
Joined: 11 Jan 2008, 16:37
Gender: Female
Top
Advertise on StarTrekGuide/phpBB Academy



phpBB Academy at StarTrekGuide
Support STG
Using PayPal Donate

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Ika » 21 Apr 2008, 12:39

I believe there are some members here who have done this and can post their modifications or you can download the static version and it is alread installed for you :)
Image
05.08.09 The Black Ice Project
Please use the forums for support requests. Review the Board Rules here.
Ika     Chris
STG Styles Team
STG Styles Team
 
Posts: 1618
Joined: 08 Jul 2007, 09:57
Location: Charlotte, NC USA
Favorite Team: Pittsburgh Steelers
Gender: Male
phpBB Knowledge: 8
Top

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Drift Angel » 21 Apr 2008, 15:16

i'll try it again it only shows hyper links but not a drop down
Drift Angel     Nada
Cadet II
Cadet II
 
Posts: 29
Joined: 11 Jan 2008, 16:37
Gender: Female
Top

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Drift Angel » 21 Apr 2008, 16:04

i'm flollowing everything in the tutorial :| i even tried that recompile part but mine was already on.
Drift Angel     Nada
Cadet II
Cadet II
 
Posts: 29
Joined: 11 Jan 2008, 16:37
Gender: Female
Top

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Ika » 21 Apr 2008, 19:57

Drift Angel wrote:i'm flollowing everything in the tutorial :| i even tried that recompile part but mine was already on.


Did you refresh your theme in the ACP by chance?
Image
05.08.09 The Black Ice Project
Please use the forums for support requests. Review the Board Rules here.
Ika     Chris
STG Styles Team
STG Styles Team
 
Posts: 1618
Joined: 08 Jul 2007, 09:57
Location: Charlotte, NC USA
Favorite Team: Pittsburgh Steelers
Gender: Male
phpBB Knowledge: 8
Top

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Drift Angel » 22 Apr 2008, 12:19

yes i have i'm trying to integrate it into the vista phpbb3 style thats my website http://www.dandjfanfiction.net/forum
Drift Angel     Nada
Cadet II
Cadet II
 
Posts: 29
Joined: 11 Jan 2008, 16:37
Gender: Female
Top

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby njohnson1987 » 27 Apr 2008, 02:24

I love this mod and I almost have the mod licked. My one issue is that I am getting a portion of the background above the drop down bar. First picture shows the bar with the portion of the background just above it. Second picture shows the original menubar without the portion of the background showing. :banghead:

I am pretty sure this is a formatting issue but I cannot firgure out where the problem is. I am still a noob at this but, I am catching on quickly.

I am using a modified bo2soft style. Inserted code is from my overall_header.html file. More code can be provided if needed.

Thanks for the assistance!

dropdownerror.jpg

original.jpg

Spoiler:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2002-2006 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />
<!--[if lt IE 7]>
<script defer type="text/javascript" src="{T_THEME_PATH}/pngfix.js"></script>
<![endif]-->
<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
   if ({S_NEW_PM})
   {
      popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
   }
<!-- ENDIF -->

function popup(url, width, height, name)
{
   if (!name)
   {
      name = '_popup';
   }

   window.open(url.replace(/&amp;/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
   return false;
}

function jumpto()
{
   var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
   var perpage = '{PER_PAGE}';
   var base_url = '{A_BASE_URL}';

   if (page !== null && !isNaN(page) && page > 0)
   {
      document.location.href = base_url.replace(/&amp;/g, '&') + '&start=' + ((page - 1) * perpage);
   }
}

/**
* Find a member
*/
function find_username(url)
{
   popup(url, 760, 570, '_usersearch');
   return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
   var parent = document.getElementById(id);
   if (!parent)
   {
      eval('parent = document.' + id);
   }

   if (!parent)
   {
      return;
   }

   var rb = parent.getElementsByTagName('input');
   
   for (var r = 0; r < rb.length; r++)
   {
      if (rb[r].name.substr(0, name.length) == name)
      {
         rb[r].checked = state;
      }
   }
}

<!-- IF ._file -->

   /**
   * Play quicktime file by determining it's width/height
   * from the displayed rectangle area
   *
   * Only defined if there is a file block present.
   */
   function play_qt_file(obj)
   {
      var rectangle = obj.GetRectangle();

      if (rectangle)
      {
         rectangle = rectangle.split(',')
         var x1 = parseInt(rectangle[0]);
         var x2 = parseInt(rectangle[2]);
         var y1 = parseInt(rectangle[1]);
         var y2 = parseInt(rectangle[3]);

         var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
         var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
      }
      else
      {
         var width = 200;
         var height = 0;
      }

      obj.width = width;
      obj.height = height + 16;

      obj.SetControllerVisible(true);

      obj.Play();
   }
<!-- ENDIF -->

// ]]>
</script>


<script type="text/javascript" src="{T_TEMPLATE_PATH}/grey_out.js"></script>
<script type="text/javascript">

/**
* Logout confirmation added 04/20/2008
*/

// <![CDATA[
function logout_confirmation()
{
   grayOut(true);
   if (confirm('{L_LOGOUT_CONFIRMATION}'))
   {
      grayOut(false);
      return true;
   }
   else
   {
       grayOut(false);
      return false;
   }
}
// ]]>
</script>

<script src="{T_THEME_PATH}/js/prototype.js" type="text/javascript"></script>
<script src="{T_THEME_PATH}/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="{T_THEME_PATH}/js/lightbox.js" type="text/javascript"></script>

</head>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<div id="wrapheader">
   <div class="header">
   <span class="header-left"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></span>
   <span class="header-right"></span>
    <div align="right" align = "bottom" class="banner"><img src="http://www.soma56.com/images/logos/muskiesinc_logo.gif"></div>
   </div>
   <div id="main-right">
   <div id="main-left">
    <div align="center">
           </div>
<br />

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
    <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN -->
    <li class="top"><a href="{U_INDEX}" class="top_link"><span style="color: red;">{L_BOARD_DISABLED}</span></a></li>
    <!-- ENDIF -->
    <!-- IF not S_IS_BOT -->
    <li class="top"><a href="{U_LOGIN_LOGOUT}" class="top_link"><span>{L_LOGIN_LOGOUT}</span></a></li>
    <!-- ENDIF -->
    <!-- IF U_RESTORE_PERMISSIONS -->
    <li class="top"><a href="{U_RESTORE_PERMISSIONS}" class="top_link"><span>{L_RESTORE_PERMISSIONS}</span></a></li>
    <!-- ENDIF -->
    <!-- IF not S_IS_BOT -->
       <!-- IF S_USER_LOGGED_IN -->
           <!-- IF S_DISPLAY_PM -->
            <li class="top"><a href="{U_PRIVATEMSGS}" class="top_link"><span>{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></span></a></li>
            <!-- ENDIF -->
            <!-- ELSE -->
            <li class="top"><a href="{U_REGISTER}" class="top_link"><span>{L_REGISTER}</span></a></li>
            <!-- ENDIF -->
    <!-- ENDIF -->
    <!-- IF S_USER_LOGGED_IN -->
    <li class="top"><a href="#" id="controlpanel" class="top_link"><span class="down">Control Panel</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
         <!-- IF S_USER_LOGGED_IN -->
            <li><b>Users</b></li>
         <li><a href="{U_PROFILE}" class="fly">{L_PROFILE}<!--[if gte IE 7]><!--></a><!--<![endif]-->
               <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
                  <li><a href="./ucp.php?i=163">Overview</a></li>
                  <li><a href="./ucp.php?i=164">Profile</a></li>
                        <li><a href="./ucp.php?i=165">Board Preferences</a></li>
                  <li><a href="./ucp.php?i=166">Private Messages</a></li>
                        <li><a href="./ucp.php?i=167">User Groups</a></li>
                        <li><a href="./ucp.php?i=168">Friends &amp; Foes</a></li>
               </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
         </li>
            <!-- ENDIF -->
         <!-- IF U_MCP -->
            <li><b>Moderators</b></li>
            <li><a href="{U_MCP}">{L_MCP}</a></li>
            <!-- ENDIF -->
            <!-- IF U_ACP -->
            <li><b>Administrators</b></li>
            <li><a href="{U_ACP}">{L_ACP}</a></li>
            <!-- ENDIF -->
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
    <!-- ENDIF -->
   <li class="top"><a href="{U_INDEX}" id="forumlinks" class="top_link"><span class="down">Forum</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
           <li><b>Information</b></li>
         <li><a href="{U_FAQ}">{L_FAQ}</a></li>
         <!-- IF S_DISPLAY_MEMBERLIST --><li><a href="{U_MEMBERLIST}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
            <li><b>Manage</b></li>
         <!-- IF not S_IS_BOT and U_MARK_FORUMS --><li><a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
            <!-- IF not S_IS_BOT and U_MARK_TOPICS --><li><a href="{U_MARK_TOPICS}">{L_MARK_TOPICS_READ}</a></li><!-- ENDIF -->
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
    <!-- IF S_DISPLAY_SEARCH -->
   <li class="top"><a href="{U_SEARCH}" id="forumsearch" class="top_link"><span class="down">{L_SEARCH}</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
            <li><b>Common Searches</b></li>
         <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
         <li><a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
            <!-- IF S_USER_LOGGED_IN -->
         <li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
         <li><a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></li>
            <!-- ENDIF -->
            <li><b>Common Searches</b></li>
         <li><a href="{U_SEARCH}">Advanced Search</a></li>
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
    <!-- ENDIF -->
   <li class="top"><a href="#" id="phpbbresources" class="top_link"><span class="down">phpBB Resources</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
           <li><b>phpBB Links</b></li>
         <li><a href="http://www.phpbb.com">phpBB.com</a></li>
            <li><a href="http://www.phpbb.com/downloads">Downloads</a></li>
            <li><a href="http://www.phpbb.com/shop">Shop</a></li>
            <li><a href="http://www.phpbb.com/community">Forums</a></li>
            <li><b>phpBB Development</b></li>
         <li><a href="http://area51.phpbb.com">Area 51</a></li>
            <li><a href="http://www.phpbb.com/development">Trackers</a></li>
      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
</ul>

      <div id="maink-right">
      <div id="maink-left">
       <div align="center" style="background:#FBFBFB">
        <div id="datebar">
       <table width="100%" cellspacing="0" cellpadding="0">
        <tr>
         <td align="left" class="gensmall"><span style="color:green"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF --></span></td>
         <td class="gensmall" align="{S_CONTENT_FLOW_END}"><span style="color:green">{CURRENT_TIME}</span></td>
       </tr>
      </table>
   </div>
</div>
         <!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> <center><span style="color: red;"><b>{L_BOARD_DISABLED}</b></span></center><!-- ENDIF -->
<div id="wrapcentre">
   <!-- IF S_DISPLAY_SEARCH -->
   <p class="searchbar">
      <span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>
      <!-- IF S_USER_LOGGED_IN -->
      <span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
      <!-- ENDIF -->
   </p>
   <!-- ENDIF -->

   <br style="clear: both;" />

   <!-- INCLUDE breadcrumbs.html -->

   <br />
Last edited by Ladysarajane on 27 Apr 2008, 17:42, edited 1 time in total.
Reason: Spoiler tags added
User avatar
njohnson1987     Nick
Cadet I
Cadet I
 
Posts: 16
Joined: 26 Apr 2008, 01:54
Gender: Male
phpBB Knowledge: 2
Top

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Jaymie1989 » 27 Apr 2008, 10:04

Ika wrote:
Jaymie1989 wrote:Thanks for this. :good:

Any chance of one for prosilver?


you mean like this? http://www.shadowflames.us/

I will release it when I release this new style... I have some tweaks to make.


Any chance you have done one yet?
Jaymie1989     Jay
Supporter
Supporter
 
Posts: 1370
Joined: 30 Sep 2007, 15:51
Location: Some where in phpbb_users table
Favorite Team: Liverpool FC
Gender: Male
phpBB Knowledge: 5
Top

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby Ika » 27 Apr 2008, 18:40

njohnson1987 wrote:...


Do you have a top margin assigned to the menu in the CSS?

Jaymie, No I am sorry, I have been extremely busy personally in the past few weeks.
Image
05.08.09 The Black Ice Project
Please use the forums for support requests. Review the Board Rules here.
Ika     Chris
STG Styles Team
STG Styles Team
 
Posts: 1618
Joined: 08 Jul 2007, 09:57
Location: Charlotte, NC USA
Favorite Team: Pittsburgh Steelers
Gender: Male
phpBB Knowledge: 8
Top

Re: [HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

Postby njohnson1987 » 27 Apr 2008, 19:25

Not sure what the answer is.....I am posting both .css files. I do see where the "menubar" is but, that was removed in the mod.

stylesheet.css
Spoiler:
Code: Select all
@import url("pro_dropdown_6.css");

/*  phpBB 3.0 Style Sheet
    --------------------------------------------------------------
   Style name:      bo2Soft
   Based on style:   subSilver (the default phpBB 2 style)
   Original author:   subBlue ( http://www.subBlue.com/ )
   Modified by:      bozUNtu ( http://www.bozuntu.org )
    --------------------------------------------------------------
*/

/* Layout */
* {
   /* Reset browsers default margin, padding and font sizes */
   margin: 0;
   padding: 0;
}

html {
   font-size: 100%;
}

body {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   color: #323D4F;
   background-color: #D8CFB4;
   font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
   margin: 0 auto;
}

#wrapheader {
   min-height: 120px;
   height: auto !important;
   height: 120px;
   padding: 0;
   width:100%;
   margin: 0 auto;
}

#wrapcentre {
   background: #F9F8F7;
   text-align: left;
}

#wrapnav {
   width: 100%;
   margin: 0;
   background-color: #ECECEC;
   border-width: 1px;
   border-style: solid;
   border-color: #A9B8C2;
}

/* Header */

div.header {
   background: url('./images/logorta.gif') repeat-x 0 0;
   height: 122px;
   clear: both;
}

div.header span.header-left, span.header-right {
   display: block;
   width: 250px;
   height: 122px;
   background: url('images/bo2logos.jpg') no-repeat;
   }

span.header-left {
   background-position: 0 0;
   float: left;
   margin-right: 10px;
   }

span.header-right {
   width:20px;
   background-position: 100% 0%;
   float: right;
   }

div.banner {
   padding:28px 0 0 0;
   color:#FFF;
}

#main-right {
   padding: 0 12px 0 0;
   background: url(images/yanlar.gif) repeat-y right;
}

#main-left {
   padding: 0 0 0 12px;
   background: url(images/yanlar.gif) repeat-y left;
}

#maink-right {
   padding: 0 5px 0 0;
   background: url(images/yanlark.gif) repeat-y right;
}

#maink-left {
   padding: 0 0 0 5px;
   background: url(images/yanlark.gif) repeat-y left;
}

.clear {
   clear: both;
}

/* Frames */
td.yansol {
   background: #EEE url('./images/yansol.gif') repeat-y;
   width: 12px; }
   
td.yansag {
   background: #EEE url('./images/yansag.gif') repeat-y;
   width: 12px; }
   
td.yansolk {
   background: #EEE url('./images/mysoll.gif') repeat-y;
   width: 5px; }
   
td.yansagk {
   background: #EEE url('./images/mysagg.gif') repeat-y;
   width: 5px; }
   
td.menusol {
   background: #EEE url('./images/musoll.gif') no-repeat;
   width: 8px;
   height: 31px;
}
td.menuorta {
   background: #EEE url('./images/muort.gif') repeat-x;
}
td.menusag {
   background: #EEE url('./images/musagg.gif') no-repeat;
   width: 8px;
}
/* Menu-Left */
#soll {
   line-height: normal;
   margin: 0 0 -6px 3px;
   font-weight: bold;
}

#soll ul {
   margin:0;
   padding: 0;
   list-style: none;
}

#soll li {
   display: inline;
   margin: 0;
   padding: 0;
   font-weight: bold;
}

#soll a {
   float:left;
   background:url('./images/mnard.gif') no-repeat 0% -32px;
   margin: 0 0px 0 0;
   padding: 0 0 0 0px;
   text-decoration: none;
   position: relative;
}

#soll a span {
   float: left;
   display: block;
   background: url('./images/mnardd.gif') no-repeat 100% -32px;
   padding: 7px 6px 6px 6px;
   color: #336699;
   white-space: nowrap;
}

#soll a span { float:none; }

#soll a:hover span {
   color: #DD6900;
}

#soll a:hover {
   background-position: 0 -5px;
}

#soll a:hover span {
   background-position:100% -5px;
}

#soll #activetab a:hover span {
   color: #333333;
}
/* Menu-Right */
#sagg {
   line-height: normal;
   margin: 0 0 -6px 3px;
   font-weight: bold;
}

#sagg ul {
   margin:0;
   padding: 0;
   list-style: none;
}

#sagg li {
   display: inline;
   margin: 0;
   padding: 0;
   font-weight: bold;
}

#sagg a {
   float:right;
   background:url('./images/mnard.gif') no-repeat 0% -32px;
   margin: 0;
   padding: 0;
   text-decoration: none;
   position: relative;
}

#sagg a span {
   float: right;
   display: block;
   background: url('./images/mnardd.gif') no-repeat 100% -32px;
   padding: 7px 6px 6px 6px;
   color: #336699;
   white-space: nowrap;
}

#sagg a span { float:none; }

#sagg a:hover span {
   color: #DD6900;
}

#sagg a:hover {
   background-position: 0 -5px;
}

#sagg a:hover span {
   background-position:100% -5px;
}

#sagg #activetab a:hover span {
   color: #333333;
}

/* Logo */
#logodesc {
   margin-bottom: 0;
   padding: 0;
   background: #D9DFE4;
   border-bottom: 1px solid #4787A7;
   width: 85%;
}

#menubar {
   margin: 0;
}

#datebar {
   margin: 0;
}

#findbar {
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}

.forumrules {
   background-color: #FED278;
   border-width: 1px;
   border-style: solid;
   border-color: #BB9860;
   padding: 4px;
   font-weight: normal;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}

.forumrules h3 {
   color: red;
}

#pageheader { }
#pagecontent { }
#pagefooter { }

#poll { }
#postrow { }
#postdata { }


/*  Text
--------------------- */
h1 {
   color: black;
   font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
   font-weight: bold;
   font-size: 1.8em;
   text-decoration: none;
}

h2 {
   font-family: Trebuchet MS;
   font-weight: bold;
   font-size: 18px;
   text-decoration: none;
   line-height: 120%;
}

h3 {
   font-size: 1.3em;
   font-weight: bold;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 120%;
}

h4 {
   margin: 0;
   font-size: 1.1em;
   font-weight: bold;
}

p.moderators {
   margin: 0;
   float: left;
   color: black;
   font-weight: bold;
}

.rtl p.moderators {
   float: right;
}

p.linkmcp {
   margin: 0;
   float: right;
   white-space: nowrap;
}

.rtl p.linkmcp {
   float: left;
}

p.breadcrumbs {
   margin: 0;
   float: left;
   color: black;
   font-weight: bold;
   white-space: normal;
   font-size: 1em;
}

.rtl p.breadcrumbs {
   float: right;
}

p.datetime {
   margin: 0;
   float: right;
   white-space: nowrap;
   font-size: 1em;
}

.rtl p.datetime {
   float: left;
}

p.searchbar {
   padding: 2px 0;
   white-space: nowrap;
}

p.searchbarreg {
   margin: 0;
   float: right;
   white-space: nowrap;
}

.rtl p.searchbarreg {
   float: left;
}

p.forumdesc {
   padding-bottom: 4px;
}

p.topicauthor {
   margin: 1px 0;
}

p.topicdetails {
   margin: 1px 0;
}

.postreported, .postreported a:visited, .postreported a:hover, .postreported a:link, .postreported a:active {
   margin: 1px 0;
   color: red;
   font-weight:bold;
}

.postapprove, .postapprove a:visited, .postapprove a:hover, .postapprove a:link, .postapprove a:active {
   color: green;
   font-weight:bold;
}

.postapprove img, .postreported img {
   vertical-align: bottom;
}

.postauthor {
   color: #000000;
}

.postdetails {
   color: #000000;
}

.postbody {
   font-size: 1.3em;
   line-height: 1.4em;
   font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
}

.postbody li, ol, ul {
   margin: 0 0 0 1.5em;
}

.rtl .postbody li, .rtl ol, .rtl ul {
   margin: 0 1.5em 0 0;
}

.posthilit {
   background-color: yellow;
}

.nav {
   margin: 0;
   color: black;
   font-weight: bold;
}

.pagination {
   padding: 4px;
   color: black;
   font-size: 1em;
   font-weight: bold;
}

.cattitle {

}

.gen {
   margin: 1px 1px;
   font-size: 1.2em;
}

.genmed {
   margin: 1px 1px;
   font-size: 1.1em;
}

.gensmall {
   margin: 1px 1px;
   font-size: 1em;
}

/* Footer */
#wrapfooter {
   text-align: center;
   color: #c0c0c0;
   padding-top: 15px;
}

.copyright {
   color: #c0c0c0;
   font-weight: normal;
   font-size: 9px;
   line-height: 1.2em;
}
.copyright a:link, .copyright a:active, .copyright a:visited {
   color: #FFF;
   text-decoration: none;
}
.copyright a:hover {
   color: #FED278;
   text-decoration: underline;
}

.error {
   color: red;
}

td.altmenusol {
   background: #EEE url('./images/masoll.gif') no-repeat;
   width: 8px;
   height: 31px; }

td.altmenusag {
   background: #EEE url('./images/masagg.gif') no-repeat;
   width: 8px; }

td.altmenuorta {
   background: #EEE url('./images/maort.gif') repeat-x; }
   
div.footer {
   background: url('./images/altlogorta.jpg') repeat-x 0 0;
   height: 70px;
}

span.footer-left, span.footer-right {
   display: block;
   width: 125px;
   height: 70px;
   background: url('./images/alt.jpg') no-repeat;
}

span.footer-left {
   background-position: 0 0;
   float: left;
   margin-right: 10px;
}

span.footer-right {
   width:125px;
   background-position: 100% 0%;
   float: right;
}

/* Tables
------------ */
th {
   color: #FFF;
   font-size: 11px;
   font-weight: bold;
   background-color: #8EA1BC;
   background-image: url('./images/cellpic3.gif');
   white-space: nowrap;
   padding: 7px 5px;
   text-align: center;
}

th.sleft {
   text-align: left;
}

td.profile {
   padding: 4px;
}

.tablebg {
   background: #9D8F8A;
}

.catdiv {
   height: 28px;
   margin: 0;
   padding: 0;
   border: 0;
   background: white url('./images/cat_mini.jpg') repeat-x scroll top left;
}
.rtl .catdiv {
   background: white url('./images/cellpic2_rtl.jpg') repeat-y scroll top right;
}

.cat {
   height: 28px;
   margin: 0;
   padding: 0;
   border: 0;
   background-color: #C7D0D7;
   background-image: url('./images/cat_mini3.jpg');
   text-indent: 4px;
}

.row1 {
   background-color: #E3E0DF;
   padding: 4px;
   border-right: 1px solid #BEB8B6;
   border-left: 1px solid #FFFFFF;
   border-top: 1px solid #FFFFFF;
   border-bottom: 1px solid #BEB8B6;
}

.row2 {
   background-color: #E3E0DF;
   padding: 4px;
   border-right: 1px solid #BEB8B6;
   border-left: 1px solid #FFFFFF;
   border-top: 1px solid #FFFFFF;
   border-bottom: 1px solid #BEB8B6;
}

.row3 {
   background-color: #B8AEAB;
   padding: 4px;
}

.row4 {
   background-color: #E3E0DF;
   padding: 4px;
}

.msjrow {
   background-color: #E3E0DF;
   border-right: 1px solid #BEB8B6;
   border-left: 1px solid #FFFFFF;
   border-top: 1px solid #FFFFFF;
   border-bottom: 1px solid #BEB8B6;
}

.botrow {
   background-color: #E3E0DF;
   height:20px;
   border-right: 1px solid #BEB8B6;
   border-left: 1px solid #FFFFFF;
   border-top: 1px solid #FFFFFF;
   border-bottom: 1px solid #BEB8B6;
   background-image: url('./images/cat_mini3.jpg');
}
.spacer {
   background-color: #D1D7DC;
}

hr {
   height: 1px;
   border-width: 0;
   background-color: #D1D7DC;
   color: #D1D7DC;
}

.legend {
   text-align:center;
   margin: 0 auto;
}

/* Links
------------ */
a:link {
   color: #006597;
   text-decoration: none;
}

a:active,
a:visited {
   color: #005784;
   text-decoration: none;
}

a:hover {
   color: #D46400;
   text-decoration: underline;
}

a.forumlink {
   color: #069;
   font-weight: bold;
   font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
   font-size: 1.2em;
}

a.topictitle {
   margin: 1px 0;
   font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
   font-weight: bold;
   font-size: 1.2em;
}

a.topictitle:visited {
   color: #005784;
   text-decoration: none;
}

a.topictitle:hover {
   color: #D46400;
   text-decoration: underline;
}

th a,
th a:visited {
   color: #FFA34F !important;
   text-decoration: none;
}

th a:hover {
   text-decoration: underline;
}


/* Form Elements
------------ */
form {
   margin: 0;
   padding: 0;
   border: 0;
}

input {
   color: #333333;
   font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
   font-size: 1.1em;
   font-weight: normal;
   padding: 1px;
   border: 1px solid #A9B8C2;
   background-color: #FAFAFA;
}

textarea {
   background-color: #FAFAFA;
   color: #333333;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-size: 1.3em;
   line-height: 1.4em;
   font-weight: normal;
   border: 1px solid #A9B8C2;
   padding: 2px;
}

select {
   color: #333333;
   background-color: #FAFAFA;
   font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
   font-size: 1.1em;
   font-weight: normal;
   border: 1px solid #A9B8C2;
   padding: 1px;
}

option {
   padding: 0 1em 0 0;
}

option.disabled-option {
   color: graytext;
}

.rtl option {
   padding: 0 0 0 1em;
}

input.radio {
   border: none;
   background-color: transparent;
}

.post {
   background-color: white;
   border-style: solid;
   border-width: 1px;
}

.btnbbcode {
   height: 16px;
   vertical-align: middle;
   color: #000;
   padding: 1px 5px 3px 5px;
   height: 18px;
   border: solid 1px #CCCCCC;
   background: #F0F0F0 url('./images/button.gif') repeat-x top left;
   font-weight: normal;
   font-size: 1.1em;
   font-family: "Lucida Grande", Verdana, Helvetica, sans-serif;
}

.btnfile {
   font-weight: normal;
   background-color: #ECECEC;
   border: 1px solid #A9B8C2;
   padding: 1px 5px;
   font-size: 1.1em;
}

input.btnlite:focus, btnmain:focus {
   background: #FFF;
}
   
input.btnlite, input.btnmain {
   height: 16px;
   font-size: 10px;
   vertical-align: middle;
   color: #000;
   font-weight: bold;
   padding: 1px 5px 3px 5px;
   height: 18px;
   border: solid 1px #CCCCCC;
   background: #F0F0F0 url('./images/button.gif') repeat-x top left;
}

input.btnlite:hover, input.btnmain:hover, .btnbbcode:hover  {
   background-color: #FFF;
   color: #BF0000;
   border: 1px solid #c0c0c0;
}
   
.helpline {
   background-color: #DEE3E7;
   border-style: none;
}


/* BBCode
------------ */

.attachtitle {
   margin: 10px 5px 0 5px;
   padding: 6px 2px;
   border-width: 1px 1px 0 1px;
   border-style: solid;
   border-color: #C6D2E2;
   color: #000;
   font-size: 9px;
   font-weight: bold;
   background : #C6D2E2 url('./images/attachment.gif') no-repeat 100% 50%;
}

.quotetitle {
   margin: 10px 5px 0 5px;
   padding: 4px;
   border-width: 1px 1px 0 1px;
   border-style: solid;
   border-color: #7C6D68;
   color: #F9F8F7;
   font-size: 0.85em;
   font-weight: bold;
   background : #7C6D68 url('./images/bbcode_quote.gif') no-repeat 100% 50%;
}

.quotetitle .quotetitle {
   font-size: 1em;
}

.quotecontent, .attachcontent {
   margin: 0 5px 10px 5px;
   padding: 5px;
   border-color: #7C6D68;
   border-width: 0 1px 1px 1px;
   border-style: solid;
   font-weight: normal;
   font-size: 1em;
   line-height: 1.4em;
   font-family: "Lucida Grande", "Trebuchet MS", Helvetica, Arial, sans-serif;
   background-color: #F9F8F7;
   color: #4B5C77;
}

.attachcontent {
   font-size: 0.85em;
}

.codetitle {
   margin: 10px 5px 0 5px;
   padding: 4px;
   border-width: 1px 1px 0 1px;
   border-style: solid;
   border-color: #A9B8C2;
   color : #F9F8F7;
   background-color: #A9B8C2;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-size: 0.8em;
   background : #008080 url('./images/bbcode_code.gif') no-repeat 100% 50%;
}

.codecontent {
   direction: ltr;
   margin: 0 5px 10px 5px;
   padding: 5px;
   border-color: #A9B8C2;
   border-width: 0 1px 1px 1px;
   border-style: solid;
   font-weight: normal;
   color: #006600;
   font-size: 0.85em;
   font-family: Monaco, 'Courier New', monospace;
   background-color: #FAFAFA;
}

.syntaxbg {
   color: #FFFFFF;
}

.syntaxcomment {
   color: #FF8000;
}

.syntaxdefault {
   color: #0000BB;
}

.syntaxhtml {
   color: #000000;
}

.syntaxkeyword {
   color: #007700;
}

.syntaxstring {
   color: #DD0000;
}


/* Private messages
------------------ */
.pm_marked_colour {
   background-color: #000000;
}

.pm_replied_colour {
   background-color: #A9B8C2;
}

.pm_friend_colour {
   background-color: #007700;
}

.pm_foe_colour {
   background-color: #DD0000;
}


/* Misc
------------ */
img {
   border: none;
}

.sep {
   color: black;
   background-color: #FFA34F;
}

table.colortable td {
   padding: 0;
}

pre {
   font-size: 1.1em;
   font-family: Monaco, 'Courier New', monospace;
}

.nowrap {
   white-space: nowrap;
}

.username-coloured {
   font-weight: bold;
}

/******* Lightbox ****************/
#lightbox{
   position: absolute;
   top: 40px;
   left: 0;
   width: 100%;
   z-index: 100;
   text-align: center;
   line-height: 0;
   }

#lightbox a img{ border: none; }

#outerImageContainer{
   position: relative;
   background-color: #fff;
   width: 250px;
   height: 250px;
   margin: 0 auto;
   }

#imageContainer{
   padding: 10px;
   }

#loading{
   position: absolute;
   top: 40%;
   left: 0%;
   height: 25%;
   width: 100%;
   text-align: center;
   line-height: 0;
   }
#hoverNav{
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 10;
   }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
   width: 49%;
   height: 100%;
   background: transparent url(images/blank.gif) no-repeat; /* Trick IE into showing hover */
   display: block;
   }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
   font: 10px Verdana, Helvetica, sans-serif;
   background-color: #fff;
   margin: 0 auto;
   line-height: 1.4em;
   }

#imageData{
   padding:0 10px;
   }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }   
#imageData #caption{ font-weight: bold;   }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;   }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;   }   
      
#overlay{
   position: absolute;
   top: 0;
   left: 0;
   z-index: 90;
   width: 100%;
   height: 500px;
   background-color: #000;
   filter:alpha(opacity=60);
   -moz-opacity: 0.6;
   opacity: 0.6;
   }
   

.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
   }

* html>body .clearfix {
   display: inline-block;
   width: 100%;
}

* html .clearfix {
   /* Hides from IE-mac \*/
   height: 1%;
   /* End hide from IE-mac */
}   
/*********** END LIGHTBOX **************/
]


pro_dropdown_6.css
Spoiler:
Code: Select all
/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_drop6.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.preload1 {
background: url('./images/six_0a.gif');
}

.preload2 {
background: url('./images/six_1a.gif');
}

#nav {
   padding:0;
   margin: 0;
   list-style:none;
   height:33px;
   background: url('./images/six_0.gif') repeat-x;
   position:relative;
   z-index:200;
   font-family: arial, verdana, sans-serif;
}

#nav li.top {
   display:block;
   float: left;
}

#nav li a.top_link {
   display:block;
   float: left;
   height:33px;
   line-height:31px;
   color:#FFF;
   text-decoration:none;
   font-size:12px;
   font-weight:bold;
   padding:0 0 0 12px;
   cursor:pointer;
   background: url('./images/six_0.gif');
}

#nav li a.top_link span {
   float: left;
   display:block;
   padding:0 24px 0 12px;
   height:33px;
   background: url('./images/six_0.gif') right top no-repeat;
}

#nav li a.top_link span.down {
   float: left;
   display:block;
   padding:0 24px 0 12px;
   height:33px;
   background: url('./images/six_0a.gif') no-repeat right top;
}

#nav li:hover a.top_link,
#nav a.top_link:hover {
   color:#000;
   font-weight:bold;
   background: url('./images/six_1.gif') no-repeat;
}

#nav li:hover a.top_link span,
#nav a.top_link:hover span {
   background: url('./images/six_1.gif') no-repeat right top;
}

#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down {
   background: url('./images/six_1a.gif') no-repeat right top;
   padding-bottom:3px;
}

#nav table {
   border-collapse:collapse;
   padding:0;
   margin:0;
   position:absolute;
   left:0;
   top:0;
}

#nav li:hover {
   position:relative;
   z-index:200;
}

#nav a:hover {
   position:relative;
   white-space:normal;
   z-index:200;
}

#nav :hover ul.sub {
   left:1px;
   top:34px;
   background-color: #E3E0DF;
   padding:3px;
   border: 1px solid #FFF;
   white-space:nowrap;
   width:185px;
   height:auto;
   z-index:300;
   font-weight:bold;
}

#nav :hover ul.sub li {
   display:block;
   height:20px;
   position:relative;
   float:left;
   width:185px;
   font-weight:bold;
}

#nav :hover ul.sub li a {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   text-indent:5px;
   color:#3365ac;
   text-decoration:none;
   font-weight:bold;
}

#nav li ul.sub li a.fly {
   background: url('./images/arrow_over.gif') 175px 6px no-repeat;
}

#nav :hover ul.sub li a:hover {
   color:#3365ac;
   background-color: #FFF;
   border-color:#FFF;
   font-weight:bold;
}

#nav :hover ul.sub li a.fly:hover {
   background: #FFF url('./images/arrow.gif') 175px 6px no-repeat;
   color:#3365ac;
}

#nav li b {
   display:block;
   font-size:11px;
   height:18px;
   width:183px;
   line-height:18px;
   margin-bottom:3px;
   text-indent:6px;
   color:#000;
   border-bottom:1px solid #7B6C67;
   cursor:default;
}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul {
   left:89px;
   top:-4px;
   padding:3px;
   border:1px solid #000;
   white-space:nowrap;
   width:183px;
   z-index:400;
   height:auto;
}

#nav ul,
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > ul {
   left: 183px; /* distance from right margin of main drop */
   top: -4px;
   background-color: #E3E0DF;
   padding: 3px;
   border: 1px solid #000;
   white-space: nowrap;
   width: 185px; /* width of secondary drop */
   z-index: 400;
   height: auto;
}

#nav li:hover > ul ul {
   position:absolute;
   left:-9999px;
   top:-9999px;
   width:0;
   height:0;
   margin:0;
   padding:0;
   list-style:none;
}

#nav li:hover li:hover > a.fly {
   background: #DDD url('./images/arrow.gif') 175px 6px no-repeat;
   color:#3365ac;
   font-weight: bold;
   text-decoration:none;
}

#nav li:hover li:hover > li a.fly {
   background: #DDD url('./images/arrow.gif') 175px 6px no-repeat;
   color:#3365ac;
   font-weight: bold;
   text-decoration:none;
}
User avatar
njohnson1987     Nick
Cadet I
Cadet I
 
Posts: 16
Joined: 26 Apr 2008, 01:54
Gender: Male
phpBB Knowledge: 2
Top
PreviousNext
Post a reply

Return to Tutorials and How-Tos

Who is online

Users browsing this forum: No registered users and 6 guests

Advertise on StarTrekGuide/phpBB Academy


Support STG Using PayPal Donate
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
© 2006 StarTrekGuide / phpBBAcademy

Time : 2.830s | 19 Queries | GZIP : On