NameX

[user58389239]

I did the fix manually for now and it did the trick. Thanks for the help! I will wait and update at 1.2.9.

[Diego Andrés]

Hello,

Can the background and content section be full width on small screen phones?

Try with this on custom_edits.css

Code Select Expand

@media (max-width: 480px) {
#content_section {
padding-inline: 0.25em;
}
#main_content_section {
padding-inline: 0;
}
#top_section .inner_wrap, #wrapper, #header,
footer .inner_wrap, #nav_wrapper {
max-width: 100% !important;
padding-inline: 5px;
}
}You can set the padding-inline to zero on both, just thought it should still have some visual 'guide'.
Let me know if it works for you.

[gevv]

Many thanks @Diego Andrés You're right, a little space looked better.

[forumhub]

Yes how to change the "Namex" without replacing with Website Logo. Like i want to use custom Text for Example "NameX" with the Text "Forum" .  Please elaborate and show me which file or replace codes to fix it.

Thank you

[Diego Andrés]

Yes how to change the "Namex" without replacing with Website Logo. Like i want to use custom Text for Example "NameX" with the Text "Forum" .  Please elaborate and show me which file or replace codes to fix it.

Thank you

Try this:
https://www.simplemachines.org/community/index.php?topic=583206.msg4159816#msg4159816

[jsx]

Hello Diego.

I changed the forum background color to hex and the footer color to hex as well.

Code Select Expand

body {
background: #e5e5e5;
font-family: var(--body-font-family);
color: var(--body-txt-color);
font-size: 1rem;
line-height: 1.2rem;
display: flex;
flex-direction: column;
min-height: 100vh;
}

Code Select Expand

/* Footer */
footer {
margin: 25px 0 0;
padding: 15px 0;
background: #ddd;
box-shadow: 0px -5px 8px -5px rgba(0,0,0,0.1);
}
And unfortunately, when turn on the forum's dark mode, the background does not change to dark. I understand that in order for the background color to change to dark, the color must be set as var. How can I easily make a forum background var with this color: #e5e5e5? I would also like to make a background var for the footer in this color: #ddd

[Diego Andrés]

You'll need a new var likely because you need to set it in the dark.css file.
Example:
theme_colors.css

Code Select Expand

—-body-custom-bg: #e5e5e5;dark.css

Code Select Expand

—-body-custom-bg: darkcolor;

Code Select Expand

body { background: var(—body-custom-bg); }

I can post the custom_edits.css solution too if you are using that file, though I seem to recall you weren't.

[jsx]

There is this code in the theme_colors.css file:

Code Select Expand

/* Body */
/* Background */
--body-bg: hsl(var(--primary-color-hue), 40%, 85%);
/* Color */
--body-txt-color: hsl(0, 0%, 15%);
/* Color Strong */
--body-txt-color-strong: hsl(0, 0%, 35%);
/* Font Family */
--body-font-family: 'Lato', 'Segoe UI', 'Helvetica', 'Arial';
And should I add this code to this code?

Code Select Expand

--body-custom-bg: #e5e5e5;
And I should add this code in the dark.css file, right?

Code Select Expand

--body-custom-bg: darkcolor;
In which file should I insert this code?

Code Select Expand

body { background: var(—body-custom-bg); }

I can post the custom_edits.css solution too if you are using that file, though I seem to recall you weren't.

I don't use this file.

[Diego Andrés]

In which file should I insert this code?

Code Select Expand

body { background: var(—body-custom-bg); }

app.css or custom_edits.css.
It's just an example, you already have a body selector you posted above, just edit it.

[jsx]

Either I didn't understand something or I entered your solution incorrectly, because the night mode doesn't work for me.

Is there any website online (color var generator) so that I can generate the color code #e5e5e5, #ddd?

In the app.css file I changed the background color to hex.

Code Select Expand

body {
background: #e5e5e5;
font-family: var(--body-font-family);
color: var(--body-txt-color);
font-size: 1rem;
line-height: 1.2rem;
display: flex;
flex-direction: column;
min-height: 100vh;
}
theme_colors.css content

Code Select Expand

/* Body */
/* Background */
--body-bg: hsl(var(--primary-color-hue), 40%, 85%);
/* Color */
--body-txt-color: hsl(0, 0%, 15%);
/* Color Strong */
--body-txt-color-strong: hsl(0, 0%, 35%);
/* Font Family */
--body-font-family: 'Lato', 'Segoe UI', 'Helvetica', 'Arial';
dark.css content

Code Select Expand

:root[data-colormode="dark"] {
--body-bg: hsl(var(--primary-color-hue), 80%, 2%);
--body-txt-color: hsl(0, 0%, 70%);
--body-txt-color-strong: hsl(0, 0%, 90%);
In the app.css file I changed the footer background color to hex.

Code Select Expand

/* Footer */
footer {
margin: 25px 0 0;
padding: 15px 0;
background: #ddd;
box-shadow: 0px -5px 8px -5px rgba(0,0,0,0.1);
I entered these codes like this:

app.css

Code Select Expand

body {
background: var(—body-custom-bg);
theme_colors.css

Code Select Expand

/* Body */
/* Background */
--body-bg: hsl(var(--primary-color-hue), 40%, 85%);
--body-custom-bg: #e5e5e5;
dark.css

Code Select Expand

:root[data-colormode="dark"] {
--body-bg: hsl(var(--primary-color-hue), 80%, 2%);
--body-custom-bg: #000000;
What did I do wrong?

[Diego Andrés]

app.css

Code Select Expand

body {
    background: var(—body-custom-bg);

Looks like you're missing a hyphen here.
var(--body-custom-bg)

[jsx]

Right, now it works. Can you give me a solution to change the footer color to a dark background?

[Diego Andrés]

Just need to do the same, with a new variable for your footer.
If it's always the same color then you don't add anything to the dark.css file.

[jsx]

Thanks for the information. I did it this way:

app.css

Code Select Expand

/* Footer */
footer {
margin: 25px 0 0;
padding: 15px 0;
background: var(--footer-custom-bg);
box-shadow: 0px -5px 8px -5px rgba(0,0,0,0.1);
}
theme_colors.css

Code Select Expand

/* Footer */
/* Background */
--footer-bg: hsl(var(--primary-color-hue), 50%, 92%);
--footer-custom-bg: #ddd;
dark.css

Code Select Expand

--footer-bg: hsl(var(--primary-color-hue), 60%, 10%);
--footer-custom-bg: #0b0f0b;
Is there a way to set the dark background color for the TinyPortal shoutbox in the NameX theme files? To make the dark background of this shoutbox display when the dark forum mode is enabled.

[mickjav]

You could try the header and footer mod.

https://custom.simplemachines.org/index.php?mod=351

I use it for my copyright

Code Select Expand

<center><p style="color:red">Copyright &copy; <script>document.write(new Date().getFullYear())</script> Database Dreams All Rights Reserved</p></center>
<script>

[Diego Andrés]

Is there a way to set the dark background color for the TinyPortal shoutbox in the NameX theme files? To make the dark background of this shoutbox display when the dark forum mode is enabled.

I'm not sure what this is. I haven't used the shoutbox, is it not using the theme colors?

[jsx]

These are the TP shoutbox background colors:



I'm looking for a way to keep these colors enabled when the light NameX theme is enabled. And when I switch the theme to dark mode, I would like the shoutbox background to be dark. Do you think there is any way to do this?

[forumhub]

Please provide code for exact match for the design "Name-X"

[Diego Andrés]

I'm looking for a way to keep these colors enabled when the light NameX theme is enabled. And when I switch the theme to dark mode, I would like the shoutbox background to be dark. Do you think there is any way to do this?

You'd need to manually overwrite these values with css.
I'm not sure what the exact selectors would be.
You'd just add the selector to your css file using a variable. Would likely need to use !important, to make sure it overwrites the inline style.

[Diego Andrés]

Please provide code for exact match for the design "Name-X"

Code Select Expand

<a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '
                    <span class="theme-logo">
                        <span>
                            Name
                        </span>
                        <span>
                            X
                        </span>
                    </span>' : '
                    <img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '
                </a>