FUDforum
Fast Uncompromising Discussions. FUDforum will get your users talking.

Home » FUDforum Development » Forum Styles » Full Width Header Banner image?
Show: Today's Messages :: Polls :: Message Navigator
Switch to threaded view of this topic Create a new topic Submit Reply
Full Width Header Banner image? [message #187851] Mon, 06 April 2020 20:24 Go to next message
Kermit is currently offline  Kermit   United Kingdom
Messages: 35
Registered: November 2004
Karma: 0
Member
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 20:27]

Report message to a moderator

Re: Full Width Header Banner image? [message #187852 is a reply to message #187851] Mon, 06 April 2020 20:37 Go to previous messageGo to next message
Kermit is currently offline  Kermit   United Kingdom
Messages: 35
Registered: November 2004
Karma: 0
Member
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
Re: Full Width Header Banner image? [message #187866 is a reply to message #187852] Wed, 06 May 2020 14:34 Go to previous messageGo to next message
naudefj is currently offline  naudefj   
Messages: 3772
Registered: December 2004
Karma: 28
Senior Member
Administrator
Core Developer
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 14:42]

Report message to a moderator

Re: Full Width Header Banner image? [message #187867 is a reply to message #187866] Wed, 06 May 2020 14:44 Go to previous messageGo to next message
naudefj is currently offline  naudefj   
Messages: 3772
Registered: December 2004
Karma: 28
Senior Member
Administrator
Core Developer
To make the header image stretch, increase of remove "max-width":
img {
    border: 0;
    max-width: 1200px;
    transition: all 0.5s ease-out;
}
Re: Full Width Header Banner image? [message #187885 is a reply to message #187867] Mon, 08 June 2020 20:52 Go to previous message
tracikeel52 is currently offline  tracikeel52
Messages: 2
Registered: June 2020
Karma: 0
Junior Member
You need To Remove max-width: 1200px; from tag img
  Switch to threaded view of this topic Create a new topic Submit Reply
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) ] [ RSS ]

Current Time: Sun Dec 22 05:59:02 GMT 2024

Total time taken to generate the page: 0.02284 seconds