NameX

[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?

Try with these selectors:
.tp_shoutbody_layout0
.tp_shoutbody_layout2
.tp_shoutbody_layout1
.tp_shoutbody_layout3

For example:

Code Select Expand

.tp_shoutbody_layout3 { background: {yourcolor} !important; }
Might want to ask on their support topic if it doesn't work, I only looked through the files I didn't install the MOD.

[jsx]

Thanks Diego for your willingness to help.

Should I enter the hex color here {yourcolor}?

And as I guess this code I should add to tp-shout.css?

[Diego Andrés]

Should I enter the hex color here {yourcolor}?

Yes.

And as I guess this code I should add to tp-shout.css?

Use the css file from the theme, preferably.

[@rjen]

That should work, but you need to blank out the settings in Tinyportal or they will override the css

[Diego Andrés]

!important should do the trick, to override non !important inline styles.

[jsx]

I use shout_layout3 for shoutbox:



And in the app.css file from NameX I added this code:

Code Select Expand

.tp_shoutbody_layout3 { background: {#0b0f0b} !important; }
And unfortunately the background hasn't changed. Have I done something wrong?

[Diego Andrés]

You don't need brackets for your color.
I added them as placeholders for the example.

Also you should use your variable since that's the plan you had for it.
Are you editing this files with vs code? It will tell you if you have a syntax error in these scenarios.

[jsx]

Ok, so this shoutbody_layout2 code works to change the background color of the shoutbox.

Code Select Expand

.tp_shoutbody_layout2 { background: #0b0f0b !important;
}
I know that I also need to add shoutbox codes to dark.css and theme_colors.css, but how to do it exactly?

Based on these codes, how to do it? Should I enter this name? tp_shoutbody_layout2

dark.css

Code Select Expand

--body-bg: hsl(var(--primary-color-hue), 80%, 2%);
--body-custom-bg: #020901;
theme_colors.css

Code Select Expand

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

[Diego Andrés]

Just add a new variable, you can give it any name, or re-use another one that already exists.

[jsx]

Unfortunately, !important doesn't work because after adding this code:

Code Select Expand

.tp_shoutbody_layout2 { background: #0b0f0b !important;
}
to app.css then this background color replaces the background in light theme mode.

I added this code to app.css:

Code Select Expand

.tp_shoutbody_layout2 {
background: var(--tp-shoutbody-layout2-custom-bg);
}
I added this code to dark.css:

Code Select Expand

--tp-shoutbody-layout2-bg: hsl(var(--primary-color-hue), 80%, 2%);
--tp-shoutbody-layout2-custom-bg: #0b0f0b;
I added this code to theme_colors.css:

Code Select Expand

--tp-shoutbody-layout2-bg: hsl(var(--primary-color-hue), 40%, 85%);
--tp-shoutbody-layout2-custom-bg: #e5e5e5;
And unfortunately it doesn't work.

[Diego Andrés]

You didn't use !important.

Code Select Expand

.tp_shoutbody_layout2 {
background: var(--tp-shoutbody-layout2-custom-bg) !important;
}
or do as jren suggested.

[jsx]

Okay, now it works.

I also have a question: is it possible to implement the font color of the text in the shoutbox when the forum dark mode is turned on? Ok, I can change the color in the shoutbox settings, but then this color will also change for light mode.



It would also be nice if I could set those colored lines for the light and dark theme, because these lines disappeared when I implement these codes.

background color odd lines
background color even lines

Can you help me with this Diego?

[Diego Andrés]

Just add a variable for each, not sure what you're asking here.
It's the same process you just followed for .tp_shoutbody_layout2
Do that for the other selectors/settings.

What your inputting in the settings is now irrelevant because you're overwriting it, you can change it to anything you want, like you just did.

[jsx]

Just add a variable for each

I'll try to do it.

not sure what you're asking here.

I mean one line in color, the other in the background color of the shoutbox:

It's the same process you just followed for .tp_shoutbody_layout2

Okay.

Do that for the other selectors/settings.

I definitely don't know how to implement this colored line:

[Diego Andrés]

There are four selectors, you only did one
.tp_shoutbody_layout0
.tp_shoutbody_layout1
.tp_shoutbody_layout2
.tp_shoutbody_layout3

[@rjen]

Those are different layout versions. He is only using version 2

[forumhub]

For example i want to change the name of "NAMEX" with the same design as like your theme name with any custom name "EXAMPLEWEBSITE" still it will work?

[forumhub]

I tried with this code-

Code Select Expand

<a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? '
                    <span class="theme-logo">
                        <span style="font-size: 100%">
                            FORUM
                        </span>
                         <span style="font-size: 125%">
                            HUB
                        </span>
                    </span>' : '
                    <img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '
                </a>
But looks like not mobile friendly. can you fix it for mobile friendly

[@rjen]

I definitely don't know how to implement this colored line:

Played around with the theme a bit.

If you are overriding the colors that are set in the shoutbox settings you CANNOT have one mode (light) keep the settings from TinyPortal and at the same time have dark override them: the !important in the app.css will overrule the colors set in the setting, even if no variable is set in the theme variant css

So when you want to change the settings using the variants you are losing the TinyPortal setting for that element in this theme.

I just added these settings to the css files for the shoutbox to look good in all variations
In this setup the shoutbox is following the theme...

add to app.css

Code Select Expand

.tp_shoutbody_layout2:nth-of-type(2n + 1), .tp_shoutbody_layout3:nth-of-type(2n + 1) {
background: var(--tp_shout-bgodd) !important;
}
.tp_shoutbody_layout2:nth-of-type(2n), .tp_shoutbody_layout3:nth-of-type(2n) {
background: var(--tp_shout-bgeven) !important;
}
.tp_shoutbody_layout2 > span, .tp_shoutbody_layout3 > span {
color: var(--tp_shout-textcolor) !important;
}

add to theme_colors.css AND dark.css

Code Select Expand

--tp_shout-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
--tp_shout-bgeven: var(--body-bg);
--tp_shout-textcolor: var(--body-txt-color);
If you also want the layout option 1 and 2 to look good some more work is required...

[@rjen]

Ik like this theme and it's color options. 

So I decided to translate the language files to dutch.

Now I am finding some language files in the theme that appear not te be used...
carousel.english.php
cover.english.php
profile.english.php

I suspect these are not relevant?

*** update ***
Just checked Crowdin and noticed the message...

These language files are included in every theme developed by SMF Tricks, for SMF 2.1.x and onward.

Included the relevant translations to dutch in attached file...