Nodeone
(Tim Teichert)
20 October 2018 08:07
1
I have a setting in my lander masterpage that adjusts the images to the width of the content.
I find that very useful and I do not want to disable it.
The problem beginns when I insert icons, because they are inflated to the width of the content as well, which looks ridiculous, of course.
Is there a way to prevent certain images from that behaviour?
PS: Setting the scale for the image to “100 %” didn’t help.
Cheers, Tim
Nodeone
(Tim Teichert)
23 October 2018 17:21
4
Sorry - did you ask, if it is a stacks page?
Or can I use Stacks to apply different formating to my images within an Blog-Page?
teefers
(Doug Bennett)
23 October 2018 17:31
5
It sounds like you are asking for some CSS help? As always it’s much easier for folks to help out if you provide a URL to a page.
Nodeone
(Tim Teichert)
23 October 2018 19:53
6
You are probably right.
Here is the link to the page. At the very end of the page you can see the PDF-Icon (which is a transparent png actually) that is scale to fit the width of the page.
https://fantastic-friday.de/Test/files/Kill-Team-Datenblatt-Deutsch.html
teefers
(Doug Bennett)
23 October 2018 20:38
7
The page appears to be a standard blog page?
I assume you are just dragging the image into the blog page?
If you are using RW8, I would put the icons in the resources area.
Then copy the following code into the blog:
<img src="" Style="width:133px">
Right click the png in the resources and select copy macro:
Put the cursor between the empty double quotes in the code above (after src=
, and paste the macro:
<img src="%resource(PDF-Download-Button.png)%" Style="width:133px">
Select the entire code and mark it as code from the format menu item:
It should work in RW7 but never tried it as RW7 resources had issues. It’s a bit involved but will work.
Nodeone
(Tim Teichert)
24 October 2018 13:09
9
ok - two more code questions. I applied the code to the icon and also made a link out of it.
Question 1: Why does the text link next to the icon appear in the font “courier”?
Question 2: Why is my border of “10” that I applied to the image ignored.
It’s on my live-page now (scroll to the bottom):
teefers
(Doug Bennett)
24 October 2018 16:45
10
Question 2 first. The syntax of the statement you coded for the border is not correct. There is no HTML 5a attribute for the border. You need to add a complete border to the style= attribute where the width was specified separated by a ; . This should include the border width, style and color:
<img src="../resources/PDF-Download-Button.png" style="width:53px;border: 10px solid red;"alt="Kill Team Datenblatt Deutsch downloaden" align="left">
Question 1 next. It appears you have the text in question as a sperate link?
It as been marked as “code” like above? The default for the theme(and most themes) is to use “monospace” for code.
You can try to fix this with custom CSS:
code {
font-family: "Lucida Grande" , Arial, sans-serif;
}
This will, however, change all code tags.
The other way would be:
type the text in RapidWeaver outside of a code block
Highlight the text
Select the link button at the bottom
In the link dialog box select resources and pick the PDF
2 Likes
Nodeone
(Tim Teichert)
24 October 2018 17:30
11
ok - got it - it seem that I somehow mixed the link into the code of the image.
what I do I enter, when I want the border to be transparent? Or should I add a some transparent pixels to the png?
teefers
(Doug Bennett)
24 October 2018 17:36
12
If all you want is space (transparent) just add either margin or padding instead of a border:
style="width:53px;padding: 10px;"
system
(system)
Closed
24 November 2018 03:36
13
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.