I was wondering if it was possible to place an image to side of the main text area in the base design of sugarcube 2.0 much like in the example that i have posted below.
If not, then is it possible to make an image wrap around the text and float to the right side instead?
Thanks in advance!
Go to your css stylesheet. First we need to move our regular #story to the side to make room for our new image:
Adjust the size until it fits your needs.
Next we'll create a new div element to house our image:
Check out how it looks and once again adjust its properties to fit your needs.
Now we want the new div-element to display an image. For that we will create a passage called for example "image" and put the needed image in there. For example: By adding this: to StoryInit for example, we will then display the content of the passage "image" within our newly created Div element.
Alternatively you might also work with CSS styling tables instead, depending on your needs.
I was able to make the #image-bar
and it does create the room necessary for the image.
I can't get my image to display in the area though
the image-bar area contains this error instead: Error: <<display>>: passage "image" does not exist
I am guessing i must have named something wrong, like the passage? but naming the passage "image" does not fix the issue
also, it could be that i am trying to load the image from my album, like this: images/teacup.jpg
EDIT: okay so i got the image to display (i misunderstood what you meant with passage, i made a seperate passage for the image to be displayed, and that made it work)
I have a new problem though. Whilst the image is displayed, it seems to ignore width and height and fill out the area. Also the text in the main text area dissapears completely.
Any idea what might be causing this?
EDIT#2: Okay, so i managaed to fix that as well by manually re-sizing the image directly.
Now to my last and final request (sorry for my incompetence!)
How can i make the position of the image (or in this case, the <div> i think) stick to the initial background.
When you press the top-left button, which hides the Story UI (sliding it to the left), then the main text slides with it, and is hidden behind the image, because the image does not follow.
I tried changing the "position" from fixed to absolute and so on, which made no difference, any ideas on how i could accomplish this?
Thanks a ton so far!
The follow CSS example is based on the examples originally supplied by idling, it adjusts the properties of both the #story and #image-bar elements for the 'stowed' state. ... to achieve the same horizontal transition as the side-bar you will need to extend your existing #image-bar selector like so:
note: You may need to adjust some of the EM values to suit your actual layout.
Thanks for the help everyone!