NameX

[jsx]

I added this code with !important to app.css and now the row colors have changed, but the colors don't work when I change to dark mode of the theme.

Code Select Expand

.shoutbox_row:nth-child(odd){
    background-color: #f1f4f0 !important;
}
.shoutbox_row:nth-child(even){
    background-color: #cce8c9 !important;
}
.shoutbox_dark_mode .shoutbox_row:nth-child(odd){
    background-color: #1e1e1e !important;
}
.shoutbox_dark_mode .shoutbox_row:nth-child(even){
    background-color: #454545 !important;
}
I understand that in app.css I should create code like this:

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;
To later add code in this style to dark.css so that the dark background for this shoutbox works when I turn on the dark mode of the theme.

Code Select Expand

    --shoutbox-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
    --shoutbox-bgeven: var(--body-bg);
    --shoutbox-textcolor: var(--body-txt-color);
Can you help me with this?

***

In app.css I added this code:

Code Select Expand

.shoutbox_row:nth-of-type(odd) {
    background: var(--tp_shout-bgodd) !important;
}

.shoutbox_row:nth-of-type(even) {
    background: var(--tp_shout-bgeven) !important;
}

.shoutbox_row > span {
    color: var(--tp_shout-textcolor) !important;
}
In dark.css I added this code:

Code Select Expand

--shoutbox-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
    --shoutbox-bgeven: var(--body-bg);
    --shoutbox-textcolor: var(--body-txt-color);
And it looks like it's working. I turned on the dark theme mode and SMFPacks Shoutbox has a dark theme too.

[Diego Andrés]

The shoutbox dark mode will not be dependent of the theme mode because it has its own option.

You'd need to add the dark selectors of the shout box to your dark.css file if you wanted to have them work at the same time regardless of the shout box option.

Code Select Expand

:root[data-colormode="dark"] .shoutbox_dark_mode .shoutbox_row:nth-child(odd){
    background-color: #1e1e1e !important;
}
:root[data-colormode="dark"] .shoutbox_dark_mode .shoutbox_row:nth-child(even){
    background-color: #454545 !important;
}

You will need to do some testing to get it the way you expect it, the user would then not have an option to change the color of the shout box.

[jsx]

To get the effect I want, I did it this way:

At the end of the app.css file, I added this code:

Code Select Expand

.shoutbox_row:nth-of-type(odd) {
    background: var(--shoutbox-bgodd) !important;
}

.shoutbox_row:nth-of-type(even) {
    background: var(--shoutbox-bgeven) !important;
}

.shoutbox_row > span {
    color: var(--shoutbox-textcolor) !important;
}
In the variants.css file I added this code to the existing code for Green:

Code Select Expand

/* Green */
:root[data-themecolor="green"] {
--primary-color-hue: 115;
--catbg-bg: hsl(var(--primary-color-hue), 30%, 45%);
--stats-pie-hue: 245deg;
/* Alternating row colors in the Shoutbox */
--shoutbox-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
    --shoutbox-bgeven: var(--body-bg);
    --shoutbox-textcolor: var(--body-txt-color);
}
/* Green */
And I added this code in the dark.css file:

Code Select Expand

--shoutbox-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
    --shoutbox-bgeven: var(--body-bg);
    --shoutbox-textcolor: var(--body-txt-color);
This way only displays alternating row colors on a green theme:

app.css

Code Select Expand

.shoutbox_row:nth-child(odd){
    background-color: #f1f4f0 !important;
}
.shoutbox_row:nth-child(even){
    background-color: #cce8c9 !important;
}
variants.css

Code Select Expand

/* Green */
:root[data-themecolor="green"] {
--primary-color-hue: 115;
--catbg-bg: hsl(var(--primary-color-hue), 30%, 45%);
--stats-pie-hue: 245deg;
/* Alternating row colors in the Shoutbox */
--shoutbox-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
    --shoutbox-bgeven: var(--body-bg);
    --shoutbox-textcolor: var(--body-txt-color);
}
/* Green */
Unfortunately, the code you gave me doesn't work in dark.css

Code Select Expand

:root[data-colormode="dark"] .shoutbox_dark_mode .shoutbox_row:nth-child(odd){
    background-color: #1e1e1e !important;
}
:root[data-colormode="dark"] .shoutbox_dark_mode .shoutbox_row:nth-child(even){
    background-color: #454545 !important;
}
This code also doesn't work in dark.css

Code Select Expand

.shoutbox_dark_mode .shoutbox_row:nth-child(odd){
    background-color: #1e1e1e !important;
}
.shoutbox_dark_mode .shoutbox_row:nth-child(even){
    background-color: #454545 !important;
}

[Diego Andrés]

I don't know how that MOD works, but I assume .shoutbox_dark_mode implies that the dark mode for the shoutbox is enabled, and that's not the condition case you want, you want to change the color regardless of the shout box option.

[jsx]

I understand Diego, but I only have one more problem, how to set the text in the shoutbox to white when NameX dark mode is turned on. I can't figure it out.

What I have done:

I have added this code in the app.css file:

Code Select Expand

.shoutbox_row:nth-of-type(odd) {
    background: var(--shoutbox-bgodd) !important;
}

.shoutbox_row:nth-of-type(even) {
    background: var(--shoutbox-bgeven) !important;
}

.shoutbox_row > span {
    color: var(--shoutbox-textcolor) !important;
}
I have added this code in the variants.css file:

Code Select Expand

/* Green */
:root[data-themecolor="green"] {
--primary-color-hue: 115;
--catbg-bg: hsl(var(--primary-color-hue), 30%, 45%);
--stats-pie-hue: 245deg;
/* Alternating row colors in the Shoutbox */
--shoutbox-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
    --shoutbox-bgeven: var(--body-bg);
    --shoutbox-textcolor: var(--body-txt-color);
}
/* Green */
I have added this code in the dark.css file:

Code Select Expand

--shoutbox-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
    --shoutbox-bgeven: var(--body-bg);
    --shoutbox-textcolor: var(--body-txt-color);
I tried to add this line of code to dark.css to change the color of the text in the shoutbox, but unfortunately the text color did not change.

--shoutbox-textcolor: hsl(0, 0%, 90%);

[jsx]

I managed to achieve this effect for SMFPacks Shoutbox Pro:



To achieve this effect in the shoutbox for the NameX theme, I had to use CSS variables:

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

Code Select Expand

.shoutbox_row:nth-of-type(odd) {
    background: var(--shoutbox-bgodd) !important;
}

.shoutbox_row:nth-of-type(even) {
    background: var(--shoutbox-bgeven) !important;
}

.shoutbox_row > span {
    color: var(--shoutbox-textcolor) !important;
}

.shoutbox_input_bar input {
    color: var(--shoutbox-inputbar-textcolor) !important;
    border-color: var(--shoutbox-inputbar-bordercolor) !important;
}
In the variants.css file, I added the following code to the current green NameX code:

Code Select Expand

/* Green */
:root[data-themecolor="green"] {
    --primary-color-hue: 115;
    --catbg-bg: hsl(var(--primary-color-hue), 30%, 45%);
    --stats-pie-hue: 245deg;
/* Alternating row colors in the Shoutbox */   
    --shoutbox-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
    --shoutbox-bgeven: var(--body-bg);
    --shoutbox-textcolor: var(--body-txt-color);
}
/* Green */
I added the following code in the dark.css file:

Code Select Expand

    --shoutbox-bgodd: hsl(var(--windowbg-bg), 25%, 15%);
    --shoutbox-bgeven: var(--body-bg);
    --shoutbox-textcolor: #b3b3b3;
    --shoutbox-inputbar-textcolor: #b3b3b3;
    --shoutbox-inputbar-bordercolor: #1c5a16;


My friend found out that SMFPacks Shoutbox Pro currently does not have a dark mode and this will not change in the near future, as mentioned by the author of the mod.

[Si6776]

Hi, we have been running a test board with this theme for a few weeks, in preparation for eventual migration to a main host server.  

The host we have been using has updated their server, and we now cannot access the forum, with an error message displayed: Theme_template_error

Any ideas on how this could be resolved?

[Diego Andrés]

Do you have any other issues?
Try using {forum_url}/index.php?theme=1 to enable the default theme, and check your error log.

[Si6776]

At the moment we can't access the forum UI at all.  I'll try that, thanks.  

[Si6776]

Do you have any other issues?
Try using {forum_url}/index.php?theme=1 to enable the default theme, and check your error log.

That seems to have worked.  Full access now available.  Not sure what the problem was, but many thanks.  

[Diego Andrés]

Alright, glad that helped.
Make sure you check other themes/mods installed to make sure everything works fine. ?theme=1 will only enable the default theme for your session, not globally so other might still have issues you could try switching themes back and fort.

[Si6776]

Actually, it's not fixed.

Like you said, it only works for the session, and I can't get it to work at all with a different  browser (Opera).

What PHP version is the theme compatible with?

[Diego Andrés]

I tested PHP 8.0 and 8.1 afaik.
What version are you using?

[Si6776]

I believe it's.PHP: 7.1.33, but I could be mistaken

I just logged out then couldn't log back in again, as I was getting the template error, then I tried using the normal URL and managed to log in.  Haven't a clue what's going on, but it appears possibly server related.  I've got someone who knows more about this stuff looking into it, so if you're interested, I'll update this when I find out more. 

[Diego Andrés]

Right, you'll need at least PHP 8.0 for NameX.

[jsx]

Hi Diego. SMFPacks Shoutbox does not display NameX graphics in these places. Is there any way to set NameX graphics to display in these places? Can you help me with this?





The blue NameX graphic is displayed in the Popup Shoutbox or Moderation Panel:



So I don't know why the NameX graphic isn't displayed in those places.

[Diego Andrés]

The template is probably loading the css/js files individually.
It should use template_css and template_javascript functions.

[jsx]

I understand that this bug should be reported to the author of SMFPacks Shoutbox?

[Diego Andrés]

Yes, but it's an assumption since I haven't seen the code.