Adding a textbox

RapidWeaver Classic General
1

Hello,

I would like to create a textbox on individual pages on my site; with a slight shadow on it to set it apart from the page.

I would like to add text and images inside these text boxes.

Please can someone advise how I do this on RW? I dont have any stacks, so need to know what type of page i should use and the code involved.

thanks! @Oscar - this is probably one for your genius!!

2

So you want to do this on a NON stacks page, right??

3

yes please

similar style to this in terms of the text box, the padding inside the textbox etc - http://www.canonjjohn.com/jjohn

4

Sorry, will have to wait for someone else (hopefully @Oscar can help) as I am not sure. Good luck!

5

Ive got this so far - but want to create some padding inside the textbox so that the text doesnt hug the border. i also want the border to be much more subtle like i shared in the example website

Screenshot 2016-04-13 20.59.01.png1171×168 37.2 KB

Screenshot 2016-04-13 20.58.44.png917×567 33.6 KB

6

Try this: https://jsfiddle.net/willwood/amsnh1f8/2/

Copy the HTML code and paste it into any RW styled text or HTML region. Then copy the CSS code and paste it into either the custom CSS box in the Page Inspector or the custom.css file in your theme. Both snippets of code combined should give you an instant shadowed box, almost identical in appearance to the one you showed on the example website.

I’ve added 20px of padding for you, which pushes the content away from the extreme edge of the box. Likewise if you wanted to push the box away from other content on the page, a margin can be used.

The CSS box shadow property is quite complex. But you can find an excellent working example here, and use this free tool to preview and generate the correct code (choose to generate a box shadow):
http://css3generator.com/

It is wise to get into the habit of separating HTML code, from CSS code (as I’ve done in my example). It keeps things more simple, cleaner and more readable.

You could also take the same .shadow-box class selector and apply it on an unlimited number of other elements in a page - where you want to apply the same shadow style.

5 Likes
7

You are my HERO! Works perfectly. YOU LEGEND!

1 Like
8

Hi Will,

Just quickly, how would I code in a Margin into that, to push content away from it? Would I put it in the CSS or HTML?

9 
.shadow-box {
  padding: 20px;
  box-shadow: 0px 1px 5px #c9c9c9;
  background: #ffffff;
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

or shorthand

.shadow-box {
  padding: 20px;
  box-shadow: 0px 1px 5px #c9c9c9;
  background: #ffffff;
  margin: 20px;
}
2 Likes
10

@JimmyChainey

Thank you for the honor, but for such things Will Woodgate @willwood is the right man :wink:
… and at this time I was sleeping. This morning, all is done.
… and I have learned many things, thanks!

2 Likes