linked images(icons) to the additional nav bar

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

linked images(icons) to the additional nav bar

Post by fliper4o »

Hello.

Sorry for creating a new topic but maybe it's just something simple & anybody can help rather than waiting for answer on an old topic.
So I've (with the help of some members) made some style changes on prosilver & running 3.2.2 More in here.
My request is to add link able images(icons) to the additional navigation bar without stretching it and to be aligned to the navbar and not to something else that have to make icons so tiny like 14x14 to not interrupt the default size of the nav bar.
So the question is how to add icons(normal=visible) there without interrupting the nav bar itself?
Any suggestions are welcomed :)
Let's give it a try, together.
fliper4o wrote: Fri Feb 23, 2018 1:29 pm Hi.
How can I add image + link on navbar
theme/theme_navbar.html
default:
Image
icons are 16x px and still so tiny compare to the nav bar
Image

Code: Select all

<nav class="theme-topnav">
	<a href="/">Home</a>
	<a href="/wiki">Wiki</a>
	<a href="/forum">Forum</a>
	<a href="/imageboard">Imageboard</a>
	<a href="URL">
<img src="images/4chan.png" width="16" height="16" title="4chan">
</a>
	<a href="URL">
<img src="images/8ch.png" width="21" height="16" title="8chan">
</a>
	<!-- EVENT overall_header_searchbox_before -->
	<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
		<div id="search-box" class="search-box theme-topnav-search" role="search">
			<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<button href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</button>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
			</form>
		</div>
	<!-- ENDIF -->
	<!-- EVENT overall_header_searchbox_after -->
</nav>
images are 43x43
Image

Any idea? Images to be bigger and not resizing the nav bar. Like search is aligned.
User avatar
Sniper_E
Registered User
Posts: 1134
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: linked images(icons) to the additional nav bar

Post by Sniper_E »

Those buttons are around 20px height so use your larger images and try using height="20" or max-height="20" in your codes.

Code: Select all

	<a href="URL">
<img src="images/4chan.png" height="20" title="4chan">
</a>
	<a href="URL">
<img src="images/8ch.png"  height="20" title="8chan">
</a>
Stating just the height, the width should auto adjust.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: linked images(icons) to the additional nav bar

Post by fliper4o »

The light blue navbar text boxes are 43x height without any image to interrupt it(that's the default).
Image
Compare to:
Image
but...even if I place icon 16x16 (maybe 14x14 will fit) they interrupt the default/normal navbar height.
Image
So my idea is how to align images to the navbar and NOT to interrupt search & Home/Wiki etc boxes
Maybe in a different file or different line/code etc
I would like to use maybe 24x height
User avatar
Mannix_
Registered User
Posts: 1838
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: linked images(icons) to the additional nav bar

Post by Mannix_ »

fliper4o wrote: Sat Feb 24, 2018 7:10 pm The light blue navbar text boxes are 43x height without any image to interrupt it(that's the default).
Image
That yellow outline is a padding the real height of those 4 buttons is 23px so your images can be max 23px high any higher and the navbar will get bigger.
Did I helped You? Consider a donation.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: linked images(icons) to the additional nav bar

Post by fliper4o »

Let's give it a try (23px)
Image
Image
: (
User avatar
Sniper_E
Registered User
Posts: 1134
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: linked images(icons) to the additional nav bar

Post by Sniper_E »

That added more space below the search bar. Do those images you use have transparent space above and below them?
Maybe they are causing the problem. Or is there a margin on the img tag somewhere?

Code: Select all

<a href="URL">
<img src="images/4chan.png" style="height: 23px;margin: 0" title="4chan">
</a>
Last edited by Sniper_E on Sat Feb 24, 2018 9:40 pm, edited 1 time in total.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: linked images(icons) to the additional nav bar

Post by fliper4o »

>transparent space
>yea I guess
ImageImage
>margin
>nope

Code: Select all

<nav class="theme-topnav">
	<a href="/">Home</a>
	<a href="/wiki">Wiki</a>
	<a href="/forum">Forum</a>
	<a href="/imageboard">Imageboard</a>
	<a href="URL">
<img src="images/4chan.png" height="23" title="4chan">
</a>
	<a href="URL">
<img src="images/8ch.png" height="23" title="8chan">
</a>
...
User avatar
Sniper_E
Registered User
Posts: 1134
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: linked images(icons) to the additional nav bar

Post by Sniper_E »

Yes those images had some extra space. Not sure if that was causing your problem though.

Try these images without the extra space and adjust your height in the img to look right.

Image Image

I had a thought also. Is there a .theme-topnav a { class in the css? The images are inside that class.
If that class has a padding on top and bottom then the image would need a -margin on top and bottom to compensate.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: linked images(icons) to the additional nav bar

Post by fliper4o »

okey, thanks !
I'll give it a try tomorow 'cuz I'm too tired now *-*

Have a good weekend, whatsoever : ))
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: linked images(icons) to the additional nav bar

Post by fliper4o »

check it'
still got a difference
User avatar
Sniper_E
Registered User
Posts: 1134
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: linked images(icons) to the additional nav bar

Post by Sniper_E »

Yes I see it. I see your <a has a class with padding and your images sit inside of that <a, I mentioned that above.

Code: Select all

.theme-topnav a {
    display: inline-block;
    padding: 0.5em 1em 0.5em 1em;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
}
Either make your image heights smaller or eliminate the padding around the images, or both.
Add this css to remove that space.

Code: Select all

.theme-topnav a img {
    margin: -0.5em 0;
}
If that still doesn't do it, try making your img height: 20px;

PeP TalK: You can do it!
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: linked images(icons) to the additional nav bar

Post by fliper4o »

Can I use it only for the image(s)?
Image
User avatar
Sniper_E
Registered User
Posts: 1134
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: linked images(icons) to the additional nav bar

Post by Sniper_E »

This is what I suggested for your stylesheet. Leave the padding alone.

Code: Select all

.theme-topnav a {
    display: inline-block;
    padding: 0.5em 1em;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
}

.theme-topnav a img {
    margin: -0.5em -1em;
    height: 23px;
}
And if need be, you can adjust the height on those images.
You could put the image height in the .theme-topnav a img class like above and take it out of the html codes.

Done.
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
fliper4o
Registered User
Posts: 267
Joined: Wed Mar 23, 2011 8:15 pm
Contact:

Re: linked images(icons) to the additional nav bar

Post by fliper4o »

Nice, thanks. 20px is fine :)
Btw how can I enlarge the space between the images(vertical space)
[textbox]space[img]space[img] etc
User avatar
Sniper_E
Registered User
Posts: 1134
Joined: Wed May 09, 2007 12:18 am
Location: Shreveport, Louisiana
Name: Ed Humphrey
Contact:

Re: linked images(icons) to the additional nav bar

Post by Sniper_E »

You an make the -margin less to get more space.

Code: Select all

.theme-topnav a img {
    margin: -0.5em -0.5em;
    height: 20px;
}
Image . -.. / .... ..- -- .--. .... .-. . -.--
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!

:!: Sniper_E Styles | phpbbmodders :!:
Post Reply

Return to “[3.2.x] Styles Support & Discussion”