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

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

Re: Full Width Header Banner image? [message #187852 is a reply to message #187851] Mon, 06 April 2020 16:37 Go to previous messageGo to next message
Kermit is currently offline  Kermit   United Kingdom
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
Re: Full Width Header Banner image? [message #187866 is a reply to message #187852] Wed, 06 May 2020 10:34 Go to previous messageGo to next message
naudefj is currently offline  naudefj   
Messages: 3723
Registered: December 2004
Karma: 26
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

Re: Full Width Header Banner image? [message #187867 is a reply to message #187866] Wed, 06 May 2020 10:44 Go to previous message
naudefj is currently offline  naudefj   
Messages: 3723
Registered: December 2004
Karma: 26
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;
}
Quick Reply
Formatting Tools:   
  Switch to threaded view of this topic Create a new topic
Previous Topic: How to change "color" to "colour" in the font options?
Next Topic: How to create a new theme for your forum
Goto Forum:
  

-=] Back to Top [=-
[ Syndicate this forum (XML) ] [ RSS ]

Current Time: Wed Jun 03 12:36:24 EDT 2020

Total time taken to generate the page: 0.00758 seconds