Image Sizing, Text Alignment and Formatting

[Harvey]

Next question....

Here is simulated nabble image code

[nabble_img src="IMAGE_NAME.jpg" border="0"/]

if you change it to this:

[nabble_img src="IMAGE_NAME.jpg" border="1"/]

you get a nice neat 1 pixel black border on your image.  It really helps finish images.

I'm wondering if I can change the COLOR of the border or the STYLE.

Border styles = double, outset, insert, ridged, dotted, dashed etc...

[Harvey]

Hugo it seems that no matter how much padding of margin I add around an image I can only get "1 em."

In other words I see the difference between no margin and 1 em, but when I go to "2em" or "10em" it still looks like 1em.

Also I don't think I am doing this properly in terms of variable margins.

Is this correct:

[nabble_img src="mont_orford_1999_a.jpg" border="1" width="275" class="right" style = "margin:0 1 1 2em " /]

[Hugo <Nabble>]

Yes, you can use the style property:

<nabble_img src="t.png" style="border:3px dotted blue"/>

[Harvey]

Can I use hexidecimal colors too?

Based on your input for color - I tried this:

Normal Font Size

[font size=large]Font Size Large[/font]

is there a way to modify font sizes?

[Hugo <Nabble>]

Harvey44 wrote

Can I use hexidecimal colors too?

Yes. Example: #FFFF00 (note that it starts with a '#' char)

Harvey44 wrote

Based on your input for color - I tried this:

Normal Font Size

[font size=large]Font Size Large[/font]

is there a way to modify font sizes?

Yes. You should use a number:

<font size=1>Size1</font>
<font size=2>Size2</font>
<font size=3>Size3</font>
<font size=4>Size4</font>
<font size=5>Size5</font>

Size1
Size2
Size3
Size4
Size5

[Harvey]

Thank you.

Next question...

Is it possible to limit the width of the text area? In our newspaper we are limiting our images to the "large" size (750 px) and would like the text to also be confined within that size range.

I thought I had seen this somewhere, but can't seem to find it.

[Hugo <Nabble>]

You can use this custom CSS code:

.nabble .message-text {max-width: 750px;}

[Harvey]

Hugo <Nabble> wrote

You can use this custom CSS code:

.nabble .message-text {max-width: 750px;}

I can't make that work?

But by "quoting" you in the response I just learned what the "RAW TEXT" feature is for!

You can enter code into a forum and it will show as code. Way cool.

[Harvey]

I've never concerned myself with the ORDER of things in the CSS window. Does that matter? Maybe that is why I can't limit text width?

Also is there a way to "justify" blocks of text so that they are flush with the margins on both the right and left sides?

[Hugo <Nabble>]

Please try this:

.nabble .message-text,
.nabble .root-text {
    max-width: 750px;
    width:750px;
}

[Hugo <Nabble>]

Harvey44 wrote

I've never concerned myself with the ORDER of things in the CSS window. Does that matter? Maybe that is why I can't limit text width?

Please try the other code I just posted.

Harvey44 wrote

Also is there a way to "justify" blocks of text so that they are flush with the margins on both the right and left sides?

The code is:

.nabble .message-text,
.nabble .root-text {
    text-align:justify;
}

[Harvey]

Can the code be joined together like this:

.nabble .message-text,
.nabble .root-text {
    text-align:justify;
    max-width: 750px;
    width:750px;
}

It seemed to work except one of my images, the only one that was right justified, disappeared.?

Otherwise looks good.

[Hugo <Nabble>]

Harvey44 wrote

Can the code be joined together like this:

.nabble .message-text,
.nabble .root-text {
    text-align:justify;
    max-width: 750px;
    width:750px;
}

Yes

Harvey44 wrote

It seemed to work except one of my images, the only one that was right justified, disappeared.?

You may edit the post and try playing with the style property to see if you can fix the image.

[Harvey]

I tried a lot of things including eliminating style all together:

[nabble_img src="PIC.jpg" border="0" width="260" class="right" /]

[raw><nabble_img src="PIC.jpg" style="border:4px double white" width="260" class="right" /]

Can't seem to figure it out. Will try to reupload the pic but I cant see how that would matter?

Does the style somehow conflict with the text alignment or width?

Also can't seem to make the "raw" feature work in this post.

[Hugo <Nabble>]

Please post the permalink of the message that has the broken image and I will take a look.

[Harvey]

Hugo <Nabble> wrote

Please post the permalink of the message that has the broken image and I will take a look.

I think I need to reupload the image.

Next question... in our newspaper I'd like to add some "padding" between the left margin of the photos and text and the left hand side of the embed window (blue border).

Can you show me how to do that globally with the CSS?

[Harvey]

Hugo - regarding captions under pictures that are not centered .... Google (Blogger) just added a caption feature in the last few days. When you look into the HTML this is what you see surrounding the image code:

 (IMAGE CODE HERE)

Add caption

I couldn't make this code work in our Nabble Newspaper.

Is there some revision of this code that would work?

[Harvey]

This is a problem I am having consistently:

When I try to combine border styles and margins - I end up somehow deleting the image.

What is the correct way?

[nabble_img src="IMAGE.jpg" style="border:8px solid white" style="margin:1em" width="760" class="center"></raw]

<raw>[nabble_img src="IMAGE.jpg" style="border:8px solid white, margin:1em" width="760" class="center"]

[Hugo <Nabble>]

To generally change the style of those images, you can use some CSS like this:

.nabble .message-text img {
    border: 1px solid blue;
    margin: 20px;
}

[Hugo <Nabble>]

Actually, the correct CSS code is:

.nabble .message-text img,
.nabble .root-text img {
    border: 8px solid white;
    margin: 10px;
}