Heliosurge
(Dan DeMontmorency)
February 17, 2024, 5:06am
486
I believe you can create a new theme-component and override the fonts
This computer bent maybe able to be modified or you might find fonts in google fonts to your liking
.Google Fonts
The header you can target and adjust with CSS I believe
Maybe not quite what your looking for. But maybe of interest.
Clo
March 1, 2024, 7:15am
487
Hi all
Thanks for such a great theme!
I’m just struggling with something. I’ve noticed on mobile that some of the Profile Preferences tabs don’t have a solid background, causing it to look a bit strange. See image below for reference:
The error page on mobile version does the same thing. They’re all fine on desktop/tablet view, but mobile version seems to have different CSS?
Does anyone perhaps know how/where I can change this? I don’t have any coding background, so would I need to get a developer to do this for me?
1 Like
Clo
March 1, 2024, 7:24am
488
Here is an example of what it looks like on tablet/mobile and also what most of the other tabs look like:
1 Like
Moin
March 1, 2024, 7:36am
489
Welcome to Meta!
I don’t think so. This is an official theme so it is maintained by the Discourse team. But even other themes which are shared here are often fixed by the maintainer when you report a problem.
I can reproduce your problem here. It looks even worse than your screenshot because the message preview is wider than my screen.
1 Like
Gonerdot
(Gonerdot)
March 4, 2024, 4:51pm
490
Does anyone know how to hide td-class?
1 Like
You can try this CSS:
.topic-list {
.topic-list-header .posts,
.topic-list-body .posts {
display: none !important;
}
}
2 Likes
Gonerdot
(Gonerdot)
March 4, 2024, 5:05pm
492
Yes, I tried to hide them this way. regular divs are hidden, but it doesn’t work with td. I tried several options:
.td.num.posts... {
display: none;
}
.td:num.posts... {
display: none;
}
1 Like
I tested my CSS, and it works for me. Did you test it?
It misses the !important
for this theme.
3 Likes
Gonerdot
(Gonerdot)
March 4, 2024, 5:12pm
494
Thank’s @chapoi
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posts,
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.age,
.full-width .contents .topic-list .topic-list-body .topic-list-item .topic-list-data.posters {
display: none;
}
3 Likes
Gonerdot
(Gonerdot)
March 4, 2024, 5:30pm
495
There is some empty space at the top. Is there any way to remove it? I can’t find anything using the element inspector.
And I would like to increase the width of the block with the topic content
@jordan-vidrine
Steven
March 5, 2024, 1:24pm
496
There’s a margin-top in the main-outlet class
You should add this:
html body #main-outlet {
margin-top: 0;
}
I’ve never used this yet, but there is a topic-width settings in the css, in a root element.
Add this, it should adapt everything else:
:root {
--topic-body-width: 750px;
}
1 Like
Gonerdot
(Gonerdot)
March 5, 2024, 6:44pm
497
This is something not right
Gonerdot
(Gonerdot)
March 5, 2024, 6:49pm
498
At the same time it looks normal. Thank you
.container.posts {
grid-template-columns: 90% 10%;
}
Thanks for sharing! Will take a look at this soon.
1 Like
This has been fixed in the latest merging of a PR
1 Like
Gonerdot
(Gonerdot)
March 9, 2024, 12:16pm
501
Please tell me how to crop the background image like this, with symmetrically rounded corners.
Now the code looks like this:
html .background-container {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: url(https://site/uploads/default/original/2X/2/26d48362654a9e03c716eeaff4a176cbbd01d6b8.png);
background-size: cover;
}
1 Like
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: linear-gradient(
90deg,
var(--tertiary-hover) 0%,
var(--tertiary) 100%
);
clip-path: ellipse(148% 70% at 91% -14%);
}
}
html body #main-outlet {
margin-top: 30px;
margin-bottom: 50px;
background: var(--secondary);
border-radius: 1em;
padding: 3em 3em 5%;
max-width: 1150px;
You are going to want to edit the clip path properties. You can learn more about that on sites like css tricks.
2 Likes
Moin
March 15, 2024, 7:21pm
503
When I use the theme here at Meta, the icons in front of Quote, Edit, Copy Quote, and Ask AI are invisible.
1 Like
Hmm, what color scheme are you using? The bg for that isnt what the theme uses.
Moin
March 15, 2024, 7:42pm
505
WCAG Light definitely has the problem, but I changed to “theme default”
and it was still the same. I did refresh to check that the color scheme was saved so I hope it is not affected by my problem with changing color schemes. The blue in the background was lighter after I changed to the default color scheme.
2 Likes