[DEV] AntiqueRedWelcome

For style authors to post and receive feedback on 3.2.x styles still in development. Any development styles you wish to use on your live board should be installed with caution!
User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

[DEV] AntiqueRedWelcome

Post by Tastenplayer » Thu Oct 10, 2019 4:12 pm

Name of the style: AntiqueRedWelcome
Style Version: 3.2.8
phpBB Version: 3.2.8
Based on: prosilver
DEMODOWNLOAD
---
AntiqueRedWelcome.jpg
AntiqueRedWelcome_2.jpg
Description of the style:
The style is a derivative of my style ColoredWelcome
A silver-white-light grey style with dark red and black
Border background behind the whole style.
Background behind the dropdowns
The logo has to be inserted in two sizes in the image folder of the style.
Last edited by Tastenplayer on Mon Oct 14, 2019 5:23 pm, edited 2 times in total.
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Dan Stylez
Registered User
Posts: 263
Joined: Tue Jan 16, 2018 6:17 am

Re: [DEV] AntiqueRedWelcome

Post by Dan Stylez » Sat Oct 12, 2019 5:01 pm

Nice job :)
Image
When you’re hot, you’re hot... when you’re cold, you’re not hot.

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: [DEV] AntiqueRedWelcome

Post by Tastenplayer » Sun Oct 13, 2019 1:51 pm

Thank you!

Now that the demo is online, you can see that the font needs some improvement ( It was no longer possible to see the forest for the trees, subforumstitle and icons :) ).
Now the index looks better. But it's definitely not quite good yet. Font was / is generally far too big. Locally on the computer it never looks exactly the same or it is less noticeable.

Edit Oct. 14.:
Download 3.2.8_dev is added in my forum. Link is inserted in first topic.
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: [DEV] AntiqueRedWelcome

Post by Tastenplayer » Tue Oct 29, 2019 1:18 pm

What could you do if the response wasn't? But responsive it looks pretty weird (one crowded).
antiquered_navfooter.jpg
Like now, it only works if there are no further links on the right (or a maximum of two additional, in responsive shown only as icon) and not too many social links on the left.
antiquered_navfooter_responsive.jpg
antiquered_navfooter_responsive.jpg (22.08 KiB) Viewed 599 times
Until phpBB 4.0.0 comes out, it might have worked with a dropdown :lol:
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Dan Stylez
Registered User
Posts: 263
Joined: Tue Jan 16, 2018 6:17 am

Re: [DEV] AntiqueRedWelcome

Post by Dan Stylez » Tue Oct 29, 2019 2:44 pm

I would...
1 - Add a div around the socials (if there isn't already one)
2 - Add a responsive border at the top of the div
3 - Add responsive centre to the privacy links
4 - Add responsive centre to the social links

The result on small screens would be like...
Image
Image
When you’re hot, you’re hot... when you’re cold, you’re not hot.

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: [DEV] AntiqueRedWelcome

Post by Tastenplayer » Tue Oct 29, 2019 3:22 pm

Yeah, it looks good!
But doesn't change the fact that if you want to add more links, they won't disappear in a dropdown.
In addition, it should look similar to the navbar in the header, which is no longer the case.
Maybe you're right and it's better this way.
What I don't like so much is that the Navbar footer is now again higher and therefore looks clumsy (in the small phones in any case), which somehow destroys the overall picture of the style a bit. But maybe I'm just too picky :) .
I'm just not the mobile type. Many styles look different with a smaller display anyway. On a big display it sometimes looks quite lean (e.g. with only two links in the middle).
My dropdown always looks like this (although it is clearly stated that the links should remain on the right until the end)
dropdown_navfooter.jpg
But I can figure it out.
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Dan Stylez
Registered User
Posts: 263
Joined: Tue Jan 16, 2018 6:17 am

Re: [DEV] AntiqueRedWelcome

Post by Dan Stylez » Tue Oct 29, 2019 4:25 pm

Ahh I didn't realise that you wanted them to change into a dropdown, it shouldn't be to difficult to copy the method from the top navbar, remember not to delete the data-skip-responsive bits from the code.
Image
When you’re hot, you’re hot... when you’re cold, you’re not hot.

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: [DEV] AntiqueRedWelcome

Post by Tastenplayer » Tue Oct 29, 2019 4:34 pm

Yes it appears simple, but everything always disappears in the dropdown :-) (despite last responsive true)

Another variant, which is a bit huge for many social icons in responsiveness.
antiquered_navfooter2.jpg
(changed into smaller buttons)
Up to 590px these number of buttons are in a line.
antiquered_navfooter4.jpg
Now I have to search one </div> Error. There is something wrong with the whole footer configuration.
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Mannix_
Registered User
Posts: 566
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: [DEV] AntiqueRedWelcome

Post by Mannix_ » Tue Oct 29, 2019 7:38 pm

Tastenplayer wrote:
Tue Oct 29, 2019 4:34 pm
Yes it appears simple, but everything always disappears in the dropdown :-) (despite last responsive true)
data-last-responsive="true" doesn't prevent from link being hidden in the dropdown the skip one does according to this old post
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: [DEV] AntiqueRedWelcome

Post by Tastenplayer » Tue Oct 29, 2019 7:53 pm

Thank you, but for some reason it didn't work out (All links always ended up in the dropdown and on the right everything was empty). I will leave it as it is for the moment. One don't have to insert 50 social buttons. I'll try the drop-down later.
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Dan Stylez
Registered User
Posts: 263
Joined: Tue Jan 16, 2018 6:17 am

Re: [DEV] AntiqueRedWelcome

Post by Dan Stylez » Tue Oct 29, 2019 8:06 pm

This HTML code works, I left the span on the socials for the dropdown view - but that can be deleted.
Feel free to compare the code with your existing code.

The CSS code is just what I used to get for testing - so can be changed/deleted etc.

Screen Shot:
Image

HTML:

Code: Select all

<div class="navbar responsive-bottom-navbar" role="navigation">
	<div class="inner">

	<ul id="nav-footer" class="nav-footer linklist" role="menubar">
		<li class="breadcrumbs">
			<!-- IF U_SITE_HOME -->
				{% spaceless %}
				<span class="crumb">
					<a href="{U_SITE_HOME}" data-navbar-reference="home">
						<i class="icon fa-home fa-fw" aria-hidden="true"></i><span>{L_SITE_HOME}</span>
					</a>
				</span>
				{% endspaceless %}
			<!-- ENDIF -->
			<!-- EVENT overall_footer_breadcrumb_prepend -->
			{% spaceless %}
			<span class="crumb">
				<a href="{U_INDEX}" data-navbar-reference="index">
					<!-- IF not U_SITE_HOME --><i class="icon fa-home fa-fw" aria-hidden="true"></i><!-- ENDIF --><span>{L_INDEX}</span>
				</a>
			</span>
			{% endspaceless %}
			<!-- EVENT overall_footer_breadcrumb_append -->
		</li>
		<!-- IF U_WATCH_FORUM_LINK and not S_IS_BOT -->
			<li data-last-responsive="true">
				<a href="{U_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}" data-ajax="toggle_link" data-toggle-class="icon <!-- IF S_WATCHING_FORUM -->fa-check-square-o<!-- ELSE -->fa-square-o<!-- ENDIF --> fa-fw" data-toggle-text="{S_WATCH_FORUM_TOGGLE}" data-toggle-url="{U_WATCH_FORUM_TOGGLE}">
					<i class="icon <!-- IF S_WATCHING_FORUM -->fa-square-o<!-- ELSE -->fa-check-square-o<!-- ENDIF --> fa-fw" aria-hidden="true"></i><span>{S_WATCH_FORUM_TITLE}</span>
				</a>
			</li>
		<!-- ENDIF -->

		<!-- EVENT overall_footer_timezone_before -->
		<li class="rightside">{S_TIMEZONE}</li>
		<!-- EVENT overall_footer_timezone_after -->
		<!-- IF not S_IS_BOT -->
			<li class="rightside">
				<a href="{U_DELETE_COOKIES}" data-ajax="true" data-refresh="true" role="menuitem">
					<i class="icon fa-trash fa-fw" aria-hidden="true"></i><span>{L_DELETE_COOKIES}</span>
				</a>
			</li>
			<!-- IF S_DISPLAY_MEMBERLIST -->
				<li class="rightside" data-last-responsive="true">
					<a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}" role="menuitem">
						<i class="icon fa-group fa-fw" aria-hidden="true"></i><span>{L_MEMBERLIST}</span>
					</a>
				</li>
			<!-- ENDIF -->
		<!-- ENDIF -->
		<!-- EVENT overall_footer_teamlink_before -->
		<!-- IF U_TEAM -->
			<li class="rightside" data-last-responsive="true">
				<a href="{U_TEAM}" role="menuitem">
					<i class="icon fa-shield fa-fw" aria-hidden="true"></i><span>{L_THE_TEAM}</span>
				</a>
			</li>
		<!-- ENDIF -->
		<!-- EVENT overall_footer_teamlink_after -->
		<!-- IF U_CONTACT_US -->
			<li class="rightside" data-last-responsive="true">
				<a href="{U_CONTACT_US}" role="menuitem">
					<i class="icon fa-envelope fa-fw" aria-hidden="true"></i><span>{L_CONTACT_US}</span>
				</a>
			</li>
		<!-- ENDIF -->
	</ul>

	<ul id="nav-main" class="nav-main linklist" role="menubar">
		<li id="quick-links" class="quick-links dropdown-container responsive-menu" data-skip-responsive="true">
			<a href="#" class="dropdown-trigger">
				<i class="icon fa-bars fa-fw" aria-hidden="true"></i><span class="bottom-navbar-quick-links-span">{L_QUICK_LINKS}</span>
			</a>
		<div class="dropdown">
			<div class="pointer"><div class="pointer-inner"></div></div>
			<ul class="dropdown-contents" role="menu"></ul>
		</div>
		</li>

		<li data-last-responsive="true">
			<a href="http://www.rssfeeds.com/" target="_blank" rel="help" title="RSS 1" role="menuitem">
				<i class="icon fa-rss social-icon" aria-hidden="true"></i><span class="socials-span">RSS 1</span>
			</a>
		</li>
		<li data-last-responsive="true">
			<a href="http://www.facebook.com/" target="_blank" title="Facebook 1" role="menuitem">
				<i class="icon fa-facebook social-icon" aria-hidden="true"></i><span class="socials-span">Facebook 1</span>
			</a>
		</li>
		<li data-last-responsive="true">
			<a href="http://www.twitter.com/" target="_blank" title="Twitter 1" role="menuitem">
				<i class="icon fa-twitter social-icon" aria-hidden="true"></i><span class="socials-span">Twitter 1</span>
			</a>
		</li>
		<li data-last-responsive="true">
			<a href="http://www.rssfeeds.com/" target="_blank" rel="help" title="RSS 2" role="menuitem">
				<i class="icon fa-rss social-icon" aria-hidden="true"></i><span class="socials-span">RSS 2</span>
			</a>
		</li>
		<li data-last-responsive="true">
			<a href="http://www.facebook.com/" target="_blank" title="Facebook 2" role="menuitem">
				<i class="icon fa-facebook social-icon" aria-hidden="true"></i><span class="socials-span">Facebook 2</span>
			</a>
		</li>
		<li data-last-responsive="true">
			<a href="http://www.twitter.com/" target="_blank" title="Twitter 2" role="menuitem">
				<i class="icon fa-twitter social-icon" aria-hidden="true"></i><span class="socials-span">Twitter 2</span>
			</a>
		</li>
		<li data-last-responsive="true" class="right-side-links">
			<a href="{{ lang('TERMS_LINK') }}" title="{{ lang('PRIVACY_LINK') }}" role="menuitem">
				<i class="icon fa-user-secret fa-fw" aria-hidden="true"></i><span>{{ lang('PRIVACY_LINK') }}</span>
			</a>
		</li>
		<li data-last-responsive="true" class="right-side-links">
			<a href="{{ U_TERMS_USE }}" title="{{ lang('TERMS_LINK') }}" role="menuitem">
				<i class="icon fa-pencil fa-fw" aria-hidden="true"></i><span>{{ lang('TERMS_LINK') }}</span>
			</a>
		</li>
	</ul>

	</div>
</div>

CSS:

Code: Select all

/* Hide Socials Span */
.navbar.responsive-bottom-navbar .socials-span {
	display: none;
}

/* Float Privacy & Terms Links To The Right */
.navbar.responsive-bottom-navbar ul.linklist > li.right-side-links {
	float: right;
	margin-right: 0;
	margin-left: 7px;
}

/* Social Icons Background */
.navbar.responsive-bottom-navbar .social-icon {
	background-color: #FFFFFF;
	height: 24px;
	width: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 3px;
}

/* Social Icons Right Padding */
.navbar.responsive-bottom-navbar .social-icon::before {
	padding-right: 0
}

/* Add Top Border & Padding To Socials Section */
.navbar.responsive-bottom-navbar .nav-main {
	border-top: 1px solid #FFFFFF;
	padding-top: 4px;
}

/* Responsive
-------------------------------------------------------------- */
@media (max-width: 500px) {
	/* Show The Quick Links Span */
	.navbar.responsive-bottom-navbar .bottom-navbar-quick-links-span {
		display: inherit;
	}

	/* Show Socials Span */
	.navbar.responsive-bottom-navbar .socials-span {
		display: initial;
	}

	/* Social Icons Normal */
	.navbar.responsive-bottom-navbar .social-icon {
		background-color: transparent;
		height: auto;
		width: 1.28571429em;
		line-height: 1;
	}
}
Image
When you’re hot, you’re hot... when you’re cold, you’re not hot.

User avatar
Mannix_
Registered User
Posts: 566
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

Re: [DEV] AntiqueRedWelcome

Post by Mannix_ » Wed Oct 30, 2019 2:40 pm

Tastenplayer wrote:
Tue Oct 29, 2019 7:53 pm
Thank you, but for some reason it didn't work out (All links always ended up in the dropdown and on the right everything was empty). I will leave it as it is for the moment. One don't have to insert 50 social buttons. I'll try the drop-down later.
are you sure the changes applied and you are not viewing a cached version of that file? Check with inspect element if the link have the skip attribute and not last
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Want me to port a style to 3.2.x etc. contact me here or on twitter.

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: [DEV] AntiqueRedWelcome

Post by Tastenplayer » Wed Oct 30, 2019 8:32 pm

Thanks Dan Stylez for your help.
Then I was too fast with my beta version.
Of course I'll check it out first. Actually I wanted to upload the beta version, but I don't get it because I first have to get rid of unwanted visitors in the keyboard forum.
Getting the response right everywhere is a bit tricky with this style.
Check with inspect element if the link have the skip attribute and not last.
Yes skip element of course!
AntiqueRedWelcomeIndex_beta.jpg
Edit:
Great! Here on the run with the code of Dan Stylez. Of course I have to have a closer look. But it definitely looks better. But was that such a good idea of mine, with the social buttons in the dropdown? Maybe I should still make the social buttons under the navbar. Then you can insert other links in the navbar. Somehow the dropdown should go up, right?
AntiqueredNavFooterDanStylez.jpg
Edit 31.10
This does not work in every display size with the social icons Dropdown.
dropdown_navfooter.jpg
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Tastenplayer
Registered User
Posts: 378
Joined: Thu Jul 03, 2014 9:20 pm
Location: Switzerland
Name: Jutta Koliofotis
Contact:

Re: [DEV] AntiqueRedWelcome

Post by Tastenplayer » Thu Oct 31, 2019 8:42 pm

I thought I finally did. But it's definitely not as simple as it seems at first.
Dropdown nav footer antiquered.jpg
----
As long as there were only social icons in the dropdown everything was right now (Picture1)

However, as soon as there are two or three more links on the right, the width of the dropdown is no longer quite right. The font of the lower links is not fully displayed. If it has font next to the social icons, it's true, problem exists only if the social icons are without text. (Image2)

If I make a padding-right 20px for the dropdown content, it seems to be correct again (picture3) However, I still have to check whether this is not transferred to other dropdowns after all. But if that's true, with a longer link. Actually it should automatically become wider, which is not the case.

But if you only have the social icons and no further links, then the icons are no longer centered (picture 4). But somewhere, I guess, you have to be willing to compromise.

If you make the social icons in the navbar as icons with background, it definitely does not work in every display size.

Edit: 1.11.
With padding-right 20px it is definitely no problem, no matter how long a link name is. It just looks a bit strange.
Socialdropdown with link.png
Socialdropdown with link.png (34.32 KiB) Viewed 365 times
Demo is updated
My phpBB Style Board & MoreFlowerPower 3.2.8 Screenshots & Download
Be the best version of yourself rather than a bad copy of someone else!
Excuse me for my English, but I learned the language by speaking to people and not at school.

User avatar
Dan Stylez
Registered User
Posts: 263
Joined: Tue Jan 16, 2018 6:17 am

Re: [DEV] AntiqueRedWelcome

Post by Dan Stylez » Sun Nov 03, 2019 11:09 pm

From a quick look my suggestions would be...

1 - This one would take a bit more work, but there is also a dropdown on the right side of the lower navbar - you could put privacy/terms/addresses into a dropdown on the right side and leave the left side dropdown for socials.

2 - You could try leaving the span on the social media icons in the drop down (not on the normal size screen) so that it matches the "addresses" link...
Image
These of course don't need to be in the center.

Code: Select all

.responsive-bottom-navbar .dropdown li a {
	padding: 0;
}

.responsive-bottom-navbar .right-side-links.clone.clone-last span {
	margin-right: 8px;
	margin-left: 4px;
}

.responsive-bottom-navbar .right-side-links.clone.clone-last {
	padding: 2px 4px 0 8px;
}

.responsive-bottom-navbar .right-side-links.clone.clone-last .icon {
	font-size: 18px;
}


.responsive-bottom-navbar ul.dropdown-contents > li {
	padding-right: 0 !important;
	text-align: center;
}

.navbar.responsive-bottom-navbar .dropdown-contents .social-icon {
	padding: 4px;
}

.navbar.responsive-bottom-navbar .socials-span {
	display: inline-block !important;
}

3 - Centre social icons...
Image
Code is the same as above, but without the .social-span inline-block on the last line.


*The 2x important in the code are there because you have them in your code, you shouldn't need to add 20px padding to them to make them display correctly or the 2x important.

The dropdowns have a max-height: 300px; you could adjust that for the socials one, your pink icons are a different size to the socials, you could add a responsive code so that when they are in the dropdown they become the same size.

By the way the style looks really nice and I think it's a great idea to use the bottom navbar for socials.
Image
When you’re hot, you’re hot... when you’re cold, you’re not hot.

Post Reply

Return to “[3.2.x] Styles in Development”