NameX

[hottakes]

Thanks. Another place where the dark theme has a small problem is the registration form. After you type the username and then move to the email field there's light text on light background:
You cannot view this attachment.


And what about that "hamburger menu" button? I saw that it's also there on your forum (smftricks.com).
It's not a big problem, but if it doesn't do anything I think it's better to remove it.

[Diego Andrés]

I'll look into the registration form.
I still don't see the issue with the hamburger menu, or I'm not sure what you mean.

[Diego Andrés]

Perhaps you are referring to the link tree/breadcrumbs?
If so, in mobile (perhaps tablet too, can't recall), this button will expand the rest of the navigation.

[bod22]

Great theme In my opinion one of the best here.


However I have a few suggestions about it.

1. I think you should consider changing the way of showing sub-boards:



In my opinion they look strange, completely separated from the main boards.

It would better to have sth similiar to this:



2. @jsx is right as far as social buttons are concerned. They would look great at the top.

3. Perhaps, it would be possible to replace these words like messages etc. (next to numbers) with icons?

I mean this



Into sth like this



In my opinion it looks better and it's more practical

These are only my suggestions


However, I have also one question.
When I use a light version with a set light image background, is it possible in dark version to automatically replace it with a set colour or different image while turning it on? 

[Diego Andrés]

When I use a light version with a set light image background, is it possible in dark version to automatically replace it with a set colour or different image while turning it on? 

How did you add it?
Yes you can change it when switching mode. Add the background in css/custom/theme_colors.css

Code Select Expand

/* Background */
--body-bg: hsl(var(--primary-color-hue), 40%, 85%);
Change the value of the var with your background.
And for the dark mode you edit dark.css and search for --body-bg: and apply a different background for it.

[bod22]

Thanks! I haven't done it yet I'm talking about future but it's good to know that it's possible.

What do you think about my other suggestions?

[Diego Andrés]

I don't think I'll be making changes to the theme at this point.
However, I'm okay providing assistance in accomplishing certain things.

Hopefully this weekend I'll be able to provide some instructions for some of the requests.
Additionally, I think I'll add a 'dummy' file to the structure so that people can add their custom css changes in a file, without having to search for them on every update.

[hottakes]

Perhaps you are referring to the link tree/breadcrumbs?
If so, in mobile (perhaps tablet too, can't recall), this button will expand the rest of the navigation.

That's it, yes. Okay, at least it has a function.


Speaking of mobile: it made me realize that many elements are too big. For example, it looks like there's an entire empty line above the text in a post.
The "Started by..." text below the topic title is also too big. If it's possible to remove it with CSS, I'll just do that (if someone wants that information they can look at the first post).

[Diego Andrés]

1.1.1 - 02 February 2023

• Fixed font size and spacing in posts.
• Added new socials (Steam, Tiktok, LinkedIn, GitHub).
• Fixed small layout issues.
• Fixed input background in registration form.

[hottakes]

Nice. I think the poster area should also have slightly smaller fonts, for example .poster {font-size: 0.8rem;} looks better IMO. And the topic title text could be smaller too.

But I don't want to annoy you too much with all the details.
What is the correct way to make such changes? Edit app.css?
I'm a noob and I don't want to break something.

And is there a safe way to remove or hide the "Go Down" and "Go Up" buttons?

[Diego Andrés]

Yes in app.css it could be the best place because it's loaded after index.css (default theme because I don't include one).

There's no setting to disable the buttons.
You might be able to do it with just css, try with this:

Code Select Expand

a.button:is([href="#bot"], #bot) {
  display: none;
}

[Diego Andrés]

I added the thing I mentioned earlier.

1.1.2 - 03 February 2023

• Load a custom_edits.css file for users to keep their edits safe from updates.
• Fixed issue with pagination styles not loading in some instances.

So now you can create a file in css/custom/custom_edits.css and overwrite/add styles without losing them when you update the theme or similar.

[Diego Andrés]

Diego, I'm wondering if it's easy to set the social media buttons to appear in the top right of the theme. What do you think about it?



I think the social media buttons will be more visible at the top, but I also want to keep the social media buttons at the bottom.

index.template.php

Code (Search) Select Expand

</h1>';

// Theme Variants
themecustoms_search();

echo '
</div>Don't mind the comment, it's wrong but I don't think I care 

Code (Replace) Select Expand

</h1>
<div class="right-block">';

// socials
themecustoms_socials();

// Theme Variants
themecustoms_search();

echo '
</div>
</div>
And then you can add this at the end of the app.css file, or on the newly loaded file custom_edits.css

Code Select Expand

#header {
position: relative;
}
#header::after {
display: none;
}
header .right-block {
display: flex;
align-self: flex-start;
flex-direction: column;
padding-block: 0.75em;
}
header .custom_search {
position: absolute;
top: unset;
bottom: -1px;
}

@media (max-width: 767px) {
#header {
position: relative;
gap: 20px;
}
header .social_icons {
flex-wrap: wrap;
}
header .right-block {
align-self: center;
}
header .custom_search {
top: calc(100% + 22px);
right: 0;
}
}

[jsx]

@Diego Andrés

Thanks a lot for providing the solution. Can I reposition these buttons to be here?



In the given code, these buttons are displayed lower in the header.

[hottakes]

Feature idea: Social Media entries for user-defined URLs, with either an icon/image or just a text link.
So that you could add links to websites like 'Official Blog' or 'Status Page', for example.

[hottakes]

I'm trying to make .poster a bit narrower to have more space for other elements on the right (.postarea and .moderatorbar). I can add max-width to .poster, but there's still a gap between it and the rest. Is there a simple solution?

[Diego Andrés]

The area is a grid, you have to adjust the grid too.
This should do it.

Code Select Expand

.post_wrapper {
  grid-template-columns: auto 1fr;
}

[hottakes]

Excellent, thanks. That, with:

Code Select Expand

.post_wrapper .poster {
  width: 120px;
}worked for me and it seems to be compatible with resizing/mobile.

[Diego Andrés]

worked for me and it seems to be compatible with resizing/mobile.

That's great.
It should've been auto since the beginning but oh well, not really a common thing to change 

@Diego Andrés

Thanks a lot for providing the solution. Can I reposition these buttons to be here?

I'll see about this soon

[jsx]

Hello @Diego Andrés

Have you checked if it can be changed?