Did you create a new theme component & add it to in this case the air theme?
You have seen my mods above. Are you trying to override parts of the theme settings or like my post above add mod/fixes?
Thank you Dan! I was able to figure out the adding a new component and then add custom CSS there.
1 Like
If youâre wanting to Override a setting. Use â!importantâ
Ie
.some-selector {
padding-top: 2.5em !important;
{
Still learning myself. Discourse is quite diverse.
2 Likes
Thanks for the great theme. it all works. But I have the question how I can change the background image ?
Thanks for the help
2 Likes
Create a theme component and add this with your background image
html .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-image: url();
background-size: cover;
opacity: 1;
/* background: linear-gradient(90deg, var(--tertiary-hover) 0%, var(--tertiary) 100%); */
clip-path: unset;
background-color: var(--secondary) !important;
}
3 Likes
Hello guys,
Is there a way to add some external links in the header close to the logo?
Thank you!
There is this one
And
There is also one that adds a bar with dropdowns below site header
2 Likes
Hi,
Thank you very much for taking the time to reply.
I was using this one but was not entirely satisfied : Custom Top Navigation Links
Your second suggestion is exactly what I need, I am really happy with the result.
Thank you very much for your help!
1 Like
Hello all,
Sorry for this double message but is there a way to show the subcategories on both desktop and mobile and in the same time display the full category titles on mobile when they are a bit long?
My config is CATEGORY BOXES WITH SUBCATEGORIES but without using Modern Category + Group Boxes.
The result is great on desktop and mobile when I use the desktop version. But with the mobile version you cannot read the end of some category titles.
Thanks a lot for your help!
Can you post a ss?
I see subcategories showing in both ss. Are you looking to have category description in both? Or mirror desktop with no desc?
Sorry if I was not clear.
I would like to see the full category titles
For example on the desktop version you have «Discussions Générales sur la mode » but on the mobile version you have only « Discussions Générales »
1 Like
I am not sure the CSS code off hand. But you should be able to have the category title wrap like in the first pic you posted.
Maybe try inspect element on desktop to see if you can identify the CSS used to wrap the category name to use 2 lines.
I tried some CSS with ChatGPT and Claude for example:
.category-box-heading,
.category-box-heading a,
.category-box-heading h3 {
max-width: 100%;
width: 100%;
display: block;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.4;
padding: 5px 0;
}
.parent-box-link {
display: block;
width: 100%;
}
@media screen and (max-width: 767px) {
.category-box-heading h3 {
font-size: 16px; /* Ajustez cette valeur selon vos besoins */
}
}
But itâs not working .
Is there a way to force the desktop view on mobile? It will be perfect to have description and subcategories.
Thanks!
Have you tried how the desktop view looks in a mobile? It isnât that great in some mobiles.
Thank you for your reply.
I just tried on 2 iPhone and it was like this.
Which is exactly what I am looking for.
Ideally I would like that my users have this view directly without playing with the settings.
Disable your custom component. Create a new test component in mobile CSS try this
.category-box-heading h3 {
//* You may need to uncomment the 2 lines below.
// Overflow: unset !important;
// Text-overflow: unset !important;
text-wrap: balance !important;
}
I am pretty sure you will not need any other CSS modifications.
Just tested. Not working with my snippet either.
Latest version of effective code:
.full-width .contents .topic-list thead th.posts {
width: 10%;
}
.full-width .contents .topic-list thead th.activity {
width: 10%;
order: 4;
}
th.num.views {
width: 10%;
order: 3;
display: block;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.posts {
width: 10%;
order: 2;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.age {
width: 10%;
order: 4;
}
.topic-list .views {
width: 10% !important;
order: 3 !important;
display: flex !important;
visibility: visible !important;
justify-content: center;
}
.full-width .contents .topic-list tbody tr:not(.topic-list-item-separator) td.views {
width: 10% !important;
order: 3 !important;
display: flex !important;
justify-content: center;
align-items: center;
}
2 Likes
