FUDforum: Forum Styles » Full Width Header Banner image?

Home » FUDforum Development » Forum Styles » Full Width Header Banner image?

Show: Today's Messages :: Unread Messages :: Polls :: Message Navigator
| Subscribe to topic | Bookmark topic

Full Width Header Banner image? [message #187851]

Mon, 06 April 2020 16:24

Kermit

Messages: 35
Registered: November 2004

Karma: 0

Member

add to buddy list
ignore all messages by this user

Hi, hoping someone can help me with this relatively minor detail.

I used to be able to edit the header.tmpl to remove the search box (done) and make my forum Honda-Header.png (banner) stretch across the full screens width depending on how wide the readers screen/browser Window is. I always used to kind of fluke it by trail and error then tend to loose the formatting when updating. I'm fairly clueless with html/php/css etc and hope its an easy adjustment that my blindness to coding in general (other than very basic stuff) is responsible for.

My forum is http://honda-forums.com/forum/ and you'll see the banner on typical 1920 wide screen takes up 50% width, I'd like 95% or so.

The line I think it may be is <img class="headimg" src="{THEME_IMAGE_ROOT}/Honda-Header.png" alt="" align="centre" height="50" />

and I think used to use <img class="headimg" src="{THEME_IMAGE_ROOT}/Honda-Header.png" alt="" align="centre" height="50" width=95%/> but that doesn't seem to work now. Maybe its forum.css.tmpl but I have even less idea with css other than the general concept of css so can anyone point me in the right direction with the code change?

<!DOCTYPE html>
<html lang="{LANG}" dir="{DIR}">
<head>
	<meta charset="{CHARSET}">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="{IF: !empty($META_DESCR)}{VAR: META_DESCR}{ELSE}{GVAR: FORUM_DESCR}{END}" />
	<title>{GVAR: FORUM_TITLE}{VAR: TITLE_EXTRA}</title>
	<link rel="search" type="application/opensearchdescription+xml" title="{GVAR: FORUM_TITLE} Search" href="{BASE}open_search.php" />
	{VAR: RSS}
	<link rel="stylesheet" href="{THEME_ROOT}/forum.css" media="screen" title="Default Forum Theme" />
	<link rel="stylesheet" href="{BASE}js/ui/jquery-ui.css" media="screen" />
	<script src="{BASE}js/jquery.js"></script>
	<script async src="{BASE}js/ui/jquery-ui.js"></script>
	<script src="{BASE}js/lib.js"></script>
</head>
<body>
<!-- {INJECTION_POINT: left_block} -->
<div class="header">
  {IF: $GLOBALS['FUD_OPT_1'] & 1 && $GLOBALS['FUD_OPT_1'] & 16777216}
  <!--<div class="headsearch">
    <form id="headsearch" method="get" action="{ROOT}">{DEF: _hs}
      <input type="hidden" name="t" value="search" />
      <br /><label accesskey="f" title="{MSG: search_forum_search}">{MSG: search_forum_search}:<br />
      <input type="search" name="srch" value="" size="20" placeholder="{MSG: search_forum_search}" /></label>
      <input type="image" src="{THEME_IMAGE_ROOT}/search.png" alt="{MSG: search}" name="btn_submit">&nbsp;
    </form>
  </div>-->
  {ENDIF}
  <a href="{BASE}" title="{MSG: home}">
    <img class="headimg" src="{THEME_IMAGE_ROOT}/Honda-Header.png" alt="" align="centre" height="50" />
    <!-- <span class="headtitle">{GVAR: FORUM_TITLE}</span>-->
  </a><br />
  <!--<span class="headdescr">{GVAR: FORUM_DESCR}<br /><br/>   -->

</span>
</div>
<div class="content">

<!-- Table for sidebars. -->
<table width="100%"><tr><td>

[Updated on: Mon, 06 April 2020 16:27]

Report message to a moderator

Rate author: +1 -1

Re: Full Width Header Banner image? [message #187852 is a reply to message #187851]

Mon, 06 April 2020 16:37

Kermit

Messages: 35
Registered: November 2004

Karma: 0

Member

add to buddy list
ignore all messages by this user

btw if someone knows how to turn off the effect where when you hover over an image (banner, image in post etc) where it zooms out slightly, that'd be a two birds with one stone scenario Smile

Report message to a moderator

Rate author: +1 -1

Re: Full Width Header Banner image? [message #187866 is a reply to message #187852]

Wed, 06 May 2020 10:34

naudefj

Messages: 3775
Registered: December 2004

Karma: 28

Senior Member
Administrator
Core Developer

remove from buddy list
ignore all messages by this user

The hover is easy to disable, delete the following from forum.css.tmpl and recompile your themes:

img:hover {
    transform: scale(1.05);
}

[Updated on: Wed, 06 May 2020 10:42]

Report message to a moderator

Rate author: +1 -1

Re: Full Width Header Banner image? [message #187867 is a reply to message #187866]

Wed, 06 May 2020 10:44

naudefj

Messages: 3775
Registered: December 2004

Karma: 28

Senior Member
Administrator
Core Developer

remove from buddy list
ignore all messages by this user

To make the header image stretch, increase of remove "max-width":

img {
    border: 0;
    max-width: 1200px;
    transition: all 0.5s ease-out;
}

Report message to a moderator

Rate author: +1 -1

Message by tracikeel52 is ignored [reveal message] [reveal all messages by tracikeel52] [stop ignoring this user]

Previous Topic:	How to change "color" to "colour" in the font options?
Next Topic:	Simple and clean.

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Mon May 19 23:26:25 EDT 2025

Total time taken to generate the page: 0.05331 seconds