Newbie question about text and attachments

[shortmort37]

I posted my initial inquiry to the Styles Support and Discussion Forum, but I don't seem to be getting any traction there - so, I am trying here.

I've made some changes to phpBB code that I'd like to incorporate into an extension. The goal is to create a gallery style for a mix of attachments and text, like so:

(The webpage for that screenshot is here.)

As you can see, however, text that follows attachments does not wrap to the next line (highlighted here), and that is what I would like to see happen. I'm thinking that there must be a text block whose behavior I can manage in content.css, but I admit to being out of my depth. Can anyone point me in the right direction?

Thanks
Dan

[rxu]

Without having the actual code, I doubt anyone's able to get what happens there.

[shortmort37]

Fair enough. The thumbnails in the screenshot are presented by this change to <root>/styles/prosilver/template/attachment.html:

Code: Select all

		<!-- IF _file.S_THUMBNAIL -->

	  <figure><a href="{_file.U_DOWNLOAD_LINK}"><img src="{_file.THUMB_IMAGE}" alt="{_file.DOWNLOAD_NAME}"  title="{_file.DOWNLOAD_NAME} ({_file.FILESIZE} {_file.SIZE_LANG}) {_file.L_DOWNLOAD_COUNT}" /></a>
         <!-- IF _file.COMMENT --><figcaption>{_file.COMMENT}</figcaption><!-- ENDIF -->
      </figure>

		<!-- ENDIF -->

The <figure> and <figcaption> tags are described by these additions to <root>/styles/prosilver/theme/content.css:

Code: Select all

/* Horizontal attachments */
figure{
    display:inline-block;
    width:350px;
    margin:5px 5px 5px 0px;
    white-space:normal;
    background-color:#FFFFFF;
    padding:2px;
    vertical-align: top; 
    border: 2px solid #115098;
    transition: all 0.4s ease 0s;
}
figure:hover{
    display:inline-block;
    width:350px;
    margin:5px 5px 5px 0px;
    white-space:normal;
    background-color:#FFFFFF;
    padding:2px;
    vertical-align: top; 
    border: 2px solid #115098;
    box-shadow: 3px 3px 2px #888888;
    transition: all 0.4s ease 0s;
}
figcaption{
    display:block;
    width:350px;
    text-align: left;
    font-style: italic;
    font-size: small;
    margin-top:0px;
}

Dan

[shortmort37]

*Bump*. There's the actual code. No takers?

There must be some CSS that controls the presentation of the highlighted text, that trails the attachment - indeed, any text that's submitted with the post. Can no one point me to where that might be?

[shortmort37]

Apparently providing the code was a necessary but not sufficient condition.

Disappointing.

-Dan

[Sniper_E]

Let's see if we can cheer you up. This may fix that wrap problem.

Code: Select all

figure {
    float: left;
    display:inline-block;
    width:350px;
    margin:5px 5px 5px 0px;
    white-space:normal;
    background-color:#FFFFFF;
    padding:2px;
    vertical-align: top; 
    border: 2px solid #115098;
    transition: all 0.4s ease 0s;
}

[shortmort37]

Noice!

Many thanks, Ed!

Dan

[Sniper_E]

Your .figure class and your .figure:hover class have duplicated variables.

You only need what changes on hover.

Code: Select all

/* Horizontal attachments */
figure{
    float: left;
    display: inline-block;
    width: 350px;
    margin: 5px 5px 5px 0px;
    white-space: normal;
    background-color: #FFFFFF;
    padding: 2px;
    vertical-align: top; 
    border: 2px solid #115098;
    transition: all 0.4s ease 0s;
}

figure:hover{
    box-shadow: 3px 3px 2px #888888;
}

figcaption{
    display: block;
    width: 350px;
    text-align: left;
    font-style: italic;
    font-size: small;
    margin-top: 0px;
}

[shortmort37]

Oy! But of course. Thanks for the catch!

Dan