NameX

[Mandarin]

Diego, how to have a different logo in dark and light mode?

[Diego Andrés]

What do you mean exactly?

Well, if you have more sections in the info center, the order will change.
For example, enabling the recent posts.
Admin > Theme Settings > Number of recent posts to display on board index. If you set to 1 or more, recent posts will appear in the info center and users online will now be in the position 2 (starting from 0).

[Diego Andrés]

Diego, how to have a different logo in dark and light mode?

You'll have to add it using css.
First, remove the text/logo.
Themes/NameX/css/custom/custom_edits.css

Code (Add) Select Expand

header h1.forumtitle a, header h1.forumtitle img {
  display: none;
}Then add the logo as a background.

Code Select Expand

header h1.forumtitle {
  background-image: url('{image_url}');
  height: 135px;
  max-width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  margin-block: 20px;
}And then you'll have to change the logo in dark.css

Code Select Expand

header h1.forumtitle{
  background-image: url('{image_url_dark}');
}

[Mandarin]

Well, if you have more sections in the info center, the order will change.
For example, enabling the recent posts.
Admin > Theme Settings > Number of recent posts to display on board index. If you set to 1 or more, recent posts will appear in the info center and users online will now be in the position 2 (starting from 0).

I understand now, thank you. 

[Mandarin]

You'll have to add it using css.
...

I'll do that tomorrow, thanks again, great help! 

[T.Linden]

To preserve your changes in case of a theme update, create a new file in Themes/NameX/css/custom/custom_edits.css

And then add the following:

Code Select Expand

:root {
--avatar-border-radius: 0;
}

First, I want to say excellent work, this is sooooo close to being the perfect theme.

I copied the code above, it does change the avatars back to square as I want. So I know the file is correct, it's correctly named, it's in the right spot, etc.

But, this one change is massively screwing up the Administration Center of the forum. The moment I hit save after switching from Curve2 to NameX the Admin page reloads as if there's no css styling at all any more. It's just a plain white page with bulleted lists where the fancy menus used to be etc. Like what you get when you misspell the name of the css file in your code so it doesn't load.

But it's only the Admin section. After I click my logo to go to the forum and read posts etc, it's all fine. If I rename the css file so it's not loaded any more, the Admin section is back to normal. I **know** it's the new css file, and there's nothing else in it other than the one new avatar line. I normally use Firefox but it does the exact same thing in Chrome. So it's not a browser thing.

Any ideas?

[Diego Andrés]

Try going into admin > config > features and options, disable the minimization of CSS/JS files, and turn it back on (or leave it off).

[T.Linden]

Tried that, left it off, no luck.

I do see a bunch of minified css files in the css folder still (none in the custom folder though). I'm going to nuke the whole theme and make sure all old traces are gone and then re-install it.

I just don't get why it would even affect it. It's one line!! Used to be a programmer, crap like this is why I'm glad I retired. 

[Diego Andrés]

It shouldn't cause issues at all, definitely odd. I'll do some testing too just in case, but I assume someone would've reported it before.

[T.Linden]

Well I think you were definitely on the right track. After I deleted all the theme files and reinstalled, it's been fine. I haven't turned minimization back on, don't like messing with things that are working.

Only a few small things left until this is perfect for me:

1) changing the url you go to when you click the forum logo - (I want it to go to site root not forum root). Am I correct the only way to change this is to edit the index.template.php file? there doesn't appear to be a setting for this, and css can't change the href of an <a link tag can it?

2) Lightening the colour behind the toolbar buttons like bold, italic etc in the dark theme. Contrast just isn't enough for my old eyes. Should be easy (famous last words).

3) Making the hamburger in the navigation section disappear until it's needed. Earlier you explained that it's for expanding the navigation on mobile when it's too long to display, but on desktop I can see the whole navigation and it's not needed unless I shrink my window to the tiniest width.

Thank you for the assistance.

[Diego Andrés]

1- Yes, index.template.php is the right place to do this change in pretty much every theme.

2- Only editing the CSS variables for the dark css, or the theme_colors css file (depending on the mode you are trying to edit). You can also target using selectors directly for more specific changes.

3- Not sure I answered that before in here... It's the same menu as the default theme (+ the customization) and it behaves the same. To always use the reponsive menu it would require some changes in the responsive.css file, I can look into that later. The theme also has a setting to hide menu items, or group them into a community button, to remove bloat.

[T.Linden]

The breadcrumb hamburger menu discussion was in posts 80-82 on page 5. People asking why it's there when it appears to do nothing, you say it's for mobile etc.

This expanding mechanism is not in the default theme at all. The default theme just wraps messily if the screen size gets narrow or on mobile. The navigate_section div is a ul, and the first li item is a link to the board root. In your theme you have added this as the first li item (line 391 of index.template.php):

Code Select Expand

<li class="trigger">
<a href="javascript:void(0);">
<i class="fa fa-bars"></i>
</a>
</li>
These lines are completely missing in the default theme (line 509 index.template.php)

I think your way of displaying longer breadcrumbs is superior, it looks way better on my phone. I just wish it would hide the control until it's needed, because it looks like a normal options menu, is clickable but does nothing at that point. It comes across as a bug, I know I'm going to get support messages from my users saying "why does my hamburger menu not work? I click it and nothing happens".

Maybe it's not possible to hide it actually reveals something hidden, I'm not good enough at this to know how to do it.

[T.Linden]

For those who find the dark mode editor toolbar buttons a bit hard to read, I'm using this in my custom_edits.css and it works well. Works with all the colour modes, pink, blue, red, green etc.

Code Select Expand

/* set background of toolbar to lighter colour when in dark mode */
:root[data-colormode="dark"] {
    --sceditor-group-bg: linear-gradient( to bottom,
    hsl(var(--primary-color-hue), 25%, 60%) 0%,
    hsl(var(--primary-color-hue), 25%, 75%) 100% );

    --sceditor-group-bg-active: hsl(var(--primary-color-hue), 25%, 50%);
}


[Diego Andrés]

I see, I thought you were referring to the main menu on mobile.
I understand the confusion it might cause to have this button in the breadcrumbs when it;s not needed. I will try to address it in a future update.

[Mandarin]

Hello, I have another question.
How can I add a button and a small logo in the main menu? Basically a link to our website.

[Mandarin]

Still can't edit my posts. Another one please: how can I change the color of the horizontal rule?

[Mandarin]

- On mobile the logo is centered, on computer it is aligned to the left. How to center it everywhere?

- I changed several colors and now I have vertical black lines in the navigation menu (see screenshot). How do I get rid of it?

[Diego Andrés]

Hello, I have another question.
How can I add a button and a small logo in the main menu? Basically a link to our website.

You could hardcode it inside the menu in the index.template.php. Or add a custom button and target it using CSS to add the image as a background. You could search the forum using the keywords "Add menu button", and should get plenty of information.

Still can't edit my posts. Another one please: how can I change the color of the horizontal rule?

Not sure what are you referring to.

- On mobile the logo is centered, on computer it is aligned to the left. How to center it everywhere?

I can't test it right now, the search bar might cause issues.

Code Select Expand

#header {
justify-content: center;
}

- I changed several colors and now I have vertical black lines in the navigation menu (see screenshot). How do I get rid of it?

I can't know that without seeing what exactly did you do.
You should check the elements using the browser inspector tool, and perhaps you will find some clues of what went wrong.
 

[Mandarin]

Thanks for your replies. I'll try.

Not sure what are you referring to.

In a post you can add an horizontal rule. Like this:
I would like to change the color.



_

[Mandarin]

I can't test it right now, the search bar might cause issues.

Code Select Expand

#header {
    justify-content: center;
}

I tried several things and didn't succeed to get it correctly. Could you please check when you have time? It could help several people anyway.