Is there a way to customize the header bar in photonkit?

I am currently using photonkit.com to develop an application and I have encountered the following issue:

https://i.sstatic.net/0GFJK.png

As shown in the image, the header bar appears unattractive. I have searched extensively online for examples (without success) and could not find any reported problems on the Github page.

Potential solutions could include:

  • Disabling the app header bar (but then how would we manage the exit-minimize-maximize buttons?)
  • Changing the color of the top bar to avoid a double appearance.

I am reaching out in case the developer already has a solution in mind.

Below is the HTML code snippet:

<!DOCTYPE html>
<html>

<head>
    <title>Photon</title>

    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/photon.min.css">

    <!-- Javascript -->
    <script src="js/menu.js" charset="utf-8"></script>
</head>

<body>
    <div class="window">

        <header class="toolbar toolbar-header">
            <div class="toolbar-actions">
                <div class="btn-group">
                  <button class="btn btn-default">
                    <span class="icon icon-home"></span>
                  </button>
                  <button class="btn btn-default">
                    <span class="icon icon-folder"></span>
                  </button>
                  <button class="btn btn-default active">
                    <span class="icon icon-cloud"></span>
                  </button>
                  <button class="btn btn-default">
                    <span class="icon icon-popup"></span>
                  </button>
                  <button class="btn btn-default">
                    <span class="icon icon-shuffle"></span>
                  </button>
                </div>

                <button class="btn btn-default">
                  <span class="icon icon-home icon-text"></span>
                  Filters
                </button>

                <button class="btn btn-default btn-dropdown pull-right">
                  <span class="icon icon-megaphone"></span>
                </button>
              </div>
        </header>

        <!-- Your app's content goes inside .window-content -->
        <div class="window-content">
            <div class="pane-group">
                <div class="pane pane-sm sidebar">
                    <nav class="nav-group">
                        <h5 class="nav-group-title">Favorites</h5>
                        <span class="nav-group-item">
                <span class="icon icon-home"></span> connors
                        </span>
                        <span class="nav-group-item active">
                <span class="icon icon-light-up"></span> Photon
                        </span>
                        <span class="nav-group-item">
                <span class="icon icon-download"></span> Downloads
                        </span>
                        <span class="nav-group-item">
                <span class="icon icon-folder"></span> Documents
                        </span>
                        <span class="nav-group-item">
                <span class="icon icon-window"></span> Applications
                        </span>
                        <span class="nav-group-item">
                <span class="icon icon-signal"></span> AirDrop
                        </span>
                        <span class="nav-group-item">
                <span class="icon icon-monitor"></span> Desktop
                        </span>
                    </nav>
                </div>

                <div class="pane">
                    <table class="table-striped">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Kind</th>
                                <th>Date Modified</th>
                                <th>Author</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>bars.scss</td>
                                <td>Document</td>
                                <td>Oct 13, 2015</td>
                                <td>connors</td>
                            </tr>
                            <tr>
                                <td>base.scss</td>
                                <td>Document</td>
                                <td>Oct 13, 2015</td>
                                <td>connors</td>
                            </tr>
                            <tr>
                                <td>button-groups.scss</td>
                                <td>Document</td>
                                <td>Oct 13, 2015</td>
                                <td>connors</td>
                            </tr>
                            <tr>
                                <td>buttons.scss</td>
                                <td>Document</td>
                                <td>Oct 13, 2015</td>
                                <td>connors</td>
                            </tr>
                            <tr>
                                <td>docs.scss</td>
                                <td>Document</td>
                                <td>Oct 13, 2015</td>
                                <td>connors</td>
                            </tr>
                            <tr>
                                <td>forms.scss</td>
                                <td>Document</td>
                                <td>Oct 13, 2015</td>
                                <td>connors</td>
                            </tr>
                            <tr>
                                <td>grid.scss</td>
                                <td>Document</td>
                                <td>Oct 13, 2015</td>
                                <td>connors</td>
                            </tr>
                            <tr>
                                <td>icons.scss</td>
                                <td>Document</td>
                                <td>Oct 13, 2015</td>
                                <td>connors</td>
                            </tr>
                            <tr>
                                <td>images.scss</td>
                                <td>Document</td>
                                <td>Oct 13, 2015</td>
                                <td>connors</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</body>

</html>
cssmacos

Answer №1

As stated in the [electron documentation][1], you have the option to implement the following code in your app.js file:

If you are using Mac OS X 10.10 Yosemite or a newer version, there is a different method for creating a chromeless window. Instead of disabling both the titlebar and window controls by setting frame to false, you might prefer to hide the title bar while allowing your content to occupy the entire window space. In this case, you can still keep the window controls ("traffic lights") intact by utilizing the new titleBarStyle option:

var window = new BrowserWindow({ 'titleBarStyle': 'hidden' });

This approach would be considered optimal.

Answer №2

It appears that he is utilizing a combination of background-image and linear-gradient, requiring you to override these lines (background-image: none) in order to implement custom designs.

An alternative approach would be to disable those specific lines within the .toolbar section of the photon.(min.)css file.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with CSS animation functionality have been detected in the Edge browser

In this particular div, I have two spans enclosed. I've created a loader which features a circle filling up with red color repeatedly. While everything appears to be functioning smoothly in Google Chrome, there's a noticeable glitch when it comes ...

htmlcss

In order for my Wordpress child theme to function properly, it must be able to retrieve multiple style

I am currently developing a Wordpress child theme based on a parent theme that contains several style sheets in its directory. Here are a few examples of the navigation to these style sheets: parent-theme/style.css parent-theme/css/style.css parent-them ...

phpcsswordpressparent-child

Angular JS integration for optimal Bootstrap grid alignment

Recently, I have been exploring the Bootstrap framework and experimenting with grid alignment. When working with 4 columns, W3 schools recommends using the following row setup: <div class="row"> <div class="col-lg-3"> </div> ...

javascripthtmlcssangularjstwitter-bootstrap

"Create a responsive design featuring two columns on desktop and a single column on mobile using Flexbox layout

Seeking a solution for a flexible layout using flexbox: Requirements for Desktop Layout Consist of two responsive columns 1st column should occupy 30% of the width 2nd column should occupy 70% of the width Mobile Layout Specifications Single column t ...

javascriptcssreactjsflexbox

tips for positioning images and text in the center using css classes

Here's what I currently have: http://jsfiddle.net/nCs88/ Here's my goal: As a beginner, I am struggling to center the button images with the text. Any help would be greatly appreciated as this has been frustrating me for hours. ...

htmlcssimagetextblock

New to CSS: Having trouble with responsive design not showing up as expected

I am new to learning CSS. I have a task for my course where I need to style just one page (you can view the tablet mockup here: Mockup-tablet). However, I'm having trouble with my div elements not displaying correctly. On desktop, one is on the secon ...

htmlcss

Bringing files into a Mac computer after coding in Python on a Windows system

After successfully creating and running a Python program in PyCharm on Windows, an issue arose when a Mac user attempted to run the same code. The error messages appeared on their computer as follows: Error displayed in PyCharm on the Mac The error messag ...

pythonmacosfilepycharmpython-import

The importance of blending classes versus isolating classes in CSS selectors

Could somebody please direct me to the CSS hierarchy rules concerning "concatenated classes" versus "separated classes"? Furthermore, what are the correct terms for "concatenated classes" versus "separated classes" (I suspect that is why the documentation ...

csscss-selectors

Deactivate the ajax submission button when a key is pressed

There is a button on my Ajax form that, when clicked, displays to the user that it is currently "searching" by showing a small loading symbol while the database is being queried. Upon clicking the submit button, it triggers a function. This function disab ...

javascriptcssajaxgoogle-chrome

Integrate HTML forms seamlessly with Bootstrap

Currently, I am facing an issue while trying to align 2 forms side by side using the Bootstrap grid system. Despite following the documentation exactly, it doesn't seem to work and I can't figure out why. Here is the HTML code I'm using: ...

htmlcssbootstrap-4

Include additional content following the text enclosed by the span tag, but do not place it

Take a look at this screenshot: https://i.sstatic.net/zojKK.jpg This code snippet allows me to include emoji spans within a DIV. $('body').on('click', '.selectable-icons', function(e) { if (e.target.tagName.toLowerCase( ...

javascriptjqueryhtmlcss

Is my approach to using the linear-gradient hack for colored images incorrect?

Recently stumbled upon a tutorial on achieving this effect at https://css-tricks.com/tinted-images-multiple-backgrounds/ /* Method I attempted */ .tinted-image { background: /* top, transparent red, simulated with gradient */ linear-gradient( ...

htmlcss

What causes the difference in CSS border-bottom-width rendering between IE and Chrome?

My ASP:MENU is styled with some CSS properties, such as setting the 'height' and 'line-height' of each element to 15px. This design appears fine in Internet Explorer but seems too cramped in Chrome. Additionally, a 'border-bottom-s ...

asp.nethtmlcssweb

Using JQuery to animate CSS properties

I'm looking to create a unique effect in JavaScript where I can generate a random number to use in a CSS animation property. Specifically, I want this for a preloader that will have a randomized duration between 2 and 8 seconds. As you'll see in ...

javascriptjquerycss

Elevate Your Navbar's Hamburger Menu with Font Awesome SVG in React-Bootstrap!

Currently working with React-Bootstrap to create a Navbar. I have a desire to swap out the default hamburger menu icon provided by React-Bootstrap with a Font Awesome hamburger icon. Wondering what steps need to be taken in order to change the existing bu ...

csstwitter-bootstrapnavbarfont-awesomereact-bootstrap

What causes the active slide number to remain the same in Swiper JS pagination when using fractions?

I have been working on setting up an .image-slider__fraction block to display the active slide number out of the total number of slides. However, I am encountering an error in the JavaScript that says "Uncaught ReferenceError: myImageSLider is not defined" ...

javascripthtmljquerycssswiper.js

Add a symbol at the end of the input that signifies its value

I have a form field that expects a percentage as input, but I want to visually indicate to the user that they should enter a percent value. The challenge I face is that I want the percentage symbol to appear before the number in the input box, like this: ...

htmlcssreactjs

I'm looking to showcase the list in a navigation bar by clicking on the hamburger menu. I want to include the 'home' and 'about' text specifically

Having trouble implementing the hamburger menu functionality in my HTML/CSS project. When clicked on a shrunken screen, I want the 'Home' and 'About' text in the nav to appear stacked on top of each other. JS is causing me some difficul ...

javascripthtmlcss

Customizing the input placeholder for password fields in IE8 using jQuery

Currently, I have opted to use jQuery instead of the HTML5 placeholder attribute <input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this. ...

javascriptjquerycsshtml

The draggable functionality is malfunctioning once the image is enlarged with Jquery

When it comes to creating a viewport function using jquery.viewport, I'm faced with the challenge of integrating it with jQuery UI slider and a custom zoom function for images. I've also utilized a plugin to enhance the viewport functionality. T ...

javascriptjquerycsszooming