proBlue style

Only registered users can see this forum.
Post Reply
User avatar
Puchahawa
Guru
Guru
Posts: 71
Joined: Wed Feb 08, 2017 12:53 pm
Location: SW Oregon coast
Interests:
  • unknown unknown
Apr 2017
30
19:02

Re: proBlue style

Post by Puchahawa by Puchahawa Apr 2017 30 19:02

I know you'll get it figured out. :cool:

EDIT: Did a little testing. :o Not sure if this info will help or not but here it is. :lol:

I did some simple measurements on the screen. When you're full screen on a pc the two line up as you see. When you go to a smaller screen like a tablet or phone the # is the one that moves and it moves up. The p.author stays the same. Not sure why it does that though. Looking at prosilver, aero black and Dark Vision they don't have the same p.author border and the # doesn't move.

:confused:

User avatar
Sniper_E
Site Admin
Site Admin
Posts: 214
Joined: Thu Jan 19, 2017 7:34 pm
Location: Shreveport, LA
Interests: Kb :drag:
  • unknown unknown
Contact:
Apr 2017
30
20:16

Re: proBlue style

Post by Sniper_E by Sniper_E Apr 2017 30 20:16

Yes I'm adding 8px padding more in that wrapper plus the 2px of border so the line height is more than the post number text. And it looks like it lines up with the post autor section using a vertical-align: top.

Setting up the css in the responsive.css on line 564 like this will take care of that mobile view issue.

Code: Select all

/* Post author
	----------------------------------------*/
	p.author {
		padding: 10px 0;
		margin: -10px 0;
	}
	
	span.post-author {
		margin: 0;
	}
It's in there tight but it's mobile view. Tight is good for mobile view! :cool:
Image

No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

User avatar
Puchahawa
Guru
Guru
Posts: 71
Joined: Wed Feb 08, 2017 12:53 pm
Location: SW Oregon coast
Interests:
  • unknown unknown
Apr 2017
30
23:18

Re: proBlue style

Post by Puchahawa by Puchahawa Apr 2017 30 23:18

Yep, that works a charm. :lol:

User avatar
Sniper_E
Site Admin
Site Admin
Posts: 214
Joined: Thu Jan 19, 2017 7:34 pm
Location: Shreveport, LA
Interests: Kb :drag:
  • unknown unknown
Contact:
May 2017
01
12:03

Re: proBlue style

Post by Sniper_E by Sniper_E May 2017 01 12:03

I also added new lines on line 623 in responsive.css

Code: Select all

	.post-buttons {
		padding-right: 10px;
	}
This moves the post buttons away from our larger online/offline images in mobile view.
And that should be a wrap folks! :pillow:
Image

No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

User avatar
Puchahawa
Guru
Guru
Posts: 71
Joined: Wed Feb 08, 2017 12:53 pm
Location: SW Oregon coast
Interests:
  • unknown unknown
May 2017
01
13:13

Re: proBlue style

Post by Puchahawa by Puchahawa May 2017 01 13:13

Congrats on a great style! :clap: :poke:

You going to put it up on .com, or just have it avail here and dmzx's place?

User avatar
Sniper_E
Site Admin
Site Admin
Posts: 214
Joined: Thu Jan 19, 2017 7:34 pm
Location: Shreveport, LA
Interests: Kb :drag:
  • unknown unknown
Contact:
May 2017
01
14:21

Re: proBlue style

Post by Sniper_E by Sniper_E May 2017 01 14:21

I have to clean up the css and then present it to .com

There is a lot of sidebar css in the style sheets that has to come out.
I'm making the sidebar an extension so it will have its own css.

Plus I need to check my templates to make sure I didn't leave any hard coding.

[ Post made via Samsung Galaxy S5 Active ] Image
Image

No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

martin
Posts: 95
Joined: Thu Jan 19, 2017 7:43 pm
Interests:
  • unknown unknown
Jul 2017
06
19:16

Re: proBlue style

Post by martin by martin Jul 2017 06 19:16

I did it with just html the files are still on my server in the forum folder then styles have a peek :cool: i made no css changes to the theme only a few small tweaks and i placed them in magic to keep style files clean.

User avatar
Sniper_E
Site Admin
Site Admin
Posts: 214
Joined: Thu Jan 19, 2017 7:34 pm
Location: Shreveport, LA
Interests: Kb :drag:
  • unknown unknown
Contact:
Jul 2017
06
21:28

Re: proBlue style

Post by Sniper_E by Sniper_E Jul 2017 06 21:28

My latest copy of this style...
Image

No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

martin
Posts: 95
Joined: Thu Jan 19, 2017 7:43 pm
Interests:
  • unknown unknown
Jul 2017
08
15:54

Re: proBlue style

Post by martin by martin Jul 2017 08 15:54

Here is the template files converted to Twig syntax :cool:
problue_twig_templates.zip
(27.84 KiB) Downloaded 77 times
see here https://www.phpbb.com/community/viewtop ... &t=2424606

tool to convert in acp https://www.phpbb.com/community/viewtop ... &t=2429096

User avatar
Sniper_E
Site Admin
Site Admin
Posts: 214
Joined: Thu Jan 19, 2017 7:34 pm
Location: Shreveport, LA
Interests: Kb :drag:
  • unknown unknown
Contact:
Jul 2017
21
23:31

Re: proBlue style

Post by Sniper_E by Sniper_E Jul 2017 21 23:31

Screenshot_2017-07-21-23-33-35.png
(279.01 KiB) Downloaded 484 times
ProBlue on mobile sideways view in desktop mode.
It's looking more like martin's place everyday.

I changed the wrapper to show on mobile wide view. Check it out.
Image

No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

User avatar
Sniper_E
Site Admin
Site Admin
Posts: 214
Joined: Thu Jan 19, 2017 7:34 pm
Location: Shreveport, LA
Interests: Kb :drag:
  • unknown unknown
Contact:
Sep 2017
18
21:53

Re: proBlue style

Post by Sniper_E by Sniper_E Sep 2017 18 21:53

Here is my latest copy of this style.
problue.zip
(1.98 MiB)
problue.zip
(1.98 MiB) Downloaded 90 times
Image

No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

Anders
Guru
Guru
Posts: 8
Joined: Thu Aug 31, 2017 12:34 am
Interests:
  • unknown unknown
Sep 2017
19
00:35

Re: proBlue style

Post by Anders by Anders Sep 2017 19 00:35

thanks i change :cool:

User avatar
Sniper_E
Site Admin
Site Admin
Posts: 214
Joined: Thu Jan 19, 2017 7:34 pm
Location: Shreveport, LA
Interests: Kb :drag:
  • Windows 10 Firefox
Contact:
Jan 2018
20
23:04

Re: DeepBlue Style

Post by Sniper_E by Sniper_E Jan 2018 20 23:04

DeepBlue style version 3.2.2 for phpBB 3.2.2
deepblue_3.2.2.zip
Let's see if it needs anything.
(1.67 MiB)
deepblue_3.2.2.zip
Let's see if it needs anything.
(1.67 MiB) Downloaded 65 times
:beer: Ready for testing...
Image

No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

martin
Posts: 95
Joined: Thu Jan 19, 2017 7:43 pm
Interests:
  • Ubuntu Chrome
Jan 2018
21
09:05

Re: proBlue style

Post by martin by martin Jan 2018 21 09:05

Got it on mine almost works with my cssmagic

User avatar
Sniper_E
Site Admin
Site Admin
Posts: 214
Joined: Thu Jan 19, 2017 7:34 pm
Location: Shreveport, LA
Interests: Kb :drag:
  • Windows 10 Firefox
Contact:
Jan 2018
23
10:01

Re: proBlue style

Post by Sniper_E by Sniper_E Jan 2018 23 10:01

I use a hide/show javascript to hide the stat blocks, loaded in the overall_header.html

Code: Select all

<script type="text/javascript" src="{T_TEMPLATE_PATH}/hide_show.js"></script>
The hide_show.js

Code: Select all

var PreloadFlag = false;
var expDays = 90;
var exp = new Date();
var tmp = '';
var tmp_counter = 0;
var tmp_open = 0;

exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function SetCookie(name, value)
{
	var argv = SetCookie.arguments;
	var argc = SetCookie.arguments.length;
	var expires = (argc > 2) ? argv[2] : null;
	var path = (argc > 3) ? argv[3] : null;
	var domain = (argc > 4) ? argv[4] : null;
	var secure = (argc > 5) ? argv[5] : false;
	document.cookie = name + "=" + escape(value) +
		((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
		((path == null) ? "" : ("; path=" + path)) +
		((domain == null) ? "" : ("; domain=" + domain)) +
		((secure == true) ? "; secure" : "");
}

function getCookieVal(offset)
{
	var endstr = document.cookie.indexOf(";",offset);
	if (endstr == -1)
	{
		endstr = document.cookie.length;
	}
	return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie(name)
{
	var arg = name + "=";
	var alen = arg.length;
	var clen = document.cookie.length;
	var i = 0;
	while (i < clen)
	{
		var j = i + alen;
		if (document.cookie.substring(i, j) == arg)
		{
			return getCookieVal(j);
		}
		i = document.cookie.indexOf(" ", i) + 1;
		if (i == 0)
		{
			break;
		}
	}
	return null;
}

function ShowHide(id1, id2, id3)
{
	var res = expMenu(id1);
	if (id2 != '')
	{
		expMenu(id2);
	}
	if (id3 != '')
	{
		SetCookie(id3, res, exp);
	}
}

function expMenu(id)
{
	var itm = null;
	if (document.getElementById)
	{
		itm = document.getElementById(id);
	}
	else if (document.all)
	{
		itm = document.all[id];
	}
	else if (document.layers)
	{
		itm = document.layers[id];
	}
	if (!itm)
	{
		// do nothing
	}
	else if (itm.style)
	{
		if (itm.style.display == "none")
		{
			itm.style.display = "";
			return 1;
		}
		else
		{
			itm.style.display = "none";
			return 2;
		}
	}
	else
	{
		itm.visibility = "show";
		return 1;
	}
}

function showMenu(id)
{
	var itm = null;
	if (document.getElementById)
	{
		itm = document.getElementById(id);
	}
	else if (document.all)
	{
		itm = document.all[id];
	}
	else if (document.layers)
	{
		itm = document.layers[id];
	}
	if (!itm)
	{
		// do nothing
	}
	else if (itm.style)
	{
		if (itm.style.display == "none")
		{
			itm.style.display = "";
			return true;
		}
		else
		{
//			itm.style.display = "none";
			return true;
		}
	}
	else
	{
		itm.visibility = "show";
		return true;
	}
}

function hideMenu(id)
{
	var itm = null;
	if (document.getElementById)
	{
		itm = document.getElementById(id);
	}
	else if (document.all)
	{
		itm = document.all[id];
	}
	else if (document.layers)
	{
		itm = document.layers[id];
	}
	if (!itm)
	{
		// do nothing
	}
	else if (itm.style)
	{
		if (itm.style.display == "none")
		{
//			itm.style.display = "";
			return true;
		}
		else
		{
			itm.style.display = "none";
			return true;
		}
	}
	else
	{
		itm.visibility = "hide";
		return true;
	}
}

function IsIEMac()
{
	// Any better way to detect IEMac?
	var ua = String(navigator.userAgent).toLowerCase();
	if( document.all && ua.indexOf("mac") >= 0 )
	{
		return true;
	}
	return false;
}


function select_text(obj)
{
	var o = document.getElementById(obj)
	if( !o ) return;
	var r, s;
	if( document.selection && !IsIEMac() )
	{
		// Works on: IE5+
		// To be confirmed: IE4? / IEMac fails?
		r = document.body.createTextRange();
		r.moveToElementText(o);
		r.select();
	}
	else if( document.createRange && (document.getSelection || window.getSelection) )
	{
		// Works on: Netscape/Mozilla/Konqueror/Safari
		// To be confirmed: Konqueror/Safari use window.getSelection ?
		r = document.createRange();
		r.selectNodeContents(o);
		s = window.getSelection ? window.getSelection() : document.getSelection();
		s.removeAllRanges();
		s.addRange(r);
	}
}
Then added some code to the stat blocks section in the index_body.html

Code: Select all

	<div id="stat-blocks" class="stat-block stat-display">
		<h3><a onclick="javascript:ShowHide('stat-blocks','stat-blocks_h','stat-blocks');" style="cursor:pointer">{L_DISPLAY} {L_STATISTICS}</a></h3>
		<!-- IF .birthdays --><div class="stat-button-main"><a onclick="javascript:ShowHide('stat-blocks','stat-blocks_h','online-list');"  title="{L_EXPAND_VIEW}" style="cursor:pointer;"><span class="index-download-alert"></span></a></div><!-- ENDIF -->
	</div>
	<div id="stat-blocks_h" class="stat-blocks" style="display: none">
		<script type="text/javascript">tmp = 'stat-blocks'; if(GetCookie(tmp) == '2') { ShowHide('stat-blocks', 'stat-blocks_h', 'stat-blocks'); }</script>
		<h3>{L_FORUM} {L_STATISTICS}</h3>
		<div class="stat-button"><a onclick="javascript:ShowHide('stat-blocks','stat-blocks_h','stat-blocks');"  title="{L_COLLAPSE_VIEW}" style="cursor:pointer;"><span class="index-upload"></span></a></div>
		<div class="wrap">
		<!-- EVENT index_body_stat_blocks_before -->
		
		<!-- IF S_DISPLAY_ONLINE_LIST -->
			<div id="online-list" class="stat-block online-list">
				<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a><!-- ELSE --><h3>{L_WHO_IS_ONLINE}<!-- ENDIF --></h3>
		<div class="stat-button"><a onclick="javascript:ShowHide('online-list','online-list_h','online-list');"  title="{L_EXPAND_VIEW}" style="cursor:pointer;"><span class="index-download"></span></a></div>
			</div>
			<div id="online-list_h" class="stat-block online-list" style="display: none">
				<script type="text/javascript">tmp = 'online-list'; if(GetCookie(tmp) == '2') { ShowHide('online-list', 'online-list_h', 'online-list'); }</script>
				<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a><!-- ELSE --><h3>{L_WHO_IS_ONLINE}<!-- ENDIF --></h3>
		<div class="stat-button"><a onclick="javascript:ShowHide('online-list','online-list_h','online-list');" title="{L_COLLAPSE_VIEW}" style="cursor:pointer;"><span class="index-upload"></span></a></div>
				<p><!-- EVENT index_body_block_online_prepend -->
				{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
				<!-- IF U_VIEWONLINE -->
					<br />{LOGGED_IN_USER_LIST}
					<!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
				<!-- ENDIF -->
				<!-- EVENT index_body_block_online_append --></p>
			</div>
		<!-- ENDIF -->
				
		<!-- EVENT index_body_birthday_block_before -->
				
		<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
			<div id="birthday-list" class="stat-block birthday-list">
				<h3>{L_BIRTHDAYS}</h3>
		<div class="stat-button"><a onclick="javascript:ShowHide('birthday-list','birthday-list_h','birthday-list');"  title="{L_EXPAND_VIEW}" style="cursor:pointer;"><span class="<!-- IF .birthdays -->index-download-alert<!-- ELSE -->index-download<!-- ENDIF -->"></span></a></div>
			</div>
			<div id="birthday-list_h" class="stat-block birthday-list" style="display: none">
				<script type="text/javascript">tmp = 'birthday-list'; if(GetCookie(tmp) == '2') { ShowHide('birthday-list', 'birthday-list_h', 'birthday-list'); }</script>
				<h3>{L_BIRTHDAYS}</h3>
		<div class="stat-button"><a onclick="javascript:ShowHide('birthday-list','birthday-list_h','birthday-list');" title="{L_COLLAPSE_VIEW}" style="cursor:pointer;"><span class="index-upload"></span></a></div>
				<p><!-- EVENT index_body_block_birthday_prepend -->
				<!-- IF .birthdays --><i class="birthday-cake" aria-hidden="true"></i> {L_CONGRATULATIONS}{L_COLON}  <strong><!-- BEGIN birthdays -->{birthdays.USERNAME} <!-- IF birthdays.AGE !== '' --> ({birthdays.AGE})<!-- ENDIF --> <i class="icon fa fa-gift fa-green" aria-hidden="true"></i><!-- IF not birthdays.S_LAST_ROW -->, <!-- ENDIF --><!-- END birthdays --></strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF -->
				<!-- EVENT index_body_block_birthday_append --></p>
			</div>
		<!-- ENDIF -->
				
		<!-- EVENT index_body_statistics_block_before -->
				
		<!-- IF NEWEST_USER -->
			<div id="statistics" class="stat-block statistics">
				<h3>{L_STATISTICS}</h3>
		<div class="stat-button"><a onclick="javascript:ShowHide('statistics','statistics_h','statistics');"  title="{L_EXPAND_VIEW}" style="cursor:pointer;"><span class="index-download"></span></a></div>
			</div>
			<div id="statistics_h" class="stat-block statistics" style="display: none">
				<script type="text/javascript">tmp = 'statistics'; if( GetCookie(tmp) == '2' ) { ShowHide('statistics', 'statistics_h', 'statistics'); }</script>
				<h3>{L_STATISTICS}</h3>
		<div class="stat-button"><a onclick="javascript:ShowHide('statistics','statistics_h','statistics');" title="{L_COLLAPSE_VIEW}" style="cursor:pointer;"><span class="index-upload"></span></a></div>
				<p><!-- EVENT index_body_block_stats_prepend -->
				{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
				<!-- EVENT index_body_block_stats_append --></p>
			</div>
		<!-- ENDIF -->
		
		<!-- EVENT index_body_stat_blocks_after -->
		</div>
	</div>
This inline script is for a cookie if you want your selection to stick.

Code: Select all

<script type="text/javascript">tmp = 'online-list'; if(GetCookie(tmp) == '2') { ShowHide('online-list', 'online-list_h', 'online-list'); }</script>
Then a little css for the images in common.css

Code: Select all

.index-upload, .index-download, .index-download-alert {
	width: 16px;
	height:16px;
	float: right;
}
With some more css for the images in colours.css

Code: Select all

.index-upload						{ background-image: url("./images/icon_upload.gif"); }
.index-download						{ background-image: url("./images/icon_download.gif"); }
.index-download-alert				{ background-image: url("./images/icon_download_alert.gif"); }
Image

No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!™

Post Reply