Picture border color

RapidWeaver Classic
1

Hi,

I am working on a project where I am using a lot of pictures. I add a white border to almost all the pictures.

My question is if it is possible to change the border color from the default black to white so that I do not have to change it manually every time.

I am using Foundation for my site styling, and I can not find anywhere in sitestyles (or anywhere else for that matter) to change this. I am mostly using the image stack or the right/left floating image stacks from Stacks 3, because it is easier for me to scale my pictures with these stacks.

Ideas will be appreciated :slight_smile:

2

There is no default border colour applied to images so I am slightly confused as to where that is coming from on your site.

Never the less you can easily add a white border to all of your images by adding one of the following to your site wide (or page) CSS in RapidWeaver

To Target just Foundation Images:

	border: 2px solid #ffffff
}```

**or to target just Stacks built in image stack images:**
```img.imageStyle{
border: 2px solid #ffffff
}```

**or to target all images** 
```img{
border: 2px solid #ffffff
}```
1 Like
3

Thanks @tav

I don’t know why it comes up with color black every time I choose to apply a border - but it does :slight_smile:

Well, now I really need to learn, because I am absolutely not a code guy. So I need a little instructions to how and where I put in the snippets you propose here. Can you help me with that too :slight_smile:

4

Firstly, if you can publish a small test page and give me the url then I will be able to tell you where the black border is coming from. It is probably better to get this sorted out first.

In terms of adding the CSS that I mentioned just do the following with ONE of the snippets that I provided.:

If you want it to apply to every page in your site then simply enter it into the Site Wide CSS as in this screenshot

Screen Shot 2015-12-31 at 14.00.31.png1048×459 34.7 KB

If you only wish it to apply to certain pages, then put it into the page inspector CSS for the relevant pages as in this screenshot

5

Thanks @tav

Here is a linkt to a test page http://peterkroman.dk/Kroman_Slaegt/Test/page30/

6

I don’t see a black border on any of the images that you have not added the white border to manually. They are all borderless.

In the case of that page, which is using Stacks built in image stack, you could use either the second or third snippet that I gave you. If you intend to have a mixture, or simply want to add a border to every image then use the third snippet. The danger with the third snippet is that it will target every image on the page - potentially including ones in the header or menu system.

It would therefore be my recommendation to concatenate the first and second snippets together in order to add a border to both stacks and Foundation images - that way you can use whatever you like. The snippets also have the advantage that they target the image itself and not the stacks container in which it sits. This is particularly important with responsive Foundation images where you can specify a max-width. The snippet will ensure that the border follows the image (which will be limited in width) rather than the stacks container around it (which will remain at 100% width).

So the CSS would look like this:

border: 3px solid #ffffff
}```
7

PS - Just remember to remove the borders that you have already applied in the stacks settings.

8

There are white borders around many of the pictures on the site. Look at the first picture in the content of the page :slight_smile: All these borders are applied manually and it is in that process I have to change the color from black (default) to white (which is what I want).

Skærmbillede 2015-12-31 16.40.22.png928×381 270 KB

I really don’t want to apply borders to all pictures.

What I am after is a way to set the default bordercolor to white in stead of black.

9

Yes, I saw the white ones that you had applied manually. The code in the above post will do exactly that for you automatically.

What I could not see was a black border around the images that you had not applied the manual border to.

For example, the following image has no manual white border but does not have a black one either. Perhaps you could publish a page without your over rides so that I can see the problem black borders please.

Screen Shot 2015-12-31 at 16.35.45.png954×341 344 KB

10

I think what he may be asking for is that the color selector default to white instead of black… Maybe??

So he can just click the color button where he wants a border, not click then have to choose the color.

11

@swilliam

You’ve got it right :slight_smile:
Sorry if I didn’t express it clearly enough.

I don’t use black borders at all. Either I use white borders og no borders, and the color selector for borders is per default black, and therefore I have to change the color every time I need to apply a border (which in my case always will be white).

12

@peterkroman, You’re talking about the inspector correct?

You have to turn on the border width anyway so why so hard to change the border colour from the colour picker?

Black is the universal dev standard typically for any option that uses the colour picker.

If this is Theme related, you might be able to go into the Theme source and modify the default to be white but then you have to modify it each time you update the Theme and just another thing to remember when the Theme has an update. Note that not all Themes will set this as default in their configuration, most, if not always, this is a RW based setting, not a Theme setting.

Brad

13

Yes I am talking of the inspector routine.

It is not hard to change the color, but it was just a question if it was possible to change a default value so that you don’t have to do the same simple thing several hundred times when adding content to your site.

Now I know that this i not possible.

Thanks for your help everyone :slight_smile:

14

@peterkroman, perhaps this might be a feature request for RW Preferences that you could submit to Realmac? I can see it’s usefulness for sure, but that could open a whole bunch of feature requests for configuration settings that could become overwhelming for development, bug hunting, support…

Brad

15

OK, so now I understand. If you don’t want to add CSS to do it automatically then this is a job for Stacks 3 partials. Simply drop in an Image stack, click the partial button to create a partial from it and unpin the image content area.
Set you white border in the partial settings and then every time you drop this image partial onto your page it will have the border set as you want and you can simply add an image as normal into the unpinned content area.
@isaiah has a video introduction to partials here

I would however, re-iterate what I mentioned above. If, as you mention, you are planning to use Foundation images, then be careful if you need to apply a max-width as this will be applied to the image inside your white border and thus the border will not follow the limited width image. If all your images are 100% width of their container (eg a column) then this is not an issue.

By the way the default border color is a Stacks feature and nothing to do with RapidWeaver. Black is a sensible choice as most pages are built with a white background.

16

Thanks for the correction @tav! :slightly_smiling:
Brad

17

Hello.

I have a similar problem. First of all I am an artist/writer/musician, not IT. There are simple things I cannot seem to do with RW. Like change the color around the picture. As far as I can tell RW just puts the picture in a white field that I cannot access or change.

Screen Shot 2016-01-22 at 11.57.24 AM.png1016×224 223 KB

It is not a ‘border’ issue or if it is I cannot do anything about it. In this case, if i could just change that white color to black I would be happy - for the moment. It would be better if I could expand the image to fit, but I can find no way to do this -the white background just expands with the image.

I’d also like to be able to do it without having to use code. I buy software to make life easier, not to have to take classes just to build a simple web page.

Thnx

18

Sorry, but it’s just one thing after another…I try to put in a text above the image. I tried a separate column, and putting the text on top of the page. No matter what I do it shows up in the image frame.

Screen Shot 2016-01-22 at 12.15.59 PM.png1090×295 273 KB

please don’t tell me to use header helper, cuz I’m pretty much disgusted with that.

Maybe if I can figure out the white border problem I can work around it.

19

Well, lets just lay it all on… So waiting for some answers on the above posts, i decided to try and do some more work - like maybe headers…OMG!

google led me to a FAQ page that said to do format/HTML - choose heading etc, but all the options are greyed out!

So there’s not a lot I can do with RW apparently without just encoding everything -which kind of defeats the purpose as far as i am concerned.

Sorry that all I can do is get stumped and frustrated. I’ve already published my page with RW -which didn’t seem to have all these problems initially- or I’d not bother with RW.

I simply am too busy with other work-flow to have to research every tiny little functionality (that won’t function) of RW.

Are there other web building options for mac? I sorely miss frontpage - I could do stuff with it.

20

It is hard for someone to reply unless you give some specific info, what theme are you using, are you using stacks, page type? Url?