[SOLVED][html] how to change the search result

Manix · 2022-04-30 16:53:30

cheers,

I use this block for my firefox home page:

...

<font size="5">
<div id="web_search">
<form action="https://duckduckgo.com/"> <method="GET" autocomplete="off">
<label for="q">~/</label>
<input autofocus
id="q"
name="q"
type="search"
placeholder="duckduckgo...">
</form>
</div>
</font>
...

the problem is that when I do a search I get the default theme of duckduckgo.

of course I tried to change the look here: https://duckduckgo.com/settings#general and add the result in the block but I always come back to the default theme of duckduckgo...

is there a way to change the appearance?

EXTRA:

when typing i have the flashing bar "beam". can this be changed to "block" or "underline"? like in a terminal.

Last edited by Manix (2022-05-01 07:49:58)

Trilby · 2022-04-30 17:58:46

I'm not sure why you are getting the default theme - that html block works fine for me and I get my preferred theme in the search results. Can you provide the full page source (of your homepage)? And / or can you confirm you get the same problematic results with a minimal test page (e.g., just the code included above)?

As for the caret (aka "cursor" in the text-input field) there is a working draft for css attributes for caret-shape which includes options for both "block" and "underscore" among others, but 1) I don't believe this is supported in any major browsers yet, and 2) if / when it is supported, you'd almost certainly need and HTML5 page - the use of the <font> tag would then not be supported (but I'd argue that should really go anyways).

You can "fake" a block or underscore cursor now with a bit of css gymnastics, duckduckgoing (or googling) for "html input caret shape" should give you plenty of examples of how to do so - it's up to you to decide if that's really worth it.

EDIT: I suspect this might depend on the home page doctype declaration, but I can use the above snippet with no doctype (for which my browser defaults to html5, or a html4 or xhtml 1.1 doctype declaration and it works fine for me on all three.

Last edited by Trilby (2022-04-30 18:07:38)

Manix · 2022-04-30 19:01:39

thank you for your quick response

As for the caret (aka "cursor" in the text-input field) there is a working draft for css attributes for caret-shape which includes options for both "block" and "underscore" among others, but 1) I don't believe this is supported in any major browsers yet, and 2) if / when it is supported, you'd almost certainly need and HTML5 page - the use of the <font> tag would then not be supported (but I'd argue that should really go anyways).
You can "fake" a block or underscore cursor now with a bit of css gymnastics, duckduckgoing (or googling) for "html input caret shape" should give you plenty of examples of how to do so - it's up to you to decide if that's really worth it.

I had already done some research on the subject and had not found much except as you say css gymnastics I give up for now the track.

I'm not sure why you are getting the default theme - that html block works fine for me and I get my preferred theme in the search results. Can you provide the full page source (of your homepage)? And / or can you confirm you get the same problematic results with a minimal test page (e.g., just the code included above)?

I get the same result with a minimal test page maybe you will know more with the attached file, (note that I voluntarily put the theme I want in duckduckgo)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>~</title>
        <!-- <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet"> -->
        <link rel="stylesheet" type="text/css" href="styles/style.css">
    </head>

    <body>
    <!-- Welcome screen -->
        <div id="main_window">
            <img id=leftImg src="./assets/img/image.jpg" class="image">
            <div id="content">
                <h1 class="title">Welcome NICO !</h1>
                <div id="date">
                    <script type="text/javascript">
                        function doDate() {
                            var str = "";
                            var months = new Array("Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre");
                            var clock = new Date();
                            var now = new Date();

                            str +=  now.getDate() + " " + months[clock.getMonth()] + ", " + clock.getFullYear() + " | " + ("0" + now.getHours()).slice(-2) +":" + ("0" + now.getMinutes()).slice(-2) + ":" + ("0" + now.getSeconds()).slice(-2);
                            document.getElementById("date").innerHTML = str;
                        }
                        setInterval(doDate, 1000);
                        doDate();
                    </script>
                </div>

        <!-- Web search -->
            <font size="5">
                <div id="web_search">
                    <form action="https://duckduckgo.com/?k1=-1&kak=-1&kax=-1&kaq=-1&kap=-1&kao=-1&kau=-1&k7=2e3440&kae=d&k9=d8dee9&kaa=a5abb6&k8=d8dee9&kx=81a1c1&kj=3b4252&k21=373e4d&kf=-1&k18=1"> <method="GET" autocomplete="off">
                        <label for="q">~/</label>
                            <input  autofocus
                                    id="q"
                                    name="q"
                                    type="search"
                                    placeholder="duckduckgo...">
                    </form>
                </div>
            </font>

        <!-- Links -->
                <nav>
                    <div id=links_container>
                        <ul>
                            <h1 class="subtitle">Fréquent</h1>
                                <li><a href="https://archlinux.org/">Archlinux</a></li>
                        </ul>
                        <ul>
                            <h1 class="subtitle">Media</h1>
                                <li><a href="https://www.twitch.tv/">Twitch</a></li>
                                <li><a href="https://www.youtube.com/">YouTube</a></li>
                                <li><a href="https://www.reddit.com/">Reddit</a></li>
                        </ul>
                        <ul>
                            <h1 class="subtitle">Divers</h1>
                                <li><a href="https://www.deepl.com/translator">Traduction</a></li>
                                <li><a href="https://github.com/login">Github</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
    </body>
</html>

EDIT: I suspect this might depend on the home page doctype declaration, but I can use the above snippet with no doctype (for which my browser defaults to html5, or a html4 or xhtml 1.1 doctype declaration and it works fine for me on all three.

being very novice in the html language and not knowing the types of declaration then of how to use them, I prefer if that does not disturb you that you indicate me the step has to follow. by thanking you

Last edited by Manix (2022-04-30 19:05:48)

Trilby · 2022-04-30 19:11:23

Thanks. I tested with that homepage html file and it still works fine for me - but I'm not using firefox. Sorry I don't have any more thoughts on the main problem.

Manix wrote:

being very novice in the html language and not knowing the types of declaration then of how to use them...

Your html file is actually HTML5 which is what I'd recommend because you use "<!DOCTYPE html>" as the first line. However, the <font> tag is not supported in HTML5 - so if it works at all, it might not for long. Font size should generally be set with CSS (e.g., in your style.css or in an inline style attribute on the 'div' element).

Manix · 2022-04-30 19:47:46

Thanks. I tested with that homepage html file and it still works fine for me - but I'm not using firefox. Sorry I don't have any more thoughts on the main problem.

It would be a shame if firefox could not display it correctly, I will try in chrome tomorrow

Your html file is actually HTML5 which is what I'd recommend because you use "<!DOCTYPE html>" as the first line. However, the <font> tag is not supported in HTML5 - so if it works at all, it might not for long. Font size should generally be set with CSS (e.g., in your style.css or in an inline style attribute on the 'div' element).

looking at the css file I notice under "body" there is :

font-family: 'Iceland', cursive;

maybe this is not good knowing that I use fontconfig to replace the system-wide fonts.

I attach the css file and the fontconfig. you may see something unusual. thank you

css : http://0x0.st/oAbz.txt

fontconfig :

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>

<alias>
  <family>serif</family>
  <prefer><family>Tinos Nerd Font</family></prefer>
  <!-- <prefer><family>    </family></prefer> -->
</alias>
<alias>
  <family>sans-serif</family>
  <prefer><family>Arimo Nerd Font</family></prefer>
</alias>
<alias>
  <family>sans</family>
  <prefer><family>Arimo Nerd Font</family></prefer>
</alias>
<alias>
  <family>monospace</family>
  <prefer><family>Cousine Nerd Font</family></prefer>
</alias>

</fontconfig>

Last edited by Manix (2022-04-30 19:51:42)

lupo.lupov · 2022-04-30 20:39:24

About dark theme - just put a hidden field with parameter responsible for the theme

<form action="https://duckduckgo.com/" method="GET" autocomplete="off">
     <label for="q">~/</label>
     <input type="hidden" name="kae" value="d" />
     <input  autofocus
            id="q"
            name="q"
            type="search"
            placeholder="duckduckgo...">
</form>

All available parameters you can find here https://duckduckgo.com/params

Manix · 2022-05-01 07:49:14

About dark theme - just put a hidden field with parameter responsible for the theme

<form action="https://duckduckgo.com/" method="GET" autocomplete="off">
     <label for="q">~/</label>
     <input type="hidden" name="kae" value="d" />
     <input  autofocus
            id="q"
            name="q"
            type="search"
            placeholder="duckduckgo...">
</form>

All available parameters you can find here https://duckduckgo.com/params

by following your instructions it works perfectly! it's not very aesthetic but it does the job i took the opportunity to remove the line font-family: 'Iceland', cursive; in the css file. it looks like this now :

        <!-- Web search -->
            <font size="5">
                <div id="web_search">
                    <form action="https://duckduckgo.com/"> <method="GET" autocomplete="off">
                    <input type="hidden" name="k1" value="-1" />
                    <input type="hidden" name="kak" value="-1" />
                    <input type="hidden" name="kax" value="-1" />
                    <input type="hidden" name="kaq" value="-1" />
                    <input type="hidden" name="kap" value="-1" />
                    <input type="hidden" name="kao" value="-1" />
                    <input type="hidden" name="kau" value="-1" />
                    <input type="hidden" name="k7" value="2e3440" />
                    <input type="hidden" name="kae" value="d" />
                    <input type="hidden" name="k9" value="d8dee9" />
                    <input type="hidden" name="kaa" value="a5abb6" />
                    <input type="hidden" name="k8" value="d8dee9" />
                    <input type="hidden" name="kx" value="81a1c1" />
                    <input type="hidden" name="kj" value="3b4252" />
                    <input type="hidden" name="k21" value="373e4d" />
                    <input type="hidden" name="kf" value="-1" />
                    <input type="hidden" name="k18" value="1" />
                        <label for="q">~/</label>
                            <input  autofocus
                                    id="q"
                                    name="q"
                                    type="search"
                                    placeholder="duckduckgo...">
                    </form>
                </div>
            </font>

thanks again <3 solved

Arch Linux

#1 2022-04-30 16:53:30

[SOLVED][html] how to change the search result

#2 2022-04-30 17:58:46

Re: [SOLVED][html] how to change the search result

#3 2022-04-30 19:01:39

Re: [SOLVED][html] how to change the search result

#4 2022-04-30 19:11:23

Re: [SOLVED][html] how to change the search result

#5 2022-04-30 19:47:46

Re: [SOLVED][html] how to change the search result

#6 2022-04-30 20:39:24

Re: [SOLVED][html] how to change the search result

#7 2022-05-01 07:49:14

Re: [SOLVED][html] how to change the search result

Board footer