[CDB] DVGFX2

[Prosk8er]

Style Name: DVGFX2
Author: Prosk8er

Style Description: Dark Style
Style Version: 3.0.5
phpBB Version: 3.3.5

Requirements: prosilver (must be active!)

Screenshots:


Demo URL: https://styles.gotskillslounge.com/index.php?style=6

Style Download: https://github.com/Prosk8er/phpBB3-Styles/tree/master

Issues:

• none

[Prosk8er]

changed to RC and download available might still need a few tweaks but i'll wait to see if there's any input
this was originally a subsilver2 based style for 3.0.x and 3.1.x and converted it to prosilver based

[Talk19Zehn]

Hello Prosk8er, thank you for porting this design to the phpBB-system-version 3.3.4.

...(...)... but i'll wait to see if there's any input ...(...)...

Okay, here we go. Some impressions and possibly non-binding minor remedy.

After installing the RC version, the header looked like this - image:

Therefore, a test of my change: CSS
custom.css line 10

Code: Select all

ul#navmenu {
	background: transparent url("./images/navmenu.gif") repeat-x;
	height: 46px;
	line-height: 100%;
	list-style: none;
	margin: 0 -10px 2px -10px;
	padding: 0;
}

custom.css line 27 - The font size is set too high, I think. I´m setting font-size: 1.1em; (Test, test...):

Code: Select all

ul#navmenu li a, ul#navmenu li a:active, ul#navmenu li a:focus, ul#navmenu li a:link, ul#navmenu li a:visited {
	border-right: 1px solid #252F3A;
	color: #EAE5E5;
	display: block;
	font-family: "Helvetica", Arial, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	margin: 0;
	padding: 18px 8px;
	text-decoration: none;
	text-shadow: -1px 2px 1px rgba(46,46,49,1);
	text-transform: capitalize;
}

The responsive / adaptive view is also okay. The overlap of the menu on the right side is omitted.

HTML: menu_header.html (Test, test ...) changes to:

Code: Select all

	<ul id="navmenu">
		<li class="first">{% if U_SITE_HOME %}<a href="{{ U_SITE_HOME }}" title="{{ L_SITE_HOME }}">{{ L_SITE_HOME }}</a></li>{% endif %}
		{% if not U_SITE_HOME %}<li><a href="{{ U_INDEX }}" title="{{ L_INDEX }}">{{ L_INDEX }}</a></li>{% endif %}
		<li><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
		{% if S_DISPLAY_SEARCH %}<li><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li>{% endif %}
		{% if S_DISPLAY_MEMBERLIST %}<li><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST}">{L_MEMBERLIST}</a></li>{% endif %}
		{% if S_REGISTERED_USER %}
			{% if S_DISPLAY_PM %}<li><a href="{U_PRIVATEMSGS}" title="{L_PRIVATE_MESSAGES}">{L_PRIVATE_MESSAGES} <strong class="badge{% if not PRIVATE_MESSAGE_COUNT %} hidden{% endif %}">{PRIVATE_MESSAGE_COUNT}</strong></a></li>{% endif %}
			<li><a href="{U_PROFILE}" title="{L_PROFILE}">{L_PROFILE}</a></li>
		{% endif %}
		{% if not S_USER_LOGGED_IN and not S_IS_BOT %}<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN}">{L_LOGIN}</a></li>{% endif %}
		{% if S_USER_LOGGED_IN and not S_IS_BOT %}<li><a href="{U_LOGIN_LOGOUT}" title="{L_LOGOUT}">{L_LOGOUT}</a></li>{% endif %}
		{% if not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) %}
			<li><a href="{U_REGISTER}" title="{L_REGISTER}">{L_REGISTER}</a></li>
		{% endif %}
	</ul>

Result without "HP-Button-Link":

Result with "HP-Button-Link":

"Link-Button: FAQ" and "Link-Button ... {% if S_DISPLAY_PM %} ... " .... inside the menu are possibly unnecessary, since these are already included within the navbar_header.html

=====
Unfortunately, there are small color deviations. Some areas were partly unreadable or / or are used by the Parent = Prosilver (colors (prosilver)). I have executed these adjustments in the CSS. Intended only as a suggestion - some changes ... a few (next steps) ... - I personally noticed these:

Code: Select all

/* Another ADDs DVGFX2
----------------------------------------*/
.inputbox {
	background-color: #F0F0F0;
}

select {
	border-color: #666666;
	background-color: #F0F0F0;
	color: #000;
}

.panel-container .panel li.header dd, .panel-container .panel li.header dt {
	color: #CBCBCC;
}

dl.mini dt {
	color: #5D8FBD;
}

.current {
	color: #898989 !important;
}

.reported {
	background-color: #284955;
}

.posthilit {
	background-color: #344553;
	color: #368AD2;
}

/* PM marking colours */
.pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
	border-left-color: #C60000;
	border-right-color: #C60000;
}

.pmlist li.pm_marked_colour, .pm_marked_colour {
	border-color: #FEFDAD;
}

.pmlist li.pm_replied_colour, .pm_replied_colour {
	border-color: #A9B8C2;
}

.pmlist li.pm_friend_colour, .pm_friend_colour {
	border-color: #5D8FBD;
}

.pmlist li.pm_foe_colour, .pm_foe_colour {
	border-color: #FF6600;
}

/* Avatar gallery */
.gallery label {
	background: #656565;
	border-color: #CCC;
}

.gallery label:hover {
	background-color: #2E2E31;
}

/* Misc layout styles
---------------------------------------- */
dl.details dt {
	color: #FFFFFF;
	font-weight: bold;
}

dl.details dd {
	color: #DADADA;
}

/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
	background-color: #272727;
	border-color: #616367;
}

blockquote blockquote {
	/* Nested quotes */
	background-color: #404040;
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #222222;
}

/* Code block */
.codebox {
	background-color: #404040;
	border-color: #FAFAFA;
}

.codebox p {
	border-bottom-color: #CCCCCC;
}

.codebox code {
	color: #CCC;
}

/* Mini tabbed menu used in MCP
----------------------------------------*/
.minitabs .tab > a {
	background-color: #324250;
}

.minitabs .activetab > a,
.minitabs .activetab > a:hover {
	background-color: #656565;
	color: #CCCCCC;
}

/* Pagination
---------------------------------------- */

.pagination li a {
	background: #324250;
	filter: none;
	border-color: #B4BAC0;
	box-shadow: none;
	-webkit-box-shadow: none;
	color: #FAFAFA;
}

.pagination li.ellipsis span {
	background: transparent;
	color: #CCCCCC;
}

.pagination li.active span {
	background: #333333;
	border-color: #406D83;
	color: #FAFAFA;
}

.pagination li a:hover, .pagination li a:hover .icon, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
	background: #405260;
	border-color: #368AD2;
	filter: none;
	color: #DADADA;
	text-shadow: none;
}

The custom.css I have inserted in the stylesheet.css at the end and renamed to: @import url("custom.css?v=3.3");
So I could work without hash values.

Code: Select all

/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			DVGFX2
	Based on style:		prosilver (the default phpBB 3.3.x style)
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		Prosk8er ( http://gotskillslounge.com/ )
    --------------------------------------------------------------
*/

@import url("normalize.css?hash=48eb3f89");
@import url("base.css?hash=3a7fafb1");
@import url("utilities.css?hash=1034bac8");
@import url("common.css?hash=70bd1301");
@import url("links.css?hash=da040ebb");
@import url("content.css?hash=2ca4ae91");
@import url("buttons.css?hash=15c14833");
@import url("cp.css?hash=5cc9ac0c");
@import url("forms.css?hash=18ee8211");
@import url("icons.css?hash=dbc0f3b9");
@import url("colours.css?hash=3b03ccfa");
@import url("responsive.css?hash=a1546011");
@import url("custom.css?v=3.3");

Thanks for your great work, I wish the best.

Many regards

[Prosk8er]

some of those links are just there to fill the header menu they can be changed or deleted if one wishes
i'll look into the colors i knew i missed some
before i submit it to cdb it'll have a real hash for all the css

thanks for your input much appreciated

*added some of yours with a few changes from me
i just have to find where these can be seen like what pages can i access to see them

Code: Select all

.panel-container .panel li.header dd, .panel-container .panel li.header dt {
	color: #CBCBCC;
}

.current {
	color: #898989 !important;
}

.reported {
	background-color: #284955;
}

.posthilit {
	background-color: #344553;
	color: #368AD2;
}

/* PM marking colours */
.pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
	border-left-color: #C60000;
	border-right-color: #C60000;
}

.pmlist li.pm_marked_colour, .pm_marked_colour {
	border-color: #FEFDAD;
}

.pmlist li.pm_replied_colour, .pm_replied_colour {
	border-color: #A9B8C2;
}

.pmlist li.pm_friend_colour, .pm_friend_colour {
	border-color: #5D8FBD;
}

.pmlist li.pm_foe_colour, .pm_foe_colour {
	border-color: #FF6600;
}

/* Avatar gallery */
.gallery label {
	background: #656565;
	border-color: #CCC;
}

.gallery label:hover {
	background-color: #2E2E31;
}


/* Mini tabbed menu used in MCP
----------------------------------------*/
.minitabs .tab > a {
	background-color: #324250;
}

.minitabs .activetab > a,
.minitabs .activetab > a:hover {
	background-color: #656565;
	color: #CCCCCC;
}

/* Pagination
---------------------------------------- */

.pagination li a {
	background: #324250;
	filter: none;
	border-color: #B4BAC0;
	box-shadow: none;
	-webkit-box-shadow: none;
	color: #FAFAFA;
}

.pagination li.ellipsis span {
	background: transparent;
	color: #CCCCCC;
}

.pagination li.active span {
	background: #333333;
	border-color: #406D83;
	color: #FAFAFA;
}

.pagination li a:hover, .pagination li a:hover .icon, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
	background: #405260;
	border-color: #368AD2;
	filter: none;
	color: #DADADA;
	text-shadow: none;
}

[Talk19Zehn]

Okay, some explanations (please see attached graphics).
Graphics: Without my changes:

==========

ucp.php?i=pm&folder=inbox
<div class="list-inner with-mark">Message</div>
<dd class="mark">Mark</dd>
example: mcp.php?i=reports&mode=reports

colours.css prosilver #711 changed to: because difficult to read

Code: Select all

.panel-container .panel li.header dd, .panel-container .panel li.header dt {
	color: #CBCBCC;
}

ucp.php?i=179
<div class="cp-mini">
examples:
<dl class="mini">
<dt>Friends</dt>
<dt>Message colours</dt>

colours.css prosilver #831 changed to: because difficult to read

Code: Select all

dl.mini dt {
	color: #5D8FBD;
}

=> styles\prosilver\template\ucp_pm_history.html
colours.css prosilver #838 changed to: because difficult to read

Code: Select all

.current {
	color: #898989 !important;
}

=> styles\prosilver\template\viewtopic_body.html (background-color: #F7ECEF;) bg-color matched, difficult to read.
colours.css prosilver #289 changed to:

Code: Select all

.reported {
	background-color: #284955;
}

search-result: colours.css prosilver #374 -> pink color matched to: ideas(!)

Code: Select all

.posthilit {
	background-color: #344553;
	color: #368AD2;
}

Used an avatar gallery changed to: bg-colors matched for DVGFX2, .gallery label:hover = bg changed to color of postprofile

Code: Select all

/* Avatar gallery */
.gallery label {
	background: #656565;
	border-color: #CCC;
}

.gallery label:hover {
	background-color: #2E2E31;
}

example: memberlist.php?mode=viewprofile
colours.css prosilver #193 dl.details dd changed to: in my opinion difficult to read

Code: Select all

/* Misc layout styles
---------------------------------------- */

dl.details dd {
	color: #DADADA;
}

colours.css prosilver #395ff quote block changed to: because partly difficult to read

Code: Select all

/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
	background-color: #272727;
	border-color: #616367;
}

blockquote blockquote {
	/* Nested quotes */
	background-color: #404040;
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #222222;
}

colours.css prosilver #411ff Code block changed to: because partly difficult to read

Code: Select all

/* Code block */
.codebox {
	background-color: #404040;
	border-color: #FAFAFA;
}

.codebox p {
	border-bottom-color: #CCCCCC;
}

.codebox code {
	color: #CCC;
}

mcp.php?i=main&mode=topic_view
colours.css prosilver #752ff Mini tabbed menu used in MCP changed to: besause tabs in parts unreadable

Code: Select all

/* Mini tabbed menu used in MCP
----------------------------------------*/
.minitabs .tab > a {
	background-color: #324250;
}

.minitabs .activetab > a,
.minitabs .activetab > a:hover {
	background-color: #656565;
	color: #CCCCCC;
}

colours.css prosilver #570ff Pagination (viewforum_, viewtopic_ ... )
changed to: colors matched for DVGFX2

Code: Select all

/* Pagination
---------------------------------------- */

.pagination li a {
	background: #324250;
	filter: none;
	border-color: #B4BAC0;
	box-shadow: none;
	-webkit-box-shadow: none;
	color: #FAFAFA;
}

.pagination li.ellipsis span {
	background: transparent;
	color: #CCC;
}

.pagination li.active span {
	background: #333333;
	border-color: #406D83;
	color: #FAFAFA;
}

.pagination li a:hover, .pagination li a:hover .icon, .pagination .dropdown-visible a.dropdown-trigger, .nojs .pagination .dropdown-container:hover a.dropdown-trigger {
	background: #405260;
	border-color: #368AD2;
	filter: none;
	color: #DADADA;
	text-shadow: none;
}

bg-colors are much lightning(?) = (#FFFFFF) for this great dark style, I´ve changed to (ideas!) ...

Code: Select all

.inputbox {
	background-color: #F0F0F0;
}

Code: Select all

select {
	border-color: #666666;
	background-color: #F0F0F0;
	color: #000;
}

Best regards

[Prosk8er]

thank you very much for that when i get home tonight or tomorrow i'll go through those

*fixed that last bit of colors

[Prosk8er]

style updated on demo site and github implemented some changes from Talk19Zehn

[Prosk8er]

style is now updated and approved by phpbb cdb

[Raul [ThE KuKa]]

DVGFX2 is now validated and available to download in the CDB here:
https://www.phpbb.com/customise/db/style/dvgfx2/