What page can I modify to make something appear on the page asking for a login?
This is the source to the b rowser.
https://pastebin.com/JJA5jG30
I used to edit this page, but now it no longer has any effect.
\usr\lib\lua\luci\view\header.htm
define something, since luci is already asking for a login....
I want to add an icon.
Which page should I modify?
Also changing file /www/index.html, the icon does not appear.
Help.
To add an icon to all pages, in the top bar.
You are editing the material theme yes? And you are editing things inside your device correct?
yes, yes
In the past there was a file independent of the theme, which appeared on all pages. But it is also fine to edit the material theme
Ok, but I need to know what you want to achieve.
Do you want to replace the "DLLL" text with an icon? Or is it something else?
I have to add two icon, one with external link, one with internal link to PDF manual.
If I can choose, this is a good position.
If I can't choose, different is good.
I dont have a board with stock openwrt at hand right now, but to achieve your desired result you should look into editing your theme's files.
That means setting up a build system in a linux machine, editing your theme, building a firmware image based on your theme, and flashing this custom image into your board.
But I don't know Java.
Isn't there a simple way?
Until yesterday, it was always simple.
All you had to do was edit an .html file and all pages had the icon.
I can easily edit the files in the machine, and see the result, but I don't know what to edit.
What files were you editing? Can you point a path to one of these html files?
The only html file that still exists is /www/index.html
But it is of no use, any change in it does not appear in the pages.
I would say that there are no more html pages.
I have to change some .js
the Bard IA gave me this advice.
However, all the files are different, in name and location, but none of the .css files have those keys.
To add two icons in the top right corner of all luci pages, you need to modify the material.css file. This file contains all the styles for the material theme.
Here are the steps to follow:
- Access the luci configuration. You can do this through the luci web interface or via SSH.
- Open the
material.cssfile. This file is located in the/etc/luci/themes/materialdirectory. - Add the following lines to the
material.cssfile:
`.header-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-right .icon {
margin-right: 10px;
}`
These lines define a new container .header-right for the right header elements and set its position and layout.
- Add the following lines to the
material.cssfile:
`.header-right .icon-1 {
background-image: url(/path/to/icon-1.png);
}
.header-right .icon-2 {
background-image: url(/path/to/icon-2.png);
}`
These lines define the icons .icon-1 and .icon-2. You need to replace /path/to/icon-1.png and /path/to/icon-2.png with the path to the icons you want to use.
- Add the following lines to the
material.cssfile:
`.header-right .icon-1:hover {
background-color: #000;
}
.header-right .icon-2:hover {
background-color: #000;
}`
These lines define the rollover effect for the icons.
- Save the
material.cssfile. - Restart the router.
Once the changes are made, the two icons will be displayed in the top right corner of all luci pages. When you hover over an icon, it will turn black.
Here is an example of how the CSS code might look:
`.header-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-right .icon {
margin-right: 10px;
}
.header-right .icon-1 {
background-image: url(/usr/share/luci/themes/material/icons/power.svg);
}
.header-right .icon-2 {
background-image: url(/usr/share/luci/themes/material/icons/settings.svg);
}
.header-right .icon-1:hover {
background-color: #000;
}
.header-right .icon-2:hover {
background-color: #000;
}`
In this example, the two icons are power.svg and settings.svg. These icons are located in the /usr/share/luci/themes/material/icons directory. When you hover over an icon, it will turn black.
You can modify the icons and links to your liking.
Additional notes:
- The
.header-rightcontainer is used to position the icons in the top right corner. - The
.iconclass is used to style the icons. - The
:hoverpseudo-class is used to define the rollover effect for the icons.
I hope this helps! Let me know if you have any other questions.
There you go, there is no html code for you to edit...
As for the advice, you could try modifying /www/luci-static/material/cascade.css
I added these lines to the file
/www/luci-static/material/cascade.css
But nothing appears. The images are not there, but at least a square should appear.
@import url(custom.css);
.header-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-right .icon {
margin-right: 10px;
}
.header-right .icon-1 {
background-image: url(/path/to/icon-1.png);
}
.header-right .icon-2 {
background-image: url(/path/to/icon-2.png);
}
.header-right .icon-1:hover {
background-color: #000;
}
.header-right .icon-2:hover {
background-color: #000;
}
.table{position:relative;display:table}.tr{display:table-row}.thead{display:table-header-group}.tbody{display:table-row-group}.tfoot{display:table-footer-group}.td,.th{line-height:normal;display:table-cell;text-align:center;
Added icon file, but same.
@import url(custom.css);
.header-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-right .icon {
margin-right: 10px;
}
.header-right .icon-1 {
background-image: url(/www/geva.png);
}
.header-right .icon-2 {
background-image: url(/www/link.png);
}
.header-right .icon-1:hover {
background-color: #000;
}
.header-right .icon-2:hover {
background-color: #000;
}
.table{position:relative;display:table}.tr{display:table-row}.thead{display:table-header-group}.tbody{display:table-row-group}.tfoot{display:table-footer-group}.td,.th{line-height:normal;display:table-cell;text-align:center;vertical-align:middle;padding:.5em}.th{font-weight:700}.tr.placeholder{height:4em}.tr.placeholder > .td{line-height:3;position:absolute;right:0;bottom:0;left:0;text-align:center!important;background:inherit}.td[width="33%"],.td[width="33%"
After you modify those files, do these steps to ensure your browser and luci are refreshing:
In the device CLI, do these commands:
rm -f /tmp/luci-indexcache*
rm -rf /tmp/luci-modulecache
luci-reload
Then, you open your browser settings and clear your browser cache. If you dont know how, These are the steps for chrome browser:
Open the three dots and click settings -> select privacy and security -> clear browsing data -> make sure cache is selected, and click clear data
I had previously restarted the router
Even using this method, precisely, no icon appears.
This file changed:
