MyBB Community Forums

Hello guys, So i was hoping someone could tell me how to do this.

I'm designing a custom MyBB theme and need to know how to modify the welcomeblock, I want to try and do the welcomeblock like premium designs have for when i release this design. I'm a decent designer when i can think of something to create a design based off and I'm creating a MyBB design based on one of my other designs but want to do more than just leaving the default welcomeblock.

So how do i change this welcomeblock:


into a welcomeblock such as this:


I just can't figure out how you modify the WelcomeBlock to do such things, Would someone be able to explain how that's done? Thanks.

There are two welcome blocks, member and guest. If you look inside the header you will see it referred to as {$welcomeblock}.

You can edit the html in those three templates to change the look of the board. If you want EVERYONE to see something - put it in the header block. The login/signup is in the guest block - the user links etc are in the member block.

(2014-03-30, 03:08 AM)Leefish Wrote: [ -> ]There are two welcome blocks, member and guest. If you look inside the header you will see it referred to as {$welcomeblock}.

You can edit the html in those three templates to change the look of the board. If you want EVERYONE to see something - put it in the header block. The login/signup is in the guest block - the user links etc are in the member block.

Lol yeah im actually well aware of that, I just played around with it and was able to get this far:



I just for the life of me can't get the options into a dropdown menu.

My header welcomeblock member code:

<ul style="list-style: none;">
<li><a href="{$mybb->settings['bburl']}/usercp.php"><strong>{$lang->welcome_usercp}</strong></a></li>
<li>{$modcplink}</li>
<li>{$admincplink}</li>
<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></li>
<li><span class="links"><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a></span></li>
</ul>

my navigation code:

<div id="nav-header">
<div id="navigation">
				<ul>
                                        <li><a href="{$mybb->settings['bburl']}/index.php">Home</a></li>
					<li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
					<li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
					<li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
					<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
{$welcomeblock}
			</div>

I couldn't get it to go into a dropdown and was only able to get the welcomeblock to even show up with the code as it is. Can't figure out how to get it into a dropdown menu, driving me nuts lol.

How have you defined the ul and li in the css? Also, check in the mod and admin lnks to fix up the alignment.

Have you started from the default theme or are you modifying an existing theme?

(2014-03-30, 03:24 AM)Leefish Wrote: [ -> ]How have you defined the ul and li in the css? Also, check in the mod and admin lnks to fix up the alignment.

Have you started from the default theme or are you modifying an existing theme?

I have started from the default design, been doing this from scratch.

li / ul css:

#navigation {
position: absolute;
float: left;
}
#navigation ul {
margin: 0px;
padding: 0px;
float: left;
margin-left: 20px;
}
#navigation li {
display: inline;
list-style: none;
padding-right: 10px;
}
#navigation ul ul {
	display: none;
}
#navigation ul li:hover > ul {
		display: block;
}
#navigation ul li {
	float: left;
}
#navigation ul li:hover {
		background: #14222B;
}
#navigation ul li:hover a {
			color: #00FF08;
}
	
#navigation ul li a {
		display: block; 
		padding: 5px;
		text-decoration: none;
}

I'm not too worried about the alignment, I don't want them aligned in the navigation bar, i want these links in a dropdown menu so there really only needs to be one link aligned as the rest are going to be in a dropdown if i can get a dropdown in there :/



Update: OK, I was able to get it to work the only problem now is i have to get the list to display properly cause right now its horizontal in the dropdown.

drop down menu basics: http://code-tricks.com/simple-css-drop-down-menu/

That will explain better than I can. Basically, you have an ul >li, then in the li where you want the drop menu you DONT close the li and add an ul. That ul is hidden until you hover on it.

So

<html>
<head>

<style>
#navigation {
position: absolute;
float: left;
}
#navigation ul {
margin: 0px;
padding: 0px;
float: left;
margin-left: 20px;
}
#navigation li {
display: inline;
list-style: none;
padding-right: 10px;
}
#navigation ul ul {
    display: none;
}
#navigation ul li:hover > ul {
        display: block;
}
#navigation ul li {
    float: left;
}
#navigation ul li:hover {
        background: #14222B;
}
#navigation ul li:hover a {
            color: #00FF08;
}
    
#navigation ul li a {
        display: block; 
        padding: 5px;
        text-decoration: none;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<!--start_drop-->
<li><a href="{$mybb->settings['bburl']}/usercp.php"><strong>{$lang->welcome_usercp}</strong></a>
<ul>
<li><a href="{$modcplink}">link1</a></li>
<li><a href="{$admincplink}">link2</a></li>
</ul>
<li>
<!--end_drop-->
<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></li>
<li><span class="links"><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a></span></li>
</ul>
</div>
</body>
</html>

---

lol ok, I was busy writing the set up - I thought that was deliberate. Look at the link in my reply

(2014-03-30, 04:02 AM)Leefish Wrote: [ -> ]drop down menu basics: http://code-tricks.com/simple-css-drop-down-menu/

That will explain better than I can. Basically, you have an ul >li, then in the li where you want the drop menu you DONT close the li and add an ul. That ul is hidden until you hover on it.

So

<html>
<head>

<style>
#navigation {
position: absolute;
float: left;
}
#navigation ul {
margin: 0px;
padding: 0px;
float: left;
margin-left: 20px;
}
#navigation li {
display: inline;
list-style: none;
padding-right: 10px;
}
#navigation ul ul {
    display: none;
}
#navigation ul li:hover > ul {
        display: block;
}
#navigation ul li {
    float: left;
}
#navigation ul li:hover {
        background: #14222B;
}
#navigation ul li:hover a {
            color: #00FF08;
}
    
#navigation ul li a {
        display: block; 
        padding: 5px;
        text-decoration: none;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<!--start_drop-->
<li><a href="{$mybb->settings['bburl']}/usercp.php"><strong>{$lang->welcome_usercp}</strong></a>
<ul>
<li><a href="{$modcplink}">link1</a></li>
<li><a href="{$admincplink}">link2</a></li>
</ul>
<li>
<!--end_drop-->
<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></li>
<li><span class="links"><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a></span></li>
</ul>
</div>
</body>
</html>

---

lol ok, I was busy writing the set up - I thought that was deliberate. Look at the link in my reply

That CSS works exactly the same as the CSS i have setup with my HTML..
What I'm now having trouble figuring out is how to make my list in my dropdown menu actually verticle... cause right now its stuck horizontally.

When hovered:



UPDATE: This dropdown I am going to need some help with, I can't get it to work vertically like it should be. I have tried googling and all lol, I just can't figure out what's wrong there.

Sorry for late reply- I kept getting a time out on MyBB.

<html>
<head>

<style>
/*menu*/

.navigation ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}
.navigation ul a {
color:white;
}
.navigation ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: red;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.navigation ul li:hover {
  background: #555;
  color: #fff;
}
.navigation ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.navigation ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
.navigation ul li ul li:hover { background: #666; }
.navigation ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
</style>
</head>
<body>
<div class="navigation">
<ul>
<!--start_drop-->
<li><a href="{$mybb->settings['bburl']}/usercp.php"><strong>{$lang->welcome_usercp}</strong></a>
<ul>
<li><a href="{$modcplink}">link1</a></li>
<li><a href="{$admincplink}">link2</a></li>
</ul>
</li>
<!--end_drop-->
<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></li>
<li><span class="links"><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a></span></li>
</ul>
</div>
</body>
</html>

(2014-03-30, 05:22 AM)Leefish Wrote: [ -> ]Sorry for late reply- I kept getting a time out on MyBB.

<html>
<head>

<style>
/*menu*/

.navigation ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}
.navigation ul a {
color:white;
}
.navigation ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: red;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.navigation ul li:hover {
  background: #555;
  color: #fff;
}
.navigation ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
.navigation ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
.navigation ul li ul li:hover { background: #666; }
.navigation ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
</style>
</head>
<body>
<div class="navigation">
<ul>
<!--start_drop-->
<li><a href="{$mybb->settings['bburl']}/usercp.php"><strong>{$lang->welcome_usercp}</strong></a>
<ul>
<li><a href="{$modcplink}">link1</a></li>
<li><a href="{$admincplink}">link2</a></li>
</ul>
</li>
<!--end_drop-->
<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a></li>
<li><span class="links"><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a></span></li>
</ul>
</div>
</body>
</html>

This is now the output using that CSS.



Update: But if i just add the custom Navigation CSS into the existing navigation css simply by just putting that into the file then the dropdown just stays the same as the bug in the dropdown from my previous post where the menu isn't vertically dropped it's horizontally dropped.

The code is of course a complete "page" that you can run launch in your browser. obviously you cant drop that straight in your css file.

The key to it is that the unordered list is contained in a div called navigation and the css has no further classes on the ul/li elements. Is the unordered list in your screenshot in a div called navigation with no further classes?