Simple Machines Community Forum

Hi, I am new to SMF and wanted to change the main icons.  I see the main_icons_sprites and main_icons_sprite hd and when I put another image in its place for example the home it doesn't change anything.  Where can change those with custom pics?  I appreciate the help.  My SMF forum is 2.14 and the theme is the default theme Curve2.

Quote from: bethl on May 15, 2024, 06:36:46 PMHi, I am new to SMF and wanted to change the main icons.  I see the main_icons_sprites and main_icons_sprite hd and when I put another image in its place for example the home it doesn't change anything.  Where can change those with custom pics?  I appreciate the help.  My SMF forum is 2.14 and the theme is the default theme Curve2.

After you have changed the icon you may need to clear your browser cache(cntrl f5). It is possible that you may need to clear the SMF Cache aswell which can be done in the ACP.

Thank you I appreciate it.

Also note that the sprite is ALL of the icons in a specific spacing.  If you change the image, then you may have to change the css that tells the system what the image coordinates are

Quote from: Kindred on May 15, 2024, 07:12:35 PMAlso note that the sprite is ALL of the icons in a specific spacing.  If you change the image, then you may have to change the css that tells the system what the image coordinates are

What do I look for in css to edit?

Use the browser inspection tool to see how the current image is parsed

I'm not real sure what this means but here is a screen shot of what I see when looking at the home button with the inspection tool in Chrome.



https://i.postimg.cc/sXcKCThZ/Screenshot-2024-05-15-221528.png (https://i.postimg.cc/sXcKCThZ/Screenshot-2024-05-15-221528.png)

Yup ...


And then, look to the second inspector window to see how button_home is generated ... and the other button_(action) stuff as well

.main_icons
And
.action

Is there a way to use single images?  I keep getting the coordinates wrong with trying to customize the sprite.

Yes, You'll need to edit each instance of the main_icons class in the CSS to point to the correct image.
Another option to help you get the sprite right, is to add rulers to each icon so you know how to stay within the size when editing.

Sorry another question.  When I change the icon and have to edit the css is the only think I edit the coordinates?

When you're using a single image, you don't need to change the position, so you could remove it. All you need is to add a background-image: url(../images/icon.png);
OR if you used a sprite, you need to edit the positioning using background-position: x y;

I always bork the coordinates myself...   Made myself a cheatsheet...

You cannot view this attachment.

Great thank you both and the cheatsheet is awesome.

Ok If I have a single image would this be right so I can change the home icon at the top?  .main_icons.administration::before, .main_icons.home::before {
  background-image: url("Themes/default/images/icon44.png");

If you're in the index.css, you only need to use the relative path.
.. -> to get back a directory. So it would be like:
background-image: url('../images/icon44.png');

I'm not sure what I'm doing wrong but it isn't showing for me I did this
.main_icons.administration::before, .main_icons.home::before {
   background-image: url('../images/icon44.png');

saved it.  First though I tried putting the image in the sprite replacing the home and putting in the coordinates but it's not working with that either.

icon44.png wouldn't be a sprite, would it? In this scenario you'd need to remove the background-position.

Could you share the complete selector you're changing, and the icons?

Right I was just going to use an icon of my own and a separate picture not in the sprite so I was going to use the background image png.  But before that I tried to just edit the sprite and it still didn't work for me.

I just trying to change the home icon in the top here:



I tried using those coordinates but still didn't work.

To change that you'd need to overwrite the selector.
.main_icons.home::before {}

Also, did you add/create the 'imgs' directory you're targeting? The path you're using in your CSS would end up here: /Themes/{currentTheme}/css/imgs/main_icons_sprite.png

How do you overwrite the  overwrite the selector.
.main_icons.home::before {}. I'm not familiar with coding that good. 

Quote from: shawnb61 on May 16, 2024, 08:36:41 PMI always bork the coordinates myself...  Made myself a cheatsheet...

You cannot view this attachment.

Serious suggestion: for God's sake, do any spriting in the next version of SMF sanely. Those numbers are completely bonkers. It could have all been done in easy chunks of 10, so mental arithmetic was a piece of cake. The cost of a few extra pixels here and there is insignificant compared to the benefit for ease of use. It should have been: 0, 30, 60, 90, etc.

And yes, I know you weren't personally responsible for the bonkers numbers. :)

Quote from: bethl on May 18, 2024, 03:31:27 PMHow do you overwrite the  overwrite the selector.
.main_icons.home::before {}. I'm not familiar with coding that good. 

It's just an example, you use what you have in .sprite, inside the brackets of the selector I posted.

I'm saying overwriting, because we don't know if you're editing the icon in the index.css in its original line, or adding your CSS at the end of the file.

In any case, you still need to check the path you're using because you didn't confirm if you added that directory called "imgs".

Quote from: Antechinus on May 20, 2024, 05:41:27 PMSerious suggestion: for God's sake, do any spriting in the next version of SMF sanely.

Switching to fontawesome, but likely keeping the custom selectors (replacing them) for backwards compatibility in case we switch to <i class="fa"></i> syntax.

Sounds reasonable :)

I'm so sorry I'm just seeing this thank you all for your help it's working now for some reason it wasn't showing then started showing up.