Black

Links and Pages Icon (black red) theme - Black

Links and Pages Icon (black red) theme

by durangod » Sat Mar 02, 2024 7:37 pm

CORRECTION: DO NOT do this code change i posted here, look at the reply by cobot, and also use fontawesome V4 font names not V5, use the link under the input on the config page to visit the V4 page with the V4 names...


I was curious why there are Home and Forums buttons and also search, login, and register links along with a login icon. I prefer the icons i dont see a reason to have the additional search, login and register links unless we use them as an image alt of some kind sort of thing.

links_and_icons.jpg

UPDATE:

Part of this answer is here viewtopic.php?t=2419106

Then looks like the rest of it is caused by the navbar secondary css. So looks like i will need to edit the css code (stylesheet.css)

Code: Select all

.navbar.secondary {
  color: #ef4a43;
  display: none;  /* added to remove secondary navbar */
}

Also if you install or use the phpbb official pages extension here is the icon that goes with that for the blackred theme. You will need this because the default icon from the extension has a white background.

Below are the modified gif and psd (photoshop) files if someone wants to do a better job :)

icon_pages.gif
icon_pages.gif (131 Bytes) Viewed 53 times

photoshop psd file

icon_pages.zip
(6.16 KiB) Downloaded 19 times

Hope this helps someone :)
Username is short for durango dave
User avatar
durangod
Registered User
Posts: 817
Joined: Tue Nov 03, 2009 1:26 pm
Location: USA East Texas
Name: Dave

Re: Links and Pages Icon (black red) theme

by cabot » Sun Mar 03, 2024 9:46 am

Hello,

For links that you want to hide, you can create a variable that will allow you to control how they are displayed.

Open _styles_config.html
  • Find:

    Code: Select all

    <!-- IF $FALSE -->
    	Do not edit code below!
    <!-- ENDIF -->
    Add before:

    Code: Select all

    {% DEFINE FORUMS_TAB_IN_NAVBAR = 1 %}
    {% DEFINE REDUNDANT_LINKS_BELOW_NAVBAR = 1 %}
Open navbar_header.html
  • Find:

    Code: Select all

    				<li class="tab forums selected" data-responsive-class="small-icon icon-forums">
    					<a class="nav-link" href="{U_INDEX}">{L_FORUMS}</a>
    				</li>
    Replace with:

    Code: Select all

    				{% if definition.FORUMS_TAB_IN_NAVBAR eq 1 %}
    				<li class="tab forums selected" data-responsive-class="small-icon icon-forums">
    					<a class="nav-link" href="{U_INDEX}">{L_FORUMS}</a>
    				</li>
    				{% endif %}
  • Find (x2):

    Code: Select all

    				<li class="small-icon icon-search{% if definition.SEARCH_IN_NAVBAR == 1 && definition.SEARCH_BOX %} responsive-hide{% endif %}"><a href="{U_SEARCH}">{L_SEARCH}</a></li>
    Replace with:

    Code: Select all

    				{% if definition.REDUNDANT_LINKS_BELOW_NAVBAR eq 1 %}
    				<li class="small-icon icon-search{% if definition.SEARCH_IN_NAVBAR == 1 && definition.SEARCH_BOX %} responsive-hide{% endif %}"><a href="{U_SEARCH}">{L_SEARCH}</a></li>
    				{% endif %}
  • Find:

    Code: Select all

    			<!-- IF not S_REGISTERED_USER -->
    				<li class="small-icon icon-login"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>
    				<!-- IF S_REGISTER_ENABLED -->
    					<li class="small-icon icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li>
    				<!-- ENDIF -->
    			<!-- ELSEIF not S_DISPLAY_SEARCH -->
    				<li><a href="{U_PROFILE}" class="small-icon icon-profile">{CURRENT_USERNAME_SIMPLE}</a></li>
    			<!-- ENDIF -->
    Replace with:

    Code: Select all

    			{% if definition.REDUNDANT_LINKS_BELOW_NAVBAR eq 1 %}
    			<!-- IF not S_REGISTERED_USER -->
    				<li class="small-icon icon-login"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a></li>
    				<!-- IF S_REGISTER_ENABLED -->
    					<li class="small-icon icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li>
    				<!-- ENDIF -->
    			<!-- ELSEIF not S_DISPLAY_SEARCH -->
    				<li><a href="{U_PROFILE}" class="small-icon icon-profile">{CURRENT_USERNAME_SIMPLE}</a></li>
    			<!-- ENDIF -->
    			{% endif %}
So far, this has done nothing to change the display.
But if you set 0 instead of 1 in the two lines added to _styles_config.html, the links will no longer be displayed.

Code: Select all

{% DEFINE FORUMS_TAB_IN_NAVBAR = 0 %}
{% DEFINE REDUNDANT_LINKS_BELOW_NAVBAR = 0 %}
This gives you greater flexibility, as you can simply change these values to display or hide the links depending on your mood. :)
Could this solution be right for you?


For the link icon added by the "Pages" extension, you can define a FontAwesome icon rather than an image, by entering its name as it is displayed on this page.
pages_icon.png
pages_icon.png (7.17 KiB) Viewed 47 times
User avatar
cabot
Jr. Style Validator
Posts: 1010
Joined: Sat Jan 07, 2012 4:16 pm

Re: Links and Pages Icon (black red) theme

by durangod » Sun Mar 03, 2024 10:57 pm

Hi, thanks ill add that code, awesome. Works great :)

As per the font awesome icon. I use font awesome all the time in my personal software but i was not able to get that field to accept the name. I tried several ways fa name-name , fa-regular fa-name, name-name, name, even tried it using the "i" wrap, and no luck.

Have you tested that option to see what the actualy syntax is? Ill do some more testing tomorrow on it to see if i can get it to work... :)

UPDATE: i did find this in the faq section
https://www.phpbb.com/customise/db/exte ... s/faq/1391

It does go over adding the font awesome icon. I thought since there was a input for the name that font awesome library was already installed and i just had to call the name. But looks like the font awesome css file is there in assets/css

As long as the FA css is there i should not have to add any new css other than just call the name as i originally thought, those instructions in faq must be outdated.

I also discovered that the link on the config page for fontawesome goes to V4 not the new version so the icon names are completely different, thats why they have files-0 as the default name because the FA naming conventions are for V4 not V5.

Link to V4 icons..
https://fontawesome.com/v4/icons/

Making better since now. yep thats it, tested with thumbs-up and it works....
Username is short for durango dave
User avatar
durangod
Registered User
Posts: 817
Joined: Tue Nov 03, 2009 1:26 pm
Location: USA East Texas
Name: Dave

Re: Links and Pages Icon (black red) theme

by cabot » Mon Mar 04, 2024 8:58 am

In fact, you shouldn't enter the fa- prefix in the extension field. That's why I told you to use the name of the icon as displayed on the linked page.

If the icon field is filled in (correctly), then this icon will be displayed automatically.
Example of HTML code used in template events:

Code: Select all

{% if link.ICON_FONT %}<i class="icon fa-{{ link.ICON_FONT }} fa-fw" aria-hidden="true"></i>{% endif %}
As you can see, the fa- prefix is hard-coded in the HTML and link.ICON_FONT returns the value of the field corresponding to the name of the icon.
User avatar
cabot
Jr. Style Validator
Posts: 1010
Joined: Sat Jan 07, 2012 4:16 pm

Re: Links and Pages Icon (black red) theme

by durangod » Mon Mar 04, 2024 12:39 pm

Thanks for the education, very much approciate your time. :)
Username is short for durango dave
User avatar
durangod
Registered User
Posts: 817
Joined: Tue Nov 03, 2009 1:26 pm
Location: USA East Texas
Name: Dave