Jordan can you find out how we can add Restricted Category to the boxes style ?
2 Likes
I have a suggestion: maybe can add a data display of views to the main interface of the post. This gives users direct access to the most popular posts in the community.
now
like this
@jordan-vidrine
7 Likes
somehow with no reason as i remmber i get this error from the search component, it was working fine with airtheme… but now i get this error
any suggestion ?
1 Like
Is there a way to change the background image of this theme from the gradient 2 tone colors to an image I have?
3 Likes
Is this on the air theme? Or are you using this component separate from the theme?
3 Likes
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.
7 Likes
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
Ahh gotcha thank you!
3 Likes
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 
As well as these:
2 Likes
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
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
.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
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