0 votes
by (160 points)
Hi everyone!

I'm having some trouble at styling an image in Harlowe 2. I can align it to the right by using the property inside the <img> tag. If possible, I'd like to style it using CSS, since most inline <img> properties are outdated or disencouraged. Specifically, I'm trying to add border-radius and some space between the image and the text (I don't know if I should use margin, padding or border for that).

I tried closing the <img> tag in a hook and styling the hook in the CSS sheet, but it didn't work.

Thanks in advance! Any tip will be appreciated.

1 Answer

+1 vote
by (159k points)

Without an example we have to guess where the img element in your Passage is in relation to the text you want to display it with. I will assume your Passage looks something like the following:

Some text\
<img id="fjord" src="http://www.gstatic.com/webp/gallery/1.jpg">\
Some more text\
<img class="action" src="http://www.gstatic.com/webp/gallery/2.jpg">\
Even more text

note: any CSS you choose to use should be placed within your story's Story Stylesheet area.

There are a number of different ways you can use CSS selectors to target a specific img element or even a group of such elements. The simplest two being:

1. HTML element ID - like the fjord ID added to the first image in my above example.

#fjord {
	border-radius: 1em;
	margin: 1em;
}

2. CSS class name -  like the action class added to the second image in my above example.

.action {
	border-radius: 1em;
	margin: 1em;
}

 

If for some strange reason you don't want to use standard HTML/CSS selectors then you could even use a named hook as the basis of CSS selector. eg. The following Passage content:

|outside-images>[<img src="http://www.gstatic.com/webp/gallery/3.jpg">]

... creates a HTML structure similar to the following:

<tw-hook name="outsideimages"><img src="http://www.gstatic.com/webp/gallery/3.jpg" data-raw=""></tw-hook>

... notice that the dash in the named hook's name as used in the Passage is removed in the name given to the HTML element. The above HTML can be targeted by a CSS selector like the following:

tw-hook[name="outsideimages"] img {
	border-radius: 1em;
	margin: 1em;
}

 

by (160 points)
Oh, I see, I didn't know you could use ID's or classes in Harlowe, and my HTML is not the best yet.

Thanks Greyelf!
...