Hover or drop shadow for theme containers (& 2 backgrounds)

Miss Lemon
Administrator

Swinging on a vine looking for that ever elusive creature.

Posts: 581

Hover or drop shadow for theme containers (& 2 backgrounds) Nov 15, 2016 5:18:57 GMT

Quote

Post by Miss Lemon on Nov 15, 2016 5:18:57 GMT

support.proboards.com/thread/593181/forum-hover-shadow-over-background

Thanks Tumbleweed!

=======================================================

Add (either of these codes) to stick this at the bottom of your style sheet

==========

What I might call a floating carpet.
background color over

#wrapper{

background-color: #111111;

border-radius: 10px;

margin-top: 10px;

margin-bottom: 10px;

box-shadow: 1px 1px 10px 1px #000;

padding:8px;

}

-----

you can add a image where the color #111111 is.
So it would be:

background-image:url(your link here);background-repeat: repeat;

But that wouldn't be the box shadow part as the image although you can add an image to your border but I doubt that it the look you are going for.

As far as adding box shadow to the containers, sure you can do that although having both around the wrapper and containers might be over-kill but maybe that isn't what you meant anyway.

.container{

background-color: #111111;

border-radius: 10px;

margin-top: 10px;

margin-bottom: 10px;

box-shadow: 1px 1px 10px 1px #000;

padding:8px;

}

Do play with the style settings as I just threw some numbers/colors in there

-----

Edges:
This adds a color background hovering over the background image.

.container{

background-color: #f5f0bd;

border-radius: 15px;

margin-top: 10px;

margin-left: 10px;

margin-right: 10px;

margin-bottom: 10px;

box-shadow: 1px 1px 15px 1px #000;

padding:8px;

}

Edges:

This adds an image that hovers over another background image.

.container{

background-image:url(your link here);background-repeat: repeat;

border-radius: 15px;

margin-top: 10px;

margin-left: 10px;

margin-right: 10px;

margin-bottom: 10px;

box-shadow: 1px 1px 15px 1px #000;

padding:8px;

}

Last Edit: Mar 30, 2017 21:58:42 GMT by Miss Lemon

Time to bake some Lemon cake.

[imgsrc="https://images2.imgbox.com/ce/53/kQz3FXPi_o.gif"/]

Miss Lemon
Administrator

Swinging on a vine looking for that ever elusive creature.

Posts: 581

Hover or drop shadow for theme containers (& 2 backgrounds) Mar 30, 2017 3:00:39 GMT

Quote

Post by Miss Lemon on Mar 30, 2017 3:00:39 GMT

Experimenting below:

.container{

background-image:url(http://i67.tinypic.com/2u6eoo7.jpg);background-size cover;

border-radius: 15px;

margin-top: 10px;

margin-left: 10px;

margin-right: 10px;

margin-bottom: 10px;

box-shadow: 1px 1px 15px 1px #000;

padding:8px;

}

Last Edit: Mar 30, 2017 3:19:04 GMT by Miss Lemon

Time to bake some Lemon cake.

[imgsrc="https://images2.imgbox.com/ce/53/kQz3FXPi_o.gif"/]

Miss Lemon
Administrator

Swinging on a vine looking for that ever elusive creature.

Posts: 581

Hover or drop shadow for theme containers (& 2 backgrounds) Mar 30, 2017 4:45:37 GMT

Quote

Post by Miss Lemon on Mar 30, 2017 4:45:37 GMT

Turns out that I found THIS thread where there's more to this.

support.proboards.com/thread/432166/inner-border-background-solved?page=1&scrollTo=5049562

Here's a code that makes the background transparent:

/* border around forum */

#wrapper {background-color: fade(@container_inner_border_color, 50%); padding: 1.3em;}

Check out more at that link!

I'm using this transparent one so far on my little dutch boy and girl tile background theme for this site. Looks beautiful!

-----

I like this one. It has rounded corners. It's not opaque/transparent but would look great on a different theme than my dutch boy and girl.

/* border around forum */#wrapper {background-color:@container_inner_border_color;background-image: url('http://images.proboards.com/v5/banners/texture-stripe-light.png') ;padding: 4.3em;border-radius:100px}

Last Edit: Mar 30, 2017 4:57:34 GMT by Miss Lemon

Time to bake some Lemon cake.

[imgsrc="https://images2.imgbox.com/ce/53/kQz3FXPi_o.gif"/]

Miss Lemon
Administrator

Swinging on a vine looking for that ever elusive creature.

Posts: 581

Hover or drop shadow for theme containers (& 2 backgrounds) Mar 30, 2017 5:14:34 GMT

Quote

Post by Miss Lemon on Mar 30, 2017 5:14:34 GMT

Shrike's thread:
support.proboards.com/thread/430584/css-border-forum

/* border around forum */

#wrapper {background-color: @container_inner_border_color; margin-bottom: 10px; padding: 1.3em;}

He gives a lot more options and left links to CSS sites for us to tinker with this code. Cool.

He also gives instructions for if you want to do certain boards like this.

---

Hey, is there a way to make it so it does not wrap around the banner?

header {overflow-x: hidden; margin: 0 auto; width: @wrapper_width;}

---

Moving the border line just below Chat box but before bottom ad.

As for moving things above/below the border, you need to place them inside/outside the "wrapper" div. Go to Themes > Layout Templates > Forum Wrapper and find this section near the bottom:

$[footer]

</div>

{if $[is_mobile_browser]}

<br /><p class="center">Switch to the $[mobile_switch_link].</p>

{/if}

</body>

That closing </div> tag is the end of the wrapper. To move the bottom ad outside the border, move the $[footer] tag below it. This will also include your footers, so you'll probably need to move the chatbox code from there into the forum wrapper template.

---

/* curved border around forum*/

#wrapper {background-color: @container_inner_border_color; width:1000px; padding: 7px;

border-radius: 1em 20em 1em 1em;-moz-border-radius: 1em 20em 1em 1em;-webkit-border-radius: 1em 20em 1em 1em;

border: 10px solid;

}

This looks a lot like what I've seen other people do to make it look less square, but unique shaped top background.

---

Mar 3, 2015 19:01:10 GMT @aaka said:

Nov 23, 2013 22:29:05 GMT @doctorkitkat said:

Is there a way to NOT include the sidebars in it?

Try putting #sidebarr-center where #wrapper is in the code. Here is my code for example:

/* border around forum*/

#sidebarr-center {background-color: @container_inner_border_color; width: 1350, padding: 10px;

border-radius: .2em;

border: 3.5px solid #ffffff;

}

That is what separated the sidebars and the forum for me. Hope it works!

Last Edit: Mar 30, 2017 5:45:29 GMT by Miss Lemon

Time to bake some Lemon cake.

[imgsrc="https://images2.imgbox.com/ce/53/kQz3FXPi_o.gif"/]

Miss Lemon
Administrator

Swinging on a vine looking for that ever elusive creature.

Posts: 581

Hover or drop shadow for theme containers (& 2 backgrounds) Mar 30, 2017 5:29:24 GMT

Quote

Post by Miss Lemon on Mar 30, 2017 5:29:24 GMT

Check out THIS link..... brian comments

support.proboards.com/thread/470864/background-issues-fixed?page=1&scrollTo=5390282

-----------

and THIS thread about head/base/middle sections of the floating background.

support.proboards.com/thread/472568/border-forum-framed

------------

this thread shows how to put the code to make a glitter border around floating background or around containers.

support.proboards.com/thread/501566/

Last Edit: Mar 30, 2017 5:44:51 GMT by Miss Lemon

Time to bake some Lemon cake.

[imgsrc="https://images2.imgbox.com/ce/53/kQz3FXPi_o.gif"/]

Miss Lemon
Administrator

Swinging on a vine looking for that ever elusive creature.

Posts: 581

Hover or drop shadow for theme containers (& 2 backgrounds) Mar 30, 2017 5:46:40 GMT

Quote

Post by Miss Lemon on Mar 30, 2017 5:46:40 GMT

Jun 5, 2015 0:40:57 GMT @tumbleweed said:

Jun 4, 2015 3:14:50 GMT @misform said:

Is there a way to extend the border all the way off the edges on the bottom and top but still be restricted by the width?

Since Shrike hasn't been around for a while, guess I'll help you out. What I do, is make a new div and put it right above the <head> tag. Like this:

<head>

and then the closing tag </div> would go right after the closing body tag like so:

</body>
</div>

You could of course add an id to that divide above and move the css style to your style sheet:

<div id="new_wrapper">

And the css in your style sheet:

#new_wrapper{

background-image:url('http://i657.photobucket.com/albums/uu300/EliteList/Bkgrns/Plaids/th_14.png');

background-repeat:repeat;

background-attachment: fixed;

position:relative;

margin:auto;

margin-bottom:-20px;

width:80%;

}

That's how I'd do it. Just keep in mind if you are using percentages, what you have set in your visual editor in the width slot will be a percentage of the 80% or whatever you put in the new div. If you are using pixels the pixel in the new div needs to be larger than the pixels you have set in the visual editor. Hope that makes sense.

Time to bake some Lemon cake.

[imgsrc="https://images2.imgbox.com/ce/53/kQz3FXPi_o.gif"/]

Lemon Cake

Hover or drop shadow for theme containers (& 2 backgrounds)

Post by Miss Lemon on Nov 15, 2016 5:18:57 GMT

Post by Miss Lemon on Mar 30, 2017 3:00:39 GMT

Post by Miss Lemon on Mar 30, 2017 4:45:37 GMT

Post by Miss Lemon on Mar 30, 2017 5:14:34 GMT

Post by Miss Lemon on Mar 30, 2017 5:29:24 GMT

Post by Miss Lemon on Mar 30, 2017 5:46:40 GMT

Quick Reply