linked images(icons) to the additional nav bar

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
User avatar
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 » Sat Feb 24, 2018 3:20 pm

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: 722
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 » Sat Feb 24, 2018 4:54 pm

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 :!:

User avatar
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 » 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
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: 324
Joined: Sun Oct 25, 2015 2:56 pm
Contact:

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

Post by Mannix_ » Sat Feb 24, 2018 8:02 pm

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.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
My CDB contributions . Like my work? Want me to do make a style just for you? PM here or on twitter.
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Need some graphics? PM here or on twitter.

User avatar
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 » Sat Feb 24, 2018 8:33 pm

Let's give it a try (23px)
Image
Image
: (

User avatar
Sniper_E
Registered User
Posts: 722
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 » Sat Feb 24, 2018 9:15 pm

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 :!:

User avatar
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 » Sat Feb 24, 2018 9:39 pm

>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: 722
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 » Sat Feb 24, 2018 9:53 pm

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 :!:

User avatar
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 » Sat Feb 24, 2018 10:30 pm

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

Have a good weekend, whatsoever : ))

User avatar
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 » Sun Feb 25, 2018 1:43 pm

check it'
still got a difference

User avatar
Sniper_E
Registered User
Posts: 722
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 » Mon Feb 26, 2018 7:56 am

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 :!:

User avatar
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 » Mon Feb 26, 2018 5:43 pm

Can I use it only for the image(s)?
Image

User avatar
Sniper_E
Registered User
Posts: 722
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 » Mon Feb 26, 2018 6:08 pm

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 :!:

User avatar
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 » Tue Feb 27, 2018 9:29 am

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: 722
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 » Tue Feb 27, 2018 5:20 pm

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”

Who is online

Users browsing this forum: No registered users and 5 guests