MyBB Community Forums

Pages: 1 2

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

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.

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

@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!

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

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

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

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?

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>

Result of doing the above:

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:

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

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

Pages: 1 2

HybridForum

ranjani

HybridForum

ranjani

HybridForum

ranjani

HybridForum

ranjani

HybridForum

ranjani