How to add white border around my Banner?

Hello,
I am trying to add a small border around my banner.
I tried to code it in but it didnt seem to work. Not sure why?
So i added just without the border.
Any thoughts?
Thank you!
Ivan
Here is the URL - http://www.the-electronic-cigarette.net

Your header is defined as an id in style.css
So, in your CSS:
#branding {
          background: #ffffff url(images/sky.png) top left repeat-x;
          margin-bottom: -20px;
Change to:
#branding {
          border-color: fff;
border-width: 3px;
          margin-bottom: -20px;
That will create a 3 pixel border around the div.

Similar Messages

How to add a Border around an ImageView

Hi all,
I'm adding a row of photos in my application which are being resized to fit into some constrained space with Preserve Ratio true. They are put in a TilePane, with a Label below each photo.
Basically, I give all my ImageViews a fitHeight of 120 pixels, and let them determine how wide they will become themselves in order to preserve the ratio.
It looks great.
However, I would like to add a Border around these images, as they sometimes fade too much into the background to clearly see the edges. ImageViews themselves donot support borders, so I'm forced to wrap these ImageViews inside another container.... but, no matter what container I use, the container itself refuses to resize itself to fit exactly around the image -- it seems to be completely oblivious of the real size of the Image -- with some parameters the ImageView will simply render itself outside the edges of its container, and with other parameters the container is wider than the ImageView leaving a gap on the right side.
This is yet another instance where I want my ImageViews to resize themselves to fit the available space, resulting in a huge struggle to force these components into their proper straight-jacket. Anyone got any solutions for this?

I'm afraid that also won't work, as the Image needs to be scaled, and the dimensions you are using are from the unscaled image.
I've however am now using this class to get what I want, together with a stylesheet to specify the border it works and I get nice borders.
package hs.mediasystem.util;
import javafx.beans.property.BooleanProperty;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.geometry.Bounds;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
public class ScaledImageView extends Region {
private final ImageView imageView = new ImageView();
private final StackPane effectRegion = new StackPane();
private final ObjectProperty<Pos> alignment = new SimpleObjectProperty<>(Pos.TOP_LEFT);
public ObjectProperty<Pos> alignmentProperty() { return alignment; }
public final Pos getAlignment() { return this.alignment.get(); }
public final void setAlignment(Pos pos) { this.alignment.set(pos); }
public ScaledImageView(Node placeHolder) {
    getChildren().add(imageView);
    getChildren().add(effectRegion);
    getStyleClass().add("scaled-image-view");
    effectRegion.getStyleClass().add("image-view");
    if(placeHolder != null) {
      effectRegion.getChildren().add(placeHolder);
      placeHolder.getStyleClass().add("place-holder");
      placeHolder.visibleProperty().bind(imageView.imageProperty().isNull());
public ScaledImageView() {
    this(null);
@Override
protected void layoutChildren() {
    Insets insets = effectRegion.getInsets();
    double insetsWidth = insets.getLeft() + insets.getRight();
    double insetsHeight = insets.getTop() + insets.getBottom();
    imageView.setFitWidth(getWidth() - insetsWidth);
    imageView.setFitHeight(getHeight() - insetsHeight);
    layoutInArea(imageView, insets.getLeft(), insets.getTop(), getWidth() - insetsWidth, getHeight() - insetsHeight, 0, alignment.get().getHpos(), alignment.get().getVpos());
    Bounds bounds = imageView.getLayoutBounds();
    effectRegion.setMinWidth(bounds.getWidth() + insetsWidth);
    effectRegion.setMinHeight(bounds.getHeight() + insetsHeight);
    effectRegion.setMaxWidth(bounds.getWidth() + insetsWidth);
    effectRegion.setMaxHeight(bounds.getHeight() + insetsHeight);
    layoutInArea(effectRegion, 0, 0, getWidth(), getHeight(), 0, alignment.get().getHpos(), alignment.get().getVpos());
@Override
protected double computePrefWidth(double height) {
    return 0;
@Override
protected double computePrefHeight(double width) {
    return 0;
public final ObjectProperty<Image> imageProperty() { return imageView.imageProperty(); }
public final Image getImage() { return imageView.getImage(); }
public final void setImage(Image image) { imageView.setImage(image); }
public final BooleanProperty preserveRatioProperty() { return imageView.preserveRatioProperty(); }
public final boolean isPreserveRatio() { return imageView.isPreserveRatio(); }
public final void setPreserveRatio(boolean preserveRatio) { imageView.setPreserveRatio(preserveRatio); }
public final BooleanProperty smoothProperty() { return imageView.smoothProperty(); }
public final boolean isSmooth() { return imageView.isSmooth(); }
public final void setSmooth(boolean smooth) { imageView.setSmooth(smooth); }
}

How to add a border around images posted to Facebook?

I am using LR 4.1, also usis PS CS5.
Anyone who uses Facebook to showcase image galleries knows that Facebook changes how images are displayed from time to time. One month it will be on a black background and the next on a white background. And then they put overlay's on top of your images and they change things around whenever they wish. There is not rock solid consistency from Facebook on how they display your images across devices or over time.
What I am trying to do is to add some consistency to how my images are displayed by adding my own border to my images. I need some ideas on how to best do this. The way that I have been doing it does not appear to be ideal and I think someone must have a better way.
Ideally, I would want Lightroom to add a border for me based on some setting under the export manager. But as far I know there is no setting to do this? (Why doesn't lightroom have any border options anywhere yet for anything it exports? This would be relatively simple I think.)
Here is the only way I know how to solve my issue.
First, my other considerations:
I want to keep my original images in my catalog in tact and as is w/o a border and with layers if it is a .psd file. I do NOT want to destructively add a border to the catalog images, only the images that end up on Facebook. I also want to add my watermark image to the final image so that it is done as the last step so that the bottom part of my watermark shows my web site address over the white border on the bottom of the image. Using a droplet and the watermark in the same step does not work properly because it applies the watermark before it runs the action, not after.
I have created an action to add a x pixel white border by:
Merging (flatten) all layers
Creating a new unlocked background "image" layer
Expanding the canvas by x pixels.
Creating a new white filled layer and moving it to the bottom of the layer's pallet.
Adding a 2 pixel black inside stroke to my image layer and adding a drop shadow.
I created a droplet from this action and put it in the droplet folder for LR.
Now for the repeated steps that I am going through...
Select the images that I want to write to Facebook.
Export these images to a new folder using the droplet.
Import the folder of all of these images back into Lightroom.
Move the new images with borders on them into the correct LR FB publish service.
Publish the photos using the sharpening and watermark settings.
Delete the .psd files created in Step #2
The steps that I would like to avoid are #2, #3, #6
Or maybe I am going about this all wrong? Anybody have any better ideas?

You may find it much easier to use the Migrify plug-in from Tim Armes/Photographers Toolbox which does what you want from within Lr.

How to add a border around a video (padding out to a larger size)?

Hi,
I'm having problems doing this in Quicktime Pro. I don't want to increase the size of the visible part of the video, just pad it out with black space. I created a gif file of the size I want and pasted it in, but rather than the video increasing to fit the pasted image, the opposite happened and the image was scaled down to fit the video. Any help gratefully appreciated.

First issue is the GIF format (only 256 colors). Don't use that format.
To add a "black" box (or any other color) to your existing QuickTime file you should first make your image file in a format (other than GIF) that also supports transparency.
Depending on your image editing software the PNG format is the best choice. But JPEG will also work if your use 32 bit color (no transparency layer).
To add this image to your existing QuickTime file follow these steps:
Create the image file (1 bit for just black and white colors) and size it to the dimensions desired. JPEG or PNG will work nearly the same but JPEG doesn't support alpha channels.
So, lets say your have a 320X240 QuickTime file but want a "box" around it sized at 320X320 (square).
Create a 320X320 all black image saved as PNG or JPEG.
Open that file with QuickTime Pro, select "all" (Control-A) and "copy'"(Control-C).
Switch to your 320X240 QuickTime "video" file.
Select all (Control-A) and move to the Edit menu. Pick "Add to Selection & Scale". This will add your image to the entire "video" portion.
Control-J to open the Movie Properties window.
Highlight (single click) on the "Video" track portion of your new composite video.
Click the "Visual Settings" tab.
Here is where you change to position of your video track in relationship to your image track.
The "Offset" is what you need to adjust (because your video is smaller in dimensions than the image track).
Default positioning is 0,0 (upper left). You need to add new values to the offset to set the position of the video track. It may take a few tries to get what you want. Changing the offset values until you get the size and shape you desire.
Save As. Give the file a new name and save as "self-contained" to make a new file.
These same steps can add "video backgrounds" to another "video" track.
One of my pages to show a QuickTime example:
http://homepage.mac.com/kkirkster/crosstown/index.html

How can I get an even white border around 4x6 photo I am printing?

I am doing some photo restoration. I have a very very high res image that I want to print out at 4x6 and 8.5x11. I need it to have an even white border around it.
How can I do this in Photoshop CS5.5? I try to import it into inDesign it the dimensions don't mesh with the border. Any suggestions?
Thanks.

If you want to add the border to the image iteself you could use Image > Canvas Size to increase it accordingly.

How can I create a white border around figures that are in an image? (CS 6; examples+image included)

Hi,
I have CS6 and am wondering how to create a white ("comic style"?) border around figures in an image, as in the examples below. I don't wish to include the black shadow of the border, just the white part.
Examples:
Here's the image I'd like to alter, making a white border around the outline of all five figures:
I researched for quite a while but could find no instructions. It would be very much appreciated if someone knows and would be kind enough to share the technique! Thank you.

If you make the image a layer (opposed to Background)...
You could Select the blue with the Magic Wand as Semaphoric says, then fill with white. Then choose Select - Modify Selection - Contract, and mask or delete the remaining pixels. The Contract operation will give you a nice border the size you choose.
For extra credit, you could use Refine Edge to make the selection more accurate.
Click to see the image against a dark background.
-Noel

I am making a graduation video for my cousin using Final Cut Pro. I have photos layered over videos, and I was wanted to find out how you can add a border around the photos so they stand off of the video. Anyone know what I could do?

I am making a graduation video for my cousin using Final Cut Pro. I have photos layered over videos, and I was wanted to find out how you can add a border around the photos so they stand off of the video. Anyone know what I could do?

You would need an image editor to edit the images and add a border to the image first before importing them into Final Cut.
Cheapest and very good image editor?
PIxelmator.
Located in the Mac App Store. $14.99 USD.
Here is the Pixelmator website to give you an overview of the app.
http://www.pixelmator.com/
Good Luck!

In pages/Pixelmator how do you put a white border around a piece of font, to make it stand out more. Please Help

The Benchwarmers logo, I would like to have a white border around the font to make it stand out. Help please

You would be better served to take a closer look at BeLight's free Art Text 2 Lite, or on YouTube, search for "Pixelmator text effects," or review the several Pixelmator tutorials on their site. Pages does not support the layered text effects necessary to create the Benchwarmers logo, but certainly can incorporate this image once completed through external means. Is the following image the one you have in mind:

Can't get rid of white border around image

http://www.gunnar.ca/laminatepage2.htm
I created a rounded corner in photoshop for my table. I
created a cell in the bottom left corner of the table and placed
the gif. There is a thin whit border around the outer edge of the
gif, so it doesn't look genuinely rounded. Can anyone tell me how
to get rid of that so it looks like the table is actually rounded?
Thank you!

Because the table containing the GIF has a border. In your
styleA.css
stylesheet, the rule:
.border {
border: 1px solid #E5E5E5;
adds a border to the table. Delete the rule. Of course - that
may affect
other things that use the .border class. Or - delete the
class from the
table tag.
Several problems with the page:
styles.css cannot be found
sideNavStyles.css cannot be found
34 vaildation errors:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.gunnar.ca%2Flaminatepage2.htm
Alec
Adobe Community Expert

Problem with white border around images

Hey guys,
I'm new to the creative suite and have just finished running through all of the video tutorials, etc. I'm having a small problem which can be seen in the sample site I'm fooling around with here:
http://www.andrewedunn.com/gsd/
I'd like to get rid of the small white border around the "GS" logo. It is an illustrator document.
Basically I put the letters in place, converted them to paths (so I can resize it) and dropped it in my GoLive document as a smart object.
A google such suggested rasterizing, but I couldn't get it to work after fooling with it a little bit.
Further, if I wanted to add a drop shadow to it, how can I do it so that it is transparent on top of the background images in golive? The one time I tried it, the drop shadow was placed on top of a white background.
Any suggestions would be appreciated!

Are your background images always going to be displayed left-aligned on a black background and always the same size, so that the left half of the logo will always be over the photo and the right half will always be over the black? Or will the size or placement of the photos vary?
Are all of the photographs in approximately the same moderate tonal range, or will some be bright and some dark?
If the background will be consistently as you show it, you should be able to anti-alias your logo against a medium gray on the left and black on the right for acceptable results. If the background is more varied, you are not going to get good results with either GIF or JPG format.
See this related thread:
http://www.adobeforums.com/cgi-bin/webx/.3bc38b6e/3
> Further, if I wanted to add a drop shadow to it, how can I do it so that it is transparent on top of the background images in golive?
Only by exporting as a transparent PNG, but then older browers won't display it properly.
If you are really needing to have a logo that casts transparent drop shadows on top of a wide variety of images, you might consider going the Flash route, even though you aren't planning animation. Flash has very good transparency handling, and there are Flash player plugins that are compatible with browsers that won't display PNG images.

Unwanted white border around a div

I placed a div that I am using for a background. Before I add an image I am testing it out by giving it a blue background. I have the width and height set to 100% and left to 0px and top to 0px. When I test it in a browser (IE 8) or view it in Design view it has a white border around it. There is no border setting or margin setting. Is there some preference setting in Dreamweaver that makes this aproximately 10px border? If so how do I get rid of it?

Thank you both - that helped to clear up some of the issues but others remain. I'm assuming I can keep the dialogue going but will start a new thread if that is required.
I uploaded the page and css files to my server. The page file is http://www.wlvs.com/untitled-1.html and the css file is http://www.wlvs.com/test.css I ame using these file to try out styles. The background div (backgnd) will ultimately be an image but for now I'm just using a color. The "wraper" has an image that I gave a padding to at the top and bottom and for some reason it is showing a dark blue color. - I thought it would allow the background color to show through - shouldn't it??
The other issue is centering the logo in the "header". I suppose I could use <center> but I am trying to figure out what is the css code for doing it. Nothing seems to work. I was able to center the "wraper" image but could not do the logo.
Any help would be much appreciated...

How to add a Border

Hi!
I want to know how to add a border to a particular column (Vertical) in the report. I have no clue, please help me.
Thank you very much.
null

A partial solution:
-- Select a border color, as suggested.
-- Pull down Format/Border, and deselect
the "top" and "bottom" buttons.
This will get you vertical lines around all
cells with data, but not cells with null
values. Also (it's been a while since I
looked at this in detail) this works nicely
from the live previewer but doesn't work in
all output formats - not HTML for instance,
if I recall correctly. Depends on which
type of output you need.
If you have a lot of null cells, i.e. with
no border, the lines is your best option.
Done neatly it looks about the same.
HTH.
-- Allan Plumb

How to make a border around text?

In my latest FCE project, I made a solid color matte clip (dark blue) to set below my titles to give the text a colored background (these titles are not overlaid on video clips, so without the colored matte, the background would be the default black of the Timeline, and I don't want black).
Anyway, so here I have this nice white text overlaid on a dark blue background, looking pretty good, and now I'd like to put a decorative rectangular white border around the text, a thin white line, or a maybe a double white line, sort of like a pinstripe, to elegantly (I hope) enclose the text in a sort of box.
What would be the best way to create such a border? Could I make one on a transparent layer in Photoshop (I have CS-2,) and then import it into FCE as a clip to set the text above? Or is there a simpler way to do it, within FCE?
Any suggestions would be welcome.
Tom

The only option I see on that PieroF webpage is to download it as a .zip file. When I download it and double-click on the icon, I get that zoom-out effect like it's opening, but it doesn't open. Dropping its icon onto the Stuffit icons doesn't do anything either.
Anyway, I just experimented with masking off a colored matte in the way you mentioned, and I think I see how to do it: create a color matte and then lay two masks on top of it, an inner one and an (inverted) outer one, which leaves only a thin line of the color matte still showing. Is that it? For a double pinstripe, I suppose I would do that twice, i.e. create two masked-off mattes, one a little larger than the other, and stack them up on the video tracks?
It's more trouble than the Piero frame generator, no doubt, but effective. Thanks!
Tom B.

White Border Around Template Images

I recently created a "page layout" document from a template. This is my first attempt to use a template and it was all going well. Until I hit "print." When I print the document, the images that were already part of the template are printing with a white border around them. It looks fine in Pages and when I go to Print Preview, but it comes off the printer looking funny. What's the deal?

Thanks for the clarification. I had a hard time selecting that white border around the photos. I couldn't even figure out what it was for awhile. I think the printing problem is related to that white border which is an image, photoBG_triple.png, that is behind the photos & their masks & on top of the lined paper image, notepaper.png. I think all that layering looks nice on screen or PDF, but could be a printing nightmare. How does it look funny? And what kind of printer are you using?

Getting rid of white border around photos when using iphoto to iweb

Hi there,
Am creating web pages in iweb and importing photos from iphoto. Can anyone tell me how to get rid of the white border around my photos (image frame)? Hoping to enhance some of the templates with my own images. I also have photoshop elements and have been having the same problem there. Sure appreciate. Kim Strouble

Welcome to the Apple Discussions. The link to the site is broken. There is a fix for some of the strange goings on since the MobileMe conversion. See Wyodor's post in this thread: http://discussions.apple.com/thread.jspa?threadID=1605665&tstart=0. After applying the fix to iWeb I found I might have to republish a second time, occasionally a third and make sure I cleared my browser's cache.
If you're using Firefox 3 that's a different solution that can be found here: http://discussions.apple.com/message.jspa?messageID=7486799#7486799
TIP: For insurance against the iPhoto database corruption that many users have experienced I recommend making a backup copy of the Library6.iPhoto (iPhoto.Library for iPhoto 5 and earlier) database file and keep it current. If problems crop up where iPhoto suddenly can't see any photos or thinks there are no photos in the library, replacing the working Library6.iPhoto file with the backup will often get the library back. By keeping it current I mean backup after each import and/or any serious editing or work on books, slideshows, calendars, cards, etc. That insures that if a problem pops up and you do need to replace the database file, you'll retain all those efforts. It doesn't take long to make the backup and it's good insurance.
I've created an Automator workflow application (requires Tiger or later), iPhoto dB File Backup, that will copy the selected Library6.iPhoto file from your iPhoto Library folder to the Pictures folder, replacing any previous version of it. It's compatible with iPhoto 6 and 7 libraries and Tiger and Leopard. iPhoto does not have to be closed to run the application, just idle. You can download it at Toad's Cellar. Be sure to read the Read Me pdf file.
Note: There now an Automator backup application for iPhoto 5 that will work with Tiger or Leopard.

How to add white border around my Banner?

Similar Messages

Maybe you are looking for