[How To?] Change sides and Add new links?

[MonsteR_X]

hello guys. i want to know how to get this look in my forum.
(picture drawing color places)

using page link style
user cp links
add to up links

please tell me how to add this to theme...(templates & globle.css)
here my testing forum- cyberghostweb.000webhostapp.com
please tell me.. thanks

[WallBB]

For the blue and green links - header, header_welcomeblock_guest and header_welcomeblock_member templates

And for the red link, you need to modify navigation templates.

[Ikerepc]

Hi. You can make registration button look like login button, move search field to the left and welcome message to guests to right by this codes:

Your header_welcomeblock_guest template:

                        <!-- Continuation of div(class="upper") as opened in the header template -->
                        <div class="welcome">
                            <form method="post" action="{$mybb->settings['bburl']}/member.php">
                            <input name="action" type="hidden" value="do_login" />
                            <input name="url" type="hidden" value="" />
                            <input name="quick_login" type="hidden" value="1" />
                            <input name="quick_username" id="quick_login_username" type="text" value="" class="textbox initial_focus" />
                            <input name="quick_password" id="quick_login_password" type="password" value="" class="textbox" />
                            <input name="submit" type="submit" class="button" value="{$lang->login}" />
                            <span class="registration_button"><a href="{$mybb->settings['bburl']}/member.php?action=register" class="register">{$lang->welcome_register}</a>
                            </form>
                        </div>
                    </div>
                </div>

Also, put this in your global.css file:

.registration_button {
    background: #3f3f3f;
    color: #ededed;
    padding: 3px 8px;
    cursor: pointer;
    border: none;
    outline: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    border-radius: 5px;
}

Than find in your global.css tag #search and under it you will find

float: right;

change it to:

float: left;

Have you some bigger image of that image? I don't see what everything is under green circle And I don't know what you thing exactly with blue one, isn't that here by default?

And you want only Home, Members and other links to be on top, nothing changed on them, right? With or without some border around them and their own background color?

[MonsteR_X]

For the blue and green links - header, header_welcomeblock_guest and header_welcomeblock_member templates

And for the red link, you need to modify navigation templates.

Freind can you tell me what is codes there all?and where to type it?

Have you some bigger image of that image? I don't see what everything is under green circle And I don't know what you thing exactly with blue one, isn't that here by default?

And you want only Home, Members and other links to be on top, nothing changed on them, right? With or without some border around them and their own background color?

sorry freind .. here orginal pic

Can you tell what type it codes & where to type it...?

---

I need the color of the picture & How to make the way I painted the place.(template codes & globle.css and where to type it all)

[Ikerepc]

What type?

Also, did you put that .registration_button code in css?

[MonsteR_X]

What type?

Also, did you put that .registration_button code in css?

Yes... how to remove there image?

[Ikerepc]

Find in your global.css file this:

#panel .upper a.register {

and inside that delete next 2 lines:

background: url(../../../images/headerlinks_sprite.png) right -80px no-repeat;
    padding-right: 20px;

---

Now find in global.css next:

#header ul.menu li a

and delete following lines inside that:

padding-left: 20px;
    background-image: url(../../../images/headerlinks_sprite.png);

Then replace your header template with following code:

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div class="wrapper" style="text-align: right;">
			<ul class="menu top_links">
				<span class="top_by_ikerepc">
						{$menu_portal}
						{$menu_search}
						{$menu_memberlist}
						{$menu_calendar}
						<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
					</ul>
				</span>
			</div>
			<div id="logo">
				<div class="wrapper">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
					
				</div>
			</div>
			<div id="panel">
				<div class="upper">
					<div class="wrapper">
						{$quicksearch}
						{$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
			</div>
		</div>
		<div id="content">
			<div class="wrapper">
				{$pm_notice}
				{$remote_avatar_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
				<navigation>
				<br />

And add this to your global.css:

.top_by_ikerepc {
	background: #333;
	padding: 15px;
	color: #fff;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
}

That should solve red circle.

[MonsteR_X]

hello guys. i want to know how to get this look in my forum.
(picture drawing color places)

using page link style
user cp links
add to up links

please tell me how to add this to theme...(templates & globle.css)
here my testing forum- cyberghostweb.000webhostapp.com
please tell me.. thanks

Thanks. Now can you help this?

[Ikerepc]

Still don't know what exactly you need by this blue, I will try green one now...

[MonsteR_X]

Ok thaks...