News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Board Icons 2.1

Started by AllanD, June 20, 2020, 05:42:56 PM

Previous topic - Next topic

AllanD

I am trying to make a simple theme and trying to change the board icons. I saw the boardicons.png in the images but didn't want to have to remake that, so I made read and unread icons and tried looking through the css to just change the back image .board_icon a and board_icon a board_off. So asking how I could change them.
Check out this great sites.
KnD Hosting

SychO

I'm not sure I quiet understand what you mean, but this is the relevant CSS code


.board_icon a {
background: url(../images/boardicons.png) no-repeat 0 0 / 90px;
display: inline-block;
width: 45px;
height: 45px;
}
.board_icon a.board_on2 {
background-position: -45px 0;
}
.board_icon a.board_off {
background-position: 0 -45px;
}
.board_icon a.board_redirect {
background-position: -45px -45px;
}
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

AllanD

Correct I was trying to replace the boardicons.png with my images. Wonder if I would have to take out all the background positioning and and the url to the images to all the fields.
Check out this great sites.
KnD Hosting

Antechinus

The background position is for the sprite (ie: multiple icons in one image). If you are using individual icons then I'd set them all to 50% 50% (which will centre them on the anchor). If that is a bit out one way or another, you can adjust it to suit.

AllanD

Ok I was playing around with what you both posted, Thank you for helping here is what I put in and nothing showing.




.board_icon a {
   background-image: url(../images/newpost.png) no-repeat;
   width: 45px;
   height: 45px;
}
.board_icon a.board_on2 {
   background-image: url(../images/newpost.png) no-repeat;
   background-position: 50% 50%;
}
.board_icon a.board_off {
   background: url(../images/nonewpost.png) no-repeat;
   background-position: 50% 50%;
}
.board_icon a.board_redirect {
   background: url(../images/newpost.png) no-repeat;
   background-position: 50% 50%;
}
Check out this great sites.
KnD Hosting

Antechinus

Yes that wouldn't work. You can't set background-repeat on background-image. You can do this:

.board_icon a {
   background-image: url(../images/newpost.png);
   background-repeat: no-repeat;
   background-position: 50% 50%;
   width: 45px;
   height: 45px;
}
.board_icon a.board_on2 {
   background-image: url(../images/newpost.png);
}
.board_icon a.board_off {
   background: url(../images/nonewpost.png);
}
.board_icon a.board_redirect {
   background: url(../images/newpost.png);
}


That's the cleanest way of doing it in this case. If you're only doing one image, and want to put all the declarations in one, then you need to use background.

.board_icon a.board_on2 {
   background: url(../images/newpost.png) 50% 50% no-repeat;
}





ETA: Come to think of it, this should work too.

.board_icon a {
   background: url(../images/newpost.png) 50% 50% no-repeat;
   width: 45px;
   height: 45px;
}
.board_icon a.board_on2 {
   background-image: url(../images/newpost.png);
}
.board_icon a.board_off {
   background: url(../images/nonewpost.png);
}
.board_icon a.board_redirect {
   background: url(../images/newpost.png);
}


AllanD

Would these work if I was using two seperate images?
Check out this great sites.
KnD Hosting

Antechinus

Should do, as long as you get the image paths correct. :)

Antechinus

Bugger. Just realised I made a mistake in the earlier ones, and edit times are (once again) too short to edit the earlier post.

Mistake was I forgot to change the last couple of declarations to background-image instead of background. Should be like this:

.board_icon a {
   background: url(../images/newpost.png) 50% 50% no-repeat;
   width: 45px;
   height: 45px;
}
.board_icon a.board_on2 {
   background-image: url(../images/newpost.png);
}
.board_icon a.board_off {
   background-image: url(../images/nonewpost.png);
}
.board_icon a.board_redirect {
   background-image: url(../images/newpost.png);
}

AllanD

it's weird even playing with the % numbers I can't get any image to show, even a little bit.
Check out this great sites.
KnD Hosting

SychO

You might want to provide a link to your forum so that we can clearly see what you've got, we'll be able to tell you exactly what you need to edit.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

AllanD

I am in the process of setting it up after converting from Xenforo, so it's live yet. Here is a link http://www.host-hunters.com/smf/index.php
Check out this great sites.
KnD Hosting

marcosbr


I did it:


.board_icon a {
   background: url(../images/a.png) repeat;


AMIGOSDAELETRONICA - Simples e Eficiente!




Nothing in life is absolute. We are always learning... Did you know that?
https://amigosdaeletronica.com.br

SychO

Try this


.board_icon a {
    background: url(../images/newpost.png) no-repeat;
    background-position: center;
    width: 45px;
    height: 45px;
    display: block;
}
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

AllanD

Thank you that did the trick, I appreciate all the help for everyone.
Check out this great sites.
KnD Hosting

Antechinus

Quote from: SychO on June 21, 2020, 01:31:06 PM
Try this


.board_icon a {
    background: url(../images/newpost.png) no-repeat;
    background-position: center;
    width: 45px;
    height: 45px;
    display: block;
}


Doesn't 2.1 css already declare them as display: block;? Or was that removed when doing the edits? If it was removed, that would explain the problem. Without block display set the anchor has no content and will collapse to zero height (ie: the width and height declarations will not take effect).

Anyway, if you're going to use shorthand syntax for the first one there's no need to declare the position separately.


.board_icon a {
    display: block;
    width: 45px;
    height: 45px;
    background: url(../images/newpost.png) center no-repeat;
}


ETA: Found it in 2.1 index.css. For some reason it uses inline-block by default, which is a weird one since there's nothing for it to be inline with. That div just contains the anchor all on its lonesome.

(Which reminds me of divitis. That anchor could stand on its own as display: block;. There was never any need for it to be wrapped in a div, but some people can't get their heads around the fact that not everything needs to be wrapped in a div, They think every other element is like breakfast cereal, and has to be put into a packet called div. :D). 

SychO

It does, (inline-block though). It was just lost in the course of the conversation.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Antechinus

Yup. Caught that in an edit. Added an explanation for AllanD. :)

BTW, have just reported a minor bug on Github (#6162). That's what you get when I look at 2.1 CSS. :D

SychO

Thank you for the report.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Advertisement: