we_universal

we_universal 3.2.3 vs. moonphases - we_universal

we_universal 3.2.3 vs. moonphases

by kjh-mov » Sat Oct 06, 2018 10:50 am

Hello,
HiFiKabin was so kind to program something, allowing me to embed the moonphase extension in the new we_universal style 3.2.3 :D :D :D

You can find it here:
memberlist.php?mode=viewprofile&u=1408531

Kind regards,
kjh-mov
Wer nichts weiß, muss alles glauben.

Marie von Ebner-Eschenbach
User avatar
kjh-mov
Registered User
Posts: 82
Joined: Mon May 07, 2018 12:23 pm
Contact:

Re: we_universal 3.2.3 vs. moonphases

by v12mike » Sat Oct 06, 2018 4:08 pm

That link is only to his user profile...

I guess the enhancement will find its way into a later release of the extension.
v12mike
Registered User
Posts: 584
Joined: Thu Jul 09, 2015 5:03 pm
Contact:

Re: we_universal 3.2.3 vs. moonphases

by kjh-mov » Sat Jun 01, 2019 5:07 am

Hello v12mike,
is it possible to integrate the new extension cosmosheader from HiFiKabin for we_universal?
Here are some old information about his hack für headerbanner.

https://www.phpbb.com/customise/db/exte ... 27e7a4d8f3

cosmosbanner you can find here:
https://phpbb.hifikabin.me.uk/viewtopic.php?f=3&t=176

kind regards,
kjh-mov
Wer nichts weiß, muss alles glauben.

Marie von Ebner-Eschenbach
User avatar
kjh-mov
Registered User
Posts: 82
Joined: Mon May 07, 2018 12:23 pm
Contact:

Re: we_universal 3.2.3 vs. moonphases

by v12mike » Sat Jun 01, 2019 1:57 pm

Sorry but I don't think that I can put all of that code into the we_universal files, as it is too specific to the extensions.
The problem is that we_universal has a different page header structure to prosilver and some assumptions that can be made for template events in prosilver just do not work for we_universal.

I am happy to add one or two template events for this purpose or move an existing one (if it is obviously in the wrong place).
This would still require the extensions to be updated to support this style, or hand-editing when you install it.
v12mike
Registered User
Posts: 584
Joined: Thu Jul 09, 2015 5:03 pm
Contact:

Re: we_universal 3.2.3 vs. moonphases

by v12mike » Sun Jun 02, 2019 6:48 am

I have spent some time playing with this, and I have added some new template events into we_universal v2.5.8-b2 that allow an extension to hook into the appropriate place to replace the standard we_universal image.

As an example, you can now install the cosmosbanner extension https://phpbb.hifikabin.me.uk/viewtopic.php?f=3&t=176 (don't forget to add a header image and check that it is working with the prosilver style). Then add a new style directory to it with the following files, it seems to function OK with we_universal.

The paths here are relative to the forum root.

Create the file: /ext/hifikabin/cosmosbanner/styles/we_universal/template/event/overall_header_headerbar_after.html and leave this file completely empty, the purpose is to override the prosilver version of html for this extension.

Create the file: /ext/hifikabin/cosmosbanner/styles/we_universal/template/event/inventea_dashboad_image_before.html and add the following content:

Code: Select all

{% if COSMOSBANNER_SELECT %}
<div class="cosmos-header">
	{% if COSMOSBANNER_MOON %}
	<div id="moon">  
		<a href="http://www.calendrier-lunaire.net/" target="_blank"><img id="phase" alt="{L_MOON_ALT}" title="{L_MOON_TITLE}"/></a>
	</div>
	{% endif %}
	{% if COSMOSBANNER_SUN %}
	<div id="current_sunspot">  
		<a href="https://sohowww.nascom.nasa.gov/sunspots/" target="_blank"><img id="cosmos-sunspots" alt="{{ lang('SUNSPOT_ALT') }}" title="{{ lang('SUNSPOT_TITLE') }}"/></a>
	</div>
	{% endif %}
	{% if COSMOSBANNER_SEARCH in [1, 2, 3, 4, 7] %}
	<div id="search-overlay" class="cosmosbanner-search-{{ COSMOSBANNER_SEARCH }}">
		<div class="search-box responsive-hide">
			{% INCLUDE 'navbarsearch.html' %}
		</div>
	</div>
	{% endif %}
	{% if COSMOSBANNER_LOGO %}
	<a id="cosmosbanner_logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
	{% endif %}
	<div style="position:absolute;">
		<h1>{{ SITENAME }}</h1>
		<p>{{ SITE_DESCRIPTION }}</p>
		<p class="skiplink"><a href="#start_here">{{ lang('SKIP') }}</a></p>
	</div>
	<div class="cosmos-banner">
		<a href="{{ U_SITE_HOME ? U_SITE_HOME : U_INDEX }}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="cosmos-banner" src="{{ COSMOSBANNER }}" alt="{{ lang('INDEX') }}"></a>
	</div>
	{% if COSMOSBANNER_MOBILE %}
	<div class="mobile-cosmos-banner">
		<a href="{{ U_SITE_HOME ? U_SITE_HOME : U_INDEX }}" title="{% if U_SITE_HOME %}{{ lang('SITE_HOME') }}{% else %}{{ lang('INDEX') }}{% endif %}"><img class="mobile-cosmos-banner" src="{{ COSMOSBANNER_RESPONSIVE }}" alt="{{ lang('INDEX') }}" ></a>
	</div>
	{% endif %}
</div>
{% endif %}
Create the file: /ext/hifikabin/cosmosbanner/styles/we_universal/theme/cosmosbanner.css and add the following content:

Code: Select all

.inventea-dashboard-image {
	display: none;
}
/*
.headerbar #site-description {
	display: none !important;
}

.headerbar .mobile-cosmos-banner {
	display: none;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.headerbar .cosmos-banner {
		width: 100% !important;
	}
}

.headerbar .cosmos-banner {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

.cosmosbanner-search-1 {
	top: 30px;
	left: 30px;
	position: absolute;
	z-index: 1;
}

.cosmosbanner-search-2 {
	top: 30px;
	right: 30px;
	position: absolute;
	z-index: 1;
}

.cosmosbanner-search-3 {
	bottom: 30px;
	left: 30px;
	position: absolute;
	z-index: 1;
}

.cosmosbanner-search-4 {
	bottom: 30px;
	right: 30px;
	position: absolute;
	z-index: 1;
}

.cosmosbanner-search-7 {
	bottom: 30px;
	left: 39%;
	position: absolute;
	z-index: 1;
}

.navbar #search-box{
	box-shadow:none;
	margin: auto;
	padding: 5px;
}
.rtl .navbar #search-box {
	float:left;
}

.navbar .button-search-end {
	border-radius: 0px 4px 4px 0px;
}
.rtl .navbar .button-search-end {
	border-radius: 4px 0px 0px 4px;
}

.cosmos-header {
	position: relative;
}

.cosmos-header #cosmosbanner_logo {
	width: auto;
	padding: 10px 13px 0 10px;
	position:absolute;
	z-index:1;
}

.rtl .cosmos-header #cosmosbanner_logo {
	padding: 10px 10px 0 13px;
}

.cosmos-header #search-overlay {
	position: absolute;
	z-index: 1;
}

#cosmos-ucp {
	display: none;
}


.hasjs #cosmos-ucp {
	display: block;
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
	.headerbar .cosmos-banner {
		border-radius: 0px !important;
	}
}
*/
Create the file: /ext/hifikabin/cosmosbanner/styles/we_universal/theme/moonphase.css and add the following content:

Code: Select all

.ltr .cosmos-header #moon {
	top: 40px; 
	right: 30px;
	position: absolute;
	display: none;
	z-index: 2;
}

.rtl .cosmos-header #moon {
	top: 40px; 
	left: 30px;
	position: absolute;
	display: none;
	z-index: 2;
}

.hasjs .cosmos-header #moon {
	display: block
}

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
	.cosmos-header #phase {
		height: 60px !important; 
		width:60px !important;
	}
}

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
	.ltr .cosmos-header #moon {
	top: 8px; 
	right: 10px;
	}
	.rtl .cosmos-header #moon {
	top: 8px; 
	left: 10px;
	}
	.ltr .cosmos-header #phase {
		height: 42px !important; 
		width:42px !important;
	}
}
Create the file: /ext/hifikabin/cosmosbanner/styles/we_universal/theme/sunspot.css and add the following content:

Code: Select all

.ltr .cosmos-header #current_sunspot {
	top: 30px; 
	right: 140px;
	text-decoration:none;
	clip-path: circle(50px at center);
	position:absolute;
	display: none;
	z-index: 10;
}

.rtl .cosmos-header #current_sunspot  {
	top: 11px; 
	left: 140px;
	text-decoration:none;
	clip-path: circle(50px at center);
	position:absolute;
	display: none;
	z-index: 10;
}

.hasjs .cosmos-header #current_sunspot {
	display: block
}

.cosmos-header #cosmos-sunspots {
	height: 118px; 
	width:118px;
}

img{
	color: white;
}

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
	.ltr .cosmos-header #current_sunspot {
		top: 15px; 
		right: 100px;
		clip-path: circle(31px at center);
	}
	.rtl .cosmos-header #current_sunspot {
		top: 15px; 
		left: 100px;
		clip-path: circle(31px at center);
	}
	.cosmos-header #cosmos-sunspots {
		height: 71px !important; 
		width:71px !important;
	}
}

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
	.ltr .cosmos-header #current_sunspot {
		top: 6px; 
		right: 60px;
		clip-path: circle(21px at center);
	}
	.rtl .cosmos-header #current_sunspot {
		top: 6px; 
		left: 60px;
		clip-path: circle(21px at center);
	}
	.cosmos-header #cosmos-sunspots {
		height: 47px !important; 
		width: 47px !important;
	}
}
Note that the .css needs to be tuned to get the desired look, and I am leaving it to you or the extension author to to that testing and tuning. Much of the .css above is a redundant copy of the prosilver version, so could be edited out.
v12mike
Registered User
Posts: 584
Joined: Thu Jul 09, 2015 5:03 pm
Contact:

Re: we_universal 3.2.3 vs. moonphases

by kjh-mov » Tue Jun 04, 2019 7:09 am

Oh. Thank you very much. <3
Wer nichts weiß, muss alles glauben.

Marie von Ebner-Eschenbach
User avatar
kjh-mov
Registered User
Posts: 82
Joined: Mon May 07, 2018 12:23 pm
Contact:

Re: we_universal 3.2.3 vs. moonphases

by kjh-mov » Thu Jun 06, 2019 8:21 am

Hello v12mike,

I'm ready.

Please look to kjh-move.de. There is something wrong with h1 and site description. I have two sitenames + site descriptions.

Thank you for your help

kjh-mov
Wer nichts weiß, muss alles glauben.

Marie von Ebner-Eschenbach
User avatar
kjh-mov
Registered User
Posts: 82
Joined: Mon May 07, 2018 12:23 pm
Contact:

Re: we_universal 3.2.3 vs. moonphases

by v12mike » Thu Jun 06, 2019 12:16 pm

I had left both there because I did not know which one looks better with your header, but I think now that the top one (from the extension style should be removed.

In the file /ext/hifikabin/cosmosbanner/styles/we_universal/template/event/inventea_dashboad_image_before.html find and delete the lines:

Code: Select all

	<div style="position:absolute;">
		<h1>{{ SITENAME }}</h1>
		<p>{{ SITE_DESCRIPTION }}</p>
		<p class="skiplink"><a href="#start_here">{{ lang('SKIP') }}</a></p>
	</div>
You should also I think, add an additional empty file: /ext/hifikabin/cosmosbanner/styles/we_universal/template/event/overall_header_stylesheets_after.html to get the right hand end of the header looking correct.
v12mike
Registered User
Posts: 584
Joined: Thu Jul 09, 2015 5:03 pm
Contact: