News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Will it wreak havoc to use an image here?

Started by Grammy, July 08, 2016, 10:52:29 AM

Previous topic - Next topic

Antechinus

You should be able to do it by using a :before pseudo as well. If you want more options.

Grammy

Quote from: Antechinus on July 08, 2016, 07:07:03 PM
You should be able to do it by using a :before pseudo as well. If you want more options.

I've never used that before, but I'm reading up on it now.  I so want to learn this; I think CSS is amazing.   :)

Kindred

And yes....  Description can be blank without causing issues
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

#23
Quote from: Kindred on July 08, 2016, 09:39:17 PM
And yes....  Description can be blank without causing issues


Here it is with better squirrels, ha!  The green text is what's in the board title and what's below it is what's in the description field and it's fine, except that the only thing clickable is the title and, with an image this size, you'd want a larger click field.  So I do have <a> tags in the description for now, which I won't keep.  I'm trying to discover if it's possible to have the image clickable without referencing it anywhere other than in CSS.   ???

I was wondering about image mapping...  I may sleep on it.   :)

Kindred

The entire image should be clckable, with that CSS...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

Quote from: Kindred on July 08, 2016, 10:33:26 PM
The entire image should be clckable, with that CSS...

Well, I thought so...   I'll inspect it and make sure I didn't do a bad copy/paste. 

Grammy

Darn it!  I guess I was uploading the old index.css that had my original CSS in it.   :(

So, the image appeared but it wasn't clickable.   Now I have this and the entire field is clickable, but neither the image nor the board title are appearing.

#board_2 .info a {
    background-image: url("../images/FQ.jpg") no-repeat;
    width: 0;
    height:150px;
    padding-left: 469px;
    color: transparent;
    display: inline-block;
    overflow: hidden;
}


My image is in default/images. 

Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Kindred

Get rid of the no repeat

And sir osis...   The width 0 gets rid of he text, the padding left makes the image able to appear
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

Quote from: Sir Osis of Liver on July 08, 2016, 10:51:53 PM
Image will not display if width: 0;

I'm stumped on what to set it at...  if I set it for the width of the image, the page gets crazy.   :D


Grammy

Quote from: Kindred on July 08, 2016, 10:54:01 PM
Get rid of the no repeat



It's back, thanks!  Still no forum title, though.   (Screenshot)

Kindred

Oh... You want the words too?  Get rid of the padding statement and change the width from 0 to the image width
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

Quote from: Kindred on July 08, 2016, 11:01:46 PM
Oh... You want the words too?  Get rid of the padding statement and change the width from 0 to the image width


This still gives me the last screenshot. 
/* For links to change the code stuff... */
#board_2 .info a {
    background-image: url("../images/FQ.jpg");
    width: 469px;
    height:150px;
    color: transparent;
    display: inline-block;
    overflow: hidden;
}


But....  since I do have text in the Board's title field and don't need the description, I should be able to leave it like this and just photoshop whatever I want on the image, right?  I mean, the title is there, it's just not showing up.  So that should get rid of any database issues?

Sir Osis of Liver

Is there another edit elsewhere for this?  If I have the no-repeat, image is not displayed.  If I remove it, image is displayed twice, over and under description, and board title is gone.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Grammy

Quote from: Sir Osis of Liver on July 08, 2016, 11:26:51 PM
Is there another edit elsewhere for this?  If I have the no-repeat, image is not displayed.  If I remove it, image is displayed twice, over and under description, and board title is gone.


I manhandled it.   :D

I ended up editing the image and increasing its width to fit, then Photoshopped what I wanted to say onto the image.  I have the board title in the board settings, but with the image sitting as it does, it's clickable and it doesn't matter (to me) that the forum title doesn't show.  So it's the biggest hack job on the planet!

(screenshot)

This is my CSS:

#board_2 .info a {
    background-image: url("../images/FQ.jpg");
    width: 0;
    height:150px;
    padding-left: 650px;
    color: transparent;
    display: inline-block;
    overflow: hidden;
}

Sir Osis of Liver

Long as it works.  See what happens if you assign a moderator to that board.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Grammy

Quote from: Sir Osis of Liver on July 08, 2016, 11:38:43 PM
Long as it works.  See what happens if you assign a moderator to that board.

Phooey....  it doubles the image.  But you knew that, didn't you?   :D

In my case, I'd never have a moderator on that particular board because it's only Forum tips, but it sure would screw things up if I suddenly wanted to tart up the rest of the joint.   ;)

I'm gonna sleep on it and come back and joust this windmill in the morning. 

Thanks, you guys; you rock.   :)

Antechinus

Quote from: Sir Osis of Liver on July 08, 2016, 11:26:51 PM
Is there another edit elsewhere for this?  If I have the no-repeat, image is not displayed.  If I remove it, image is displayed twice, over and under description, and board title is gone.


That's because you can't have the background repeat as part of the background-image declaration. It's invalid, so the whole declaration gets dropped. The way to do it, is to just use background instead of background-image. That way you can have all background properties in the one declaration.

Also, you shouldn't need color: transparent; as the text won't be visible no matter what color it is. So this should work:

#board_2 .info a {
    background: url("../images/FQ.jpg") no-repeat;
    width: 0;
    height:150px;
    padding-left: 650px;
    display: inline-block;
    overflow: hidden;
}


Or you could use this, which would do the same thing:

#board_2 .info a {
    background: url("../images/FQ.jpg") no-repeat;
    width: 650;
    height: 150px;
    text-indent: 100%;
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
}


Quote from: Grammy on July 08, 2016, 11:43:49 PM
Quote from: Sir Osis of Liver on July 08, 2016, 11:38:43 PM
Long as it works.  See what happens if you assign a moderator to that board.

Phooey....  it doubles the image.  But you knew that, didn't you?   :D

That's because your moderator link is another anchor (a tag) inside #board_2 .info, so the way to sort that out is to use the existing .subject class to only put the relevant CSS on the first anchor.

#board_2 .info .subject {
    background: url("../images/FQ.jpg") no-repeat;
    width: 0;
    height:150px;
    padding-left: 650px;
    display: inline-block;
    overflow: hidden;
}

Sir Osis of Liver

You can remove the moderator text in BoardIndex.template.php -



// Show the "Moderators: ". Each has name, href, link, and id. (but we're gonna use link_moderators.)
if (!empty($board['moderators']))
echo '
<p class="moderators">', count($board['moderators']) == 1 ? $txt['moderator'] : $txt['moderators'], ': ', implode(', ', $board['link_moderators']), '</p>';



Not really necessary, and will save you some work.

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Sir Osis of Liver

Or, you can do it properly -

Quote from: Antechinus on July 08, 2016, 11:56:33 PM
#board_2 .info .subject {
    background: url("../images/FQ.jpg") no-repeat;
    width: 0;
    height:150px;
    padding-left: 650px;
    display: inline-block;
    overflow: hidden;
}


Very nice.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Advertisement: