Re: [tw] [TW5] ExternalImage styling

[andrew.j.harrison84]

Thank you for your feedback Jeremy. It reminded my of some styling techniques which can be used to identify and style elements without assigned classes. It is risky if there are matching elements that are patterned the same way. I still need to tweak it for different size screens but here is what I have in my stylesheet, please let me know of possible problems:

html .tc-tiddler-body > embed, .tc-tiddler-body > iframe {

     margin: -17px -0px -63px -43px;
     width: calc(100% + 86px);
     height: 600px;
     z-index=-2;
     border-bottom-right-radius: 1em;
     border-bottom-left-radius: 1em;
     -moz-border-radius-bottomright: 1em;
     -moz-border-radius-bottomleft: 1em;
     webkit-border-bottom-right-radius: 1em;
     webkit-border-bottom-left-radius: 1em;
}

html .tc-tiddler-frame img, .tc-tiddler-frame svg, .tc-tiddler-frame canvas, .tc-tiddler-frame embed, .tc-tiddler-frame iframe {
    max-width: calc(100% + 86px);
}

Sent from my Samsung Epic™ 4G Touch

Jeremy Ruston <jeremy...@gmail.com> wrote:

Hi Andrew

On Sat, Dec 6, 2014 at 11:54 PM, andrew.j.harrison84 <andrew.j....@gmail.com> wrote:

Is it possible to use CSS to style the iframe generated when using the _canonical_uri field?

There's no class assigned to the iframe at the moment, so you'll have to wrap it in an element that does have a class. For example:

<div class="tc-my-transcluded-tiddler">

{{my tiddler with a canonical uri field}}

</div>

 

Then in the stylesheet:

. tc-my-transcluded-tiddler iframe {

border: 10px solid red;

}

Would that be sufficient?

Best wishes

Jeremy.

Sent from my Samsung Epic™ 4G Touch

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

[Tobias Beer]

Hi Andrew,

 

width: calc(100% + 86px);

Put a...

width: 100%;

... as a fallback in front. Thinking of overflow, are you sure it's supposed to be a + rather than a - ?

height: 600px;

Did you test that? Won't it distort the embedded image? Or would you just have a bigger frame around a smaller image? Unless your images come in the same size, I would not set a predefined height... but perhaps that's needed, didn't test.

     z-index=-2;

Care to explain?

Also, what really helps is to make a quick TiddlySpot / upload a basic example to dropbox and let us take a look. Makes it less hypothetical and a lot easier to check.

Best wishes, Tobias.

[andrew.j.harrison84]

     Thank you so much for your input Tobias.

     I do need the fallback.

     The height wasn't me, it was Internet Explorer Developer (f12 key). I use chrome and IE10.

     The z-index came from previous experiments with external images, embedding and I plan on expanding my image to the full height of my tiddler once I figure out the title bar and how to get it to float above the external image. It is hard to program for all platforms.

     My quick tiddlyspot (name inspired by you) is t5a.tiddlyspot.com. Please forgive me for not asking first if I can pay tribute to you on my wiki. Your feedback is greatly treasured.

Sent from my Samsung Epic™ 4G Touch

[Tobias Beer]

Hi again, Andrew...

An alteration of the following may be interesting to you...

Embed An External Page @tb5

It uses <iframe> instead of <object>, which always seemed more of an flash thing in terms of what people use(d) it for ...nowadays its benefits, whichever those were, seem to fall short of the problems.

My quick tiddlyspot (name inspired by you) is t5a.tiddlyspot.com. 

Please forgive me for not asking first if I can pay tribute to you on my wiki.

Haha, consider it paid.  :D

Best wishes, Tobias.