Html Widget #1197

CrazyWolf13 · 2023-05-28T07:59:21Z

CrazyWolf13
May 28, 2023
Collaborator

Hi I'm trying to get my search bar working, in normal html file it works perfectly fine just not in dashy, any ideas why?

Here is my code:

widgets:

type: embed
options:
html: |

<title> Search Bar</title>

css: |
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

.container{
width: 100%;
min-height: 100vh;
padding: 5%;

display: flex;
align-items: center;
justify-content: center;

}

.search-bar{
width: 100%;
max-width: 700px;
background: rgba(255,255,255,0.2);
display: flex;
align-items: center;
border-radius: 60px;
padding: 10px 20px;
backdrop-filter: blur(4px) saturate(180%);
}

.search-bar input;
background: transparent;
flex: 1;
border: 0;
outline: none;
padding: 24px 20px;
font-size: 20px;
color: #cac7ff;
}

::placeholder{
color: #cac7ff;
}

.search-bar button img{
width: 25px;

}

.search-bar button{
border: 0;
border-radius: 50%;
width: 60px;
height: 60px;
background: #58629b;
cursor: pointer;
}

The goal of this is to get a transparent slightly blurred search bar working. Sadly if I paste this code or the css directly in the html as <style> dashy does not display anything

Answered by JustTetril

May 28, 2023

Hi CrazyWolf,
i don't really know the solution, because i'm a newbie. ^^ But i think your error leads you to the marked spot in the screenshot. There is missing something.:

View full answer

CrazyWolf13 · 2023-05-28T08:56:57Z

CrazyWolf13
May 28, 2023
Collaborator Author

If I do it together:

  - name: Google Search
    icon: hl-google
    displayData:
      sortBy: default
      rows: 1
      cols: 2
      collapsed: false
      hideForGuests: false
    widgets:
      - type: embed
        options:
        html: |
            <head>
                <style>
                    *{
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                        font-family: 'Poppins', sans-serif;
                    }

                    .container{
                        width: 100%;
                        min-height: 100vh;
                        padding: 5%;
                        background-image: linear-gradient(rgba(0,8,51,0.9),rgba(0,8,51,0.9));
                        display: flex;
                        align-items: center;
                        justify-content: center;

                    }

                    .search-bar{
                        width: 100%;
                        max-width: 700px;
                        background: rgba(255,255,255,0.2);
                        display: flex;
                        align-items: center;
                        border-radius: 60px;
                        padding: 10px 20px;
                        backdrop-filter: blur(4px) saturate(180%);
                    }

                    .search-bar input{
                        background: transparent;
                        flex: 1;
                        border: 0;
                        outline: none;
                        padding: 24px 20px;
                        font-size: 20px;
                        color: #cac7ff;
                    }

                    ::placeholder{
                        color: #cac7ff;
                    }

                    .search-bar button img{
                        width: 25px;

                    }

                    .search-bar button{
                        border: 0;
                        border-radius: 50%;
                        width: 60px;
                        height: 60px;
                        background: #58629b;
                        cursor: pointer;
                    }
                </style>
                <meta name="viewport" content=""width=device-width, initial-scale="1.0">
                <title> Search Bar</title>
            </head>
            <body>
            <div class="container">
                <form action="https://google.com/search" method="get" class="search-bar">
                    <input type="text" placeholder="Google search " name="q">
                    <button type="submit"><img src="icons/search.png"></button>
                </form>
            </div>
            </body>
        id: 0_1235_embed

I get an error:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Warning: 1 issue found in config file
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

/sections/2/widgets/0/options must be object

2 replies

JustTetril May 28, 2023

Hi CrazyWolf,
i don't really know the solution, because i'm a newbie. ^^ But i think your error leads you to the marked spot in the screenshot. There is missing something.:

Answer selected by Lissy93

CrazyWolf13 May 28, 2023
Collaborator Author

Hi CrazyWolf,
i don't really know the solution, because i'm a newbie. ^^ But i think your error leads you to the marked spot in the screenshot. There is missing something.:

Yes, you are right, I could resolve the issue, there was just a space missing. 🙃

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Html Widget #1197

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Html Widget #1197

CrazyWolf13 May 28, 2023 Collaborator

Replies: 1 comment · 2 replies

CrazyWolf13 May 28, 2023 Collaborator Author

JustTetril May 28, 2023

CrazyWolf13 May 28, 2023 Collaborator Author

CrazyWolf13
May 28, 2023
Collaborator

Replies: 1 comment 2 replies

CrazyWolf13
May 28, 2023
Collaborator Author

CrazyWolf13 May 28, 2023
Collaborator Author