New Summer Forum Banner - Well done Sam!!

[BudgiesBuddy]

Jul 4, 2014 22:33:45 GMT Marianne Marlow said:

Jul 4, 2014 11:32:34 GMT BudgiesBuddy said:

My point was the same as Stace that; "original artwork is not the correct size". If the size of the banner picture is increased a little, it should cover the left side. Unless ProBoards left it there by choice, as a design thing.

What size do you suggest it should be, to fit?

Exactly the size of the blue background, where the banner is inserted.

[Marianne Marlow]

Jul 6, 2014 19:45:15 GMT BudgiesBuddy said:

Jul 4, 2014 22:33:45 GMT Marianne Marlow said:

What size do you suggest it should be, to fit?

Exactly the size of the blue background, where the banner is inserted.

I do not know the measurements of it!!

[OP]

The size of "The Banner" is directed by the CSS which will be part of the theme. Increasing the size of the image will probably not affect what is displayed. When I have checked the size of our banner image it is '1004 px width and 263 px height'. Which means the theme used by ProBoards scales our image to fill a space. Unless you have access to options for the "Role of Banner" I don't see how you can adjust the image. It seems to me that it is the positioning of the image with respect to the "Default image" of Proboards is what is causing the problem. Do you have an option of how you insert our image? As in, do you link the address of the image? or, do you upload the image to your allotted space on Pro_boards server?
Sorry if this is all gobbledegook. It is rather geek speak & I don't know of any other way to say it.

[Marianne Marlow]

It's okay, I speak gobbledygook. I use Linux remember!


I upload the image to proboards.

[Marianne Marlow]

Like this, using the upload button

[OP]

Which browser are you using? Do you have Firefox or Opera at your disposal?

[Marianne Marlow]

I have chromium, chrome, firefox and opera..

I use chrome currently.

[OP]

If you bring up the forum in Firefox, right click on the upper left hand side, select 'Inspect Element' and hover your mouse over the banner area. You will see that the image is placed between the div tags which define the whole of the banner as a role="banner" this whole section is defined en the CSS for the theme. There is also the LOGO to think about because this is also within the same div tags and you don't have a LOGO, yet there is space allocated for it within the banner. This is why I think it is a positional thing, not just size.
If you want to play about with it without wrecking the site you can use Opera, right click as before and select 'source'. This will bring up a new window with the page source code for you to edit, look at. If you edit the code you can 'Apply' to see what the changes look like without committing them to the server. In fact I don't think you would be able to save the modified code without authorization. It would at least give you idea's as what is happening.

[Marianne Marlow]

I don't host the forum, so surely that would not work anyway?

[OP]

Once the page is on your computer you can change any of the code, if using Opera, and Apply Changes to your copy. Then go back to the tab with the page on and see what the result is. As I say you can't save the changes because as you say you are not hosting the site. What it does do is give you the opportunity to see if the server is serving up the wrong code. It is a form of debugging if you like. If you find something that works you can try and find out why the code is served up wrongly from the server.

[OP]

As an experiment I used my method of editing the code from <div id="banner-container" role="banner">
<h2 id="banner">
<a id="logo" href="/"><img src="http://storage.proboards.com/3362550/i/Idowl7OWAT4aKxWSWPDS.jpeg" alt="Budgerigars Forum" title="Budgerigars Forum" /></a>
</h2>
</div>

to this <div id="banner-container" role="banner">
<img src="http://storage.proboards.com/3362550/i/Idowl7OWAT4aKxWSWPDS.jpeg" alt="Budgerigars Forum" title="Budgerigars Forum" />
</div>

The new banner fits perfectly. Obviously I cannot save any of this but it does suggest there is a way to do it on the server with the proper authorization.

[OP]

Take a look HERE.

[Marianne Marlow]

This is what it currently says :/

<!DOCTYPE HTML>
$[tag.html.open]
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>$[title] | $[forum.name]</title>
$[head]
</head>
<body>
{if $[maintenance_mode]}
<div class="maintenance-header">
{if $[can.disable_maintenance]}<p>Finished with maintenance? $[disable_maintenance_link].</p>{/if}
</div>
{/if}
<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">
{foreach $[navigation.menu]}
<li>
<a{if $[navigation.menu.active]} class="state-active"{/if} href="$[navigation.menu.href]"{if $[navigation.menu.accesskey]} accesskey="$[navigation.menu.accesskey]"{/if}>
$[navigation.menu.name]
{if $[navigation.menu.notification.total]}
<div class="tip-holder" onclick="window.location='$[navigation.menu.notification.href]'; return false;">
<div class="tip-number">$[navigation.menu.notification.total]</div>
<span class="tip"></span>
</div>
{/if}
</a>
</li>
{/foreach}
</ul>
<p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>
</div>
</header>

$[participated_threads_link]

{if $[navigation.tree]}
<div id="navigation-tree">
$[navigation.tree]
</div>
{/if}

$[header]

<div id="content" role="main">
{if $[notice]}
<div class="container">
<div class="title-bar"><h2>$[notice.title]</h2></div>
<div class="content pad-all cap-bottom">
$[notice.message]
</div>
</div>
{/if}
$[content]
$[shoutbox]
</div>

$[footer]
</div>
{if $[is_mobile_browser]}
<br /><p class="center">Switch to the $[mobile_switch_link].</p>
{/if}
</body>
</html>

[Marianne Marlow]

I have no idea what they mean by "in the visual editor"

Visual editor of what??

I have loads of options.

[OP]

Oh Dear are we on a different web browser I wonder. Yours has all the javascript removed. I am viewing the source code with Opera 12.16 for Linux/Unix
This is what mine says from the beginning
<!DOCTYPE HTML>
<!--[if IE 7]><html class="ie7"><![endif]--><!--[if IE 8]><html class="ie8"><![endif]--><!--[if IE 9]><html class="ie9"><![endif]--><!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Home | Budgerigars Forum</title>
<link rel="alternate" type="application/rss+xml" href="http://budgerigarsforum.proboards.com/rss/public" />
<link rel="shortcut icon" type="image/x-icon" href="//images.proboards.com/v5/favicon.ico" />
<link rel="icon" type="image/x-icon" href="//images.proboards.com/v5/favicon.ico" />
<meta property="og:url"                 content="http://budgerigarsforum.proboards.com/" />
<meta property="og:title"               content="Home | Budgerigars Forum" />
<meta property="og:description"         content="Visit our forum at: budgerigarsforum.proboards.com" />
<meta name="twitter:card"               content="summary" />
<meta name="twitter:site"               content="@proboards" />
<meta name="twitter:app:id:iphone"      content="307880732" />
<meta name="twitter:app:url:iphone"     content="tapatalk://support.tapatalk.com/?user_id=169&location=index" />
<meta name="twitter:app:id:ipad"        content="307880732" />
<meta name="twitter:app:url:ipad"       content="tapatalk://support.tapatalk.com/?user_id=169&location=index" />
<meta name="twitter:app:id:googleplay"  content="com.quoord.tapatalkpro.activity" />
<meta name="twitter:app:url:googleplay" content="tapatalk://support.tapatalk.com/?user_id=169&location=index" />

<link rel="stylesheet" type="text/css" media="screen" href="http://d.storage.proboards.com/f/forum_149.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://storage.proboards.com/3362550/c/bqZqCiXaVOO2126GX4Lr.css" id="forum_style">
<link rel="stylesheet" type="text/css" media="print" href="http://d.storage.proboards.com/f/print.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://d.storage.proboards.com/f/forum_149.js"></script>
<script type="text/javascript">proboards.data([['ad_free',1],['time_style',1],['military_time',1],['timezone',"1.00"],['serverDate',1404727841000],['search-query-min',3],['search-query-max',50],['is_current_user_guest',""],['plugin_max_key_length',4000],['plugin_max_super_forum_key_length',32000],['login_url',"https://login.proboards.com/login/3362550/1"],['register_url',"https://login.proboards.com/register/3362550"],['home_new_post_src',"//images.proboards.com/v5/icons/board-no-new-post.png"],['mark_boards_read_url',"/boards/mark/read"],['forum_id',"3362550"],['csrf_token',"HzKKDzQe"],['user',{"date_format":"d/m/y","is_logged_in":1,"status":"It's official, I am a budgie nut case.","friends":{},"avatar":"<div class=\"avatar-wrapper avatar_size_default avatar-1784\"><img src=\"http://storage.proboards.com/3362550/a/Cr9gY1kzDrrH8tmJSXtv.jpg\" alt=\"OP Avatar\" /></div>","time_format":"24hr","proboards_plus":0,"last_online":{"unix_timestamp":1404727841},"url":"/user/1784","posts":2771,"instant_messengers":{},"id":1784,"registered_on":{"unix_timestamp":1371396367},"birthday":{"month":12,"day":6},"has_new_messages":0,"theme_id":1,"name":"OP","username":"oldpecker","is_invisible":0,"rank":{"name":"Budgie Addict","id":7},"is_staff":0}],['page',{}],['default_avatar',"//images.proboards.com/v5/defaultavatar.png"],['route',{"params":{},"name":"home"}],['insite_path',""]]);</script>
<script type="text/javascript">if (typeof(standard_home) == 'function') standard_home();
proboards.plugin._plugins["eton_quick_reply_bbbutton"] = {
settings: {"selectors":[],"ignore_buttons":[],"apply_to_full_reply":[],"custom_buttons":[{"tag":"span","image":"http://images.proboards.com/v5/admin/themes/images/edit.png","name":"Highlight","attributes":"style:background-color=yellow|style:outline=red solid 1px","index":""}],"apply_custom_full_reply":[]}
};</script>

</head>
<body>

<div id="wrapper">
<header>
<div id="banner-container" role="banner">
<h2 id="banner">
<a id="logo" href="/"><img src="http://storage.proboards.com/3362550/i/Idowl7OWAT4aKxWSWPDS.jpeg" alt="Budgerigars Forum" title="Budgerigars Forum" /></a>
</h2>
</div>
<a id="navigation-skip" href="#content" accesskey="s" class="aria-hidden" title="Skip Navigation">Skip Navigation</a>
<a href="#" accesskey="d" title="Open Menu" onclick="proboards.hotkeys.activate(Keys.d); return false;"></a>
<div id="navigation-menu" class="ui-helper-clearfix">
<ul role="navigation">

<li>
<a class="state-active" href="/" accesskey="1">
Home

</a>
</li>

<li>
<a href="http://budgerigarsforum.proboards.com/threads/recent">
New Posts

</a>



As for the Visual Editor I don't know as I don't have a forum hosted by ProBoards. I will look more closely at the ProBoards Forums.