MyBB Community Forums › Extensions › Themes › Theme Support v
Positioning Logo and Top Links [DarkFusion]

Threaded Mode
Not Solved Positioning Logo and Top Links [DarkFusion]
HybridForum Offline
Posts: 64
Threads: 10
Joined: Aug 2011
Reputation: 4
#1
Not Solved 2011-10-03, 07:44 PM
I'm having trouble editing the theme to my liking, enclosed are how the theme looks at the moment and a mock up of what I'm aiming for.

BEFORE
[Image: jA7rFccDpkL9x.png]

AFTER
[Image: jb0DNC5zDB5in7.png]
Would that kind of edit be all .css side?

.logo {
        height: 61px;
        width: 371px;	
       	margin-top: 150px;
	margin-left: 17.5px;
        padding: 1px 5px 50px 50px;
The above is the current css for the logo that made the "before" image.

The forum is primarily offline and on localhost so I cannot provide a link.
I want to learn how to create MyBB themes but don't have the time, what do?
Find
Reply
ranjani Offline
Posts: 5,871
Threads: 10
Joined: May 2009
Reputation: 625
#2
Not Solved 2011-10-04, 01:46 AM (This post was last modified: 2011-10-04, 01:47 AM by ranjani.)
change to below code AND hard refresh your forum page 

.logo {
height: 61px;
width: 371px;    
margin: 10px auto;
}

you may also have to move logo html code in header template to above of menu code ...
Find
Reply
HybridForum Offline
Posts: 64
Threads: 10
Joined: Aug 2011
Reputation: 4
#3
Not Solved 2011-10-04, 08:26 PM
@Above: Thank you it has been aligned horizontally, would you know how to align it vertically so it's in the middle of the total header?

How do I change the html without exporting to .xml ?
Thanks for the response!
I want to learn how to create MyBB themes but don't have the time, what do?
Find
Reply
ranjani Offline
Posts: 5,871
Threads: 10
Joined: May 2009
Reputation: 625
#4
Not Solved 2011-10-07, 02:46 PM
" How do I change the html without exporting to .xml " <-- could you elaborate it ...
actually you can directly modify content in templates without exporting to any other format ..

AND can we have your forum URL ...
Find
Reply
HybridForum Offline
Posts: 64
Threads: 10
Joined: Aug 2011
Reputation: 4
#5
Not Solved 2011-10-08, 01:40 PM
How it looks now after following your guidance:
[Image: jbceSjjbdnJsPx.png]

By the .xml comment I mean in the xml:
<head>
<title>{$mybb->settings['bbname']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	lang.no_new_posts = "{$lang->no_new_posts}";
	lang.click_mark_read = "{$lang->click_mark_read}";
// -->
</script>
</head>
In the above you can see all the head, title, script tags included in the .xml that the theme relies on, I'm asking if I can edit this .xml while the theme is already active without having to export the .xml and reupload.

There is no URL to give as I said in the thread post, it's currently on localhost
I want to learn how to create MyBB themes but don't have the time, what do?
Find
Reply
ranjani Offline
Posts: 5,871
Threads: 10
Joined: May 2009
Reputation: 625
#6
Not Solved 2011-10-08, 02:42 PM
^ :oops: somehow I missed the localhost part !

in general, we modify code in the templates for the use within our own forum.

can you post the code you have in the header template ...
Find
Reply
HybridForum Offline
Posts: 64
Threads: 10
Joined: Aug 2011
Reputation: 4
#7
Not Solved 2011-10-08, 07:59 PM (This post was last modified: 2011-10-08, 08:05 PM by HybridForum.)
Done:
<a name="top" id="top"></a>
<div id="panel">{$welcomeblock}</div>
<br><br>

<div class="header_right2">
<div class="menu">
<ul>
<li><a href="{$mybb->settings['bburl']}/portal.php" class="portal"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/home.png" alt="" title="" />{$lang->toplinks_portal}</a></li>
<li><a href="{$mybb->settings['bburl']}/index.php" class="index"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/forums.png" alt="" title="" />Forums</a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="search"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/search.png" alt="" title="" />{$lang->toplinks_search}</a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="members"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/memberlist.png" alt="" title="" />Members</a></li>

<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><img src="{$mybb->settings['bburl']}/{$theme['imgdir']}/icons/help.png" alt="" title="" />{$lang->toplinks_help}</a></li>
</ul>
</div>
</div>
</div>

<div class="header">
<div class="header_in">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
			
</div>
</div>
</div>

<br>
<br>

<div id="container">
<div id="content">
<navigation>

<hr class="hidden" />
<br class="clear" />
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
{$pm_notice}
			<br />

I appreciate you helping me out Ranjani.

Edit: Just realised that if I zoom out of the webpage to 50% the logo is in the center where I want it to be, maybe this is helpful?
I want to learn how to create MyBB themes but don't have the time, what do?
Find
Reply
ranjani Offline
Posts: 5,871
Threads: 10
Joined: May 2009
Reputation: 625
#8
Not Solved 2011-10-08, 08:10 PM
please move below part to the top of the header template and report back ...

<div class="header">
<div class="header_in">
<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
            
</div>
</div>
</div>
Find
Reply
HybridForum Offline
Posts: 64
Threads: 10
Joined: Aug 2011
Reputation: 4
#9
Not Solved 2011-10-09, 11:01 AM (This post was last modified: 2011-10-09, 11:04 AM by HybridForum.)
Result of doing the above:
[Image: jdpwrVFZGR27m.png]

Toplinks were displaced and logo is behind the (navbit?)




Edit: The top navbit? shows up as <div id="panel"></div>
Removing it shows the logo like so:
[Image: jbrdL13CyJa04r.png]
I want to learn how to create MyBB themes but don't have the time, what do?
Find
Reply
ranjani Offline
Posts: 5,871
Threads: 10
Joined: May 2009
Reputation: 625
#10
Not Solved 2011-10-12, 02:32 PM
try this for logo in global.css AND hard refresh your forum page (use CTRL + F5 a couple of times) 
.logo {
margin: 40px auto 0;
}

AND if you need the menu links to be moved to left then you have to change 
<div class="header_right">
<div class="menu">

to 

<div class="header_left">
<div class="menu">
Find
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)