This topic is locked

Insert Icons into the top bar (not the header file)

12/6/2025 12:43:42
PHPRunner General questions
D
DealerModules authorDevClub member

How can I insert icons into the top bar near the profile and login area in the top right.
I know that I can add them to the header file but that shows up 1 line below the top bar.
Trying to add them to the top bar. Below is a quick example:

img alt

Thanks for any direction
Paul

ChatGPT 12/6/2025

To insert icons into the top bar near the profile and login area in PHPRunner, you'll typically need to customize the template files directly. Here's a step-by-step guide on how to do this:

  1. Open Your PHPRunner Project: Start by opening your project in PHPRunner.


  2. Navigate to the Template: In the left panel, go to the "Templates" section. You want to edit the layout of the top bar, which is usually found in the main template file.


  3. Edit the Header Template:

    • Look for the Header.php or similar file that controls the layout of the top bar.
    • You can also check the styles or css files for any specific classes related to the top bar.


  4. Add Your Icons:

    • Locate the section of the code where the profile and login area is defined. It usually includes HTML for user links.
    • Insert your icon HTML code directly in this area. For example, you might use Font Awesome or any other icon library you prefer. Here’s an example using Font Awesome:
      <div class="top-bar">
      <a href="profile.php" title="Profile"><i class="fa fa-user"></i></a>
      <a href="login.php" title="Login"><i class="fa fa-sign-in"></i></a>
      <a href="settings.php" title="Settings"><i class="fa fa-cog"></i></a>
      </div>

    • Ensure that the icon HTML is styled properly to fit within the top bar.


  5. Style Your Icons:

    • You may need to add custom CSS to ensure that the icons align correctly and have the desired size and spacing. You can do this in your CSS file:
      .top-bar a {
      display: inline-block;
      padding: 10px;
      color: #fff; /* Change as needed */
      }

    • Adjust the styles as necessary to match your design.


  6. Test Your Changes:

    • After making your changes, preview your application to see how it looks. Make sure the icons appear in the top bar as expected and that they are functioning correctly.


  7. Save and Deploy: Once you’re satisfied with the changes, save your project and deploy it.



By following these steps, you should be able to add icons to the top bar in PHPRunner effectively. If you encounter any specific issues or errors, feel free to ask for more detailed assistance!

D
DealerModules authorDevClub member 12/6/2025

Anyone else besides ChatGPT?