Sure!
You would just want to target this element like so:
html .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/8/3/8352b68….jpeg);
background-size: cover;
/* background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%); */
clip-path: ellipse(148% 70% at 91% -14%);
Here is how that looked locally when editing through Chrome’s inspector.
8 Likes
hequaye
February 10, 2022, 4:53pm
216
Yes but what if I want that to be the background without the 2 elements? @jordan-vidrine
2 Likes
hequaye
February 10, 2022, 4:57pm
217
I want to use this with the air theme because I like the boxes and category setup
2 Likes
So you want no grey area cutting into the background image?
If so, you would use the same code above, but unset the clip-path property.
html .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: url(https://d11a6trkgmumsb.cloudfront.net/original/3X/8/3/8352b68….jpeg);
background-size: cover;
clip-path: unset;
This actually looks really nice with your image!
7 Likes
jordan-vidrine
February 10, 2022, 7:14pm
220
5 posts were merged into an existing topic: Search banner theme component
f1r4s
February 10, 2022, 6:14pm
222
how to apply this code ? where to put it exactly please
Feel free to read through the following topics to get a better sense of how to customize the look and feel of your site
This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read.
What are themes and theme components?
A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features.
Let’s start with themes.
Themes
In general, themes are not supposed to be compatible wi…
As well as these:
Designer’s Guide to Discourse Themes
Developer’s guide to Discourse Themes
2 Likes
hequaye
February 10, 2022, 7:15pm
224
Thank you so much @jordan-vidrine so I have implemented the changes and this may not be on the theme necessarily but my versatile banner, but the background is duplicated across my versatile banner as well and this is the only change I made on discourse air
left: 0;
height: 100vh;
width: 100vw;
background: #003366;
clip-path: ellipse(148% 70% at 91% -14%);
background: url(https://i.ibb.co/GCcS8Zw/Abstract-futuristic-Molecules-technology-with-polygonal-shapes-on-dark-blue-background-Illustration.jpg);
clip-path: unset;
}
}
This is how my page looks now: is this something I need to change in versatile banner or something on the air theme?
I do not have a background image or color set for versatile banner.
Any suggestions?
1 Like
You can try background-size: cover; or play around with variations on that.
More info here could also be helpful background-size | CSS-Tricks - CSS-Tricks
2 Likes
hequaye
February 10, 2022, 7:19pm
226
Ahh gotcha, will do. It is the sizing when I zoom out the image just repeats:
You think I should remove the height and width padding too?
I’ll play around with the background-size: thank you!
2 Likes
hequaye
February 10, 2022, 7:21pm
227
.background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: url(https://i.ibb.co/GCcS8Zw/Abstract-futuristic-Molecules-technology-with-polygonal-shapes-on-dark-blue-background-Illustration.jpg);
background-size: cover;
clip-path: unset;
Works perfectly thank you!
3 Likes
daming
February 14, 2022, 8:15am
228
Does anyone know how to change the header text size and color in the front page?
I’d direct you here to get a better sense of how Discourse works, and how to customize areas of the site.
5 Likes
jordan-vidrine
February 15, 2022, 3:43pm
230
A post was merged into an existing topic: Dark / Light mode toggle component
vsiryxm
February 16, 2022, 8:45am
232
Hello, how do I install this theme, what is the name of the theme?
At the very bottom of the first post of this topic is a table showing this information. This was probably not easily seen as there are a good bit of steps to set this theme up correctly. Please read through the first post, as well as the links for installing a theme and let us know if you encounter any issues
jordan-vidrine:
1 Like
f1r4s
February 16, 2022, 6:02pm
234
any idea how to change this font color as we create a component for that ? this issue only in mobile …so component can be only for mobile design
search button
footer search
1 Like
Hmm
You seem to be interested in customizing a good bit of Discourse for yourself, which is awesome
I would suggest to read through the following topics to get a better sense of how to customize the look and feel of your site
This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read.
What are themes and theme components?
A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features.
Let’s start with themes.
Themes
In general, themes are not supposed to be compatible wi…
As well as these:
Designer’s Guide to Discourse Themes
Developer’s guide to Discourse Themes
1 Like
, it’s hard to tell from your screenshot what page you are on, or what specific font you are referring to. In the image you have shared there are 4 or more different text items that could possible be customized.