stroke lines & drop shadows

Hi all, I was wondering if there is a way to have a coloured stroke line around the different sections, widgets, header and other stuff? I would also like to add a drop shadow to same sections, widgets, header and other stuff. Can anyone help?

Thanks,

Macca.

Hi,

It is possible. Can you provide your forum link and specify where do you want to add border (storke line) and shadow exactly?

Hi there here is my link
http://vickycolts.clictopic.net/forum

i would like to add a thin red line around all the widgets on my portal page and home page along with the nav bar banner at the top amd around the blue on the actual forums section. I would also love to add drop shadows to the same as all of the above.

Thanks again for such a quick reply.

Like this or do you want to change something http://i.imm.io/6iLS.png?

NAV =

Code:

.navbar {
    border: 1px solid red;
    box-shadow: 0 0 10px #888888;
}

It's not a quick replay, my net is dead tonight

yes like in the link you have posted, ive also just relised that only members can see my forum, do you want me to lift that for a few mins so you can see it properly? also iam not very good with code so if iam a bit slow please forgive me.

No but my net is too slow tonight :S I have to go offline now. Someone else will continue...
Add it to your CSS
Admin panel >> Display >> Colors >> CSS
Paste the code I gave you up and this one also to your CSS.

Code:

#left .module {
    background-color: #ECF3F7;
    border: 1px solid red;
    box-shadow: 0 0 10px #888888;
    color: #536482;
    margin-bottom: 4px;
    margin-left: 10px;
    margin-top: 10px;
    max-width: 140px;
    overflow: hidden;
    padding: 0 10px;
}

You will get this
http://i.imm.io/6iPQ.png

ive added the txt to ccs and its starting to look like what i want, i dont see a drop shadow under the boxes tho, can anyone help with this please? also i would like to have the same effects on the widgets on the portal page and around the please note box and the poem box.

Thanks again for all your help.

Try adding this also.

Code:

#left .module {
-webkit-box-shadow: 0 0 10px #888888;
-moz-box-shadow: 0 0 10px #888888;
}
.navbar {
-webkit-box-shadow: 0 0 10px #888888;
-moz-box-shadow: 0 0 10px #888888;
}

The last bit of code didn't seem to make any changes.

okay just checked it on my phone and I can see the shadow now, a bit mad how i carnt see it on my laptop in ie8.

Did you try on different browser ?

Captain Kuchiki wrote:Did you try on different browser ?

yes, and it looks fine on other browsers, a bit weird that, anyone know the reason and or fix for that?

Change the browser

maybe thats what i will end up having to do m8.

Last try thanks to my Jagodicans

Try adding this also. I.E.

Code:

#left .module {
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}
.navbar {
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}

Thats it, i can see it in all browsers now, thank you so much.

Sorry to be a pain but can you also help me with the other things i mentioned to you yesterday?

Add this for logo and see is it OK.

Code:

.headerbar {
    background-color: #12A3EB;
    background-image: url("http://2img.net/i/fa/prosilver/bg_header.gif");
    background-repeat: repeat-x;
    border: 1px solid red;
    margin-bottom: 4px;
    padding: 0 5px;
    vertical-align: middle;
    box-shadow: 0 0 10px #888888;
    -webkit-box-shadow: 0 0 10px #888888;
    -moz-box-shadow: 0 0 10px #888888;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}

That looks the part now, just a few more things to sort it.

Forums? Add this.

Code:


.forabg {
    background-color: #0076B1;
    background-image: url("http://2img.net/i/fa/prosilver/bg_list.gif");
    background-position: 0 0;
    background-repeat: repeat-x;
    border: 1px solid red;
    box-shadow: 0 0 10px #888888;
    -webkit-box-shadow: 0 0 10px #888888;
    -moz-box-shadow: 0 0 10px #888888;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
    clear: both;
    margin-bottom: 4px;
    padding: 0 5px;
}

yes that looks great, is it possible to do the same thing with the "please take note box at the top? also do the same effects with the portal page?

Thanks again for your help.

Panel connects to some other staff, but here, try if you like it.

Code:

.panel {
    border: 1px solid red;
    box-shadow: 0 0 10px #888888;
    -webkit-box-shadow: 0 0 10px #888888;
    -moz-box-shadow: 0 0 10px #888888;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}

thats excellent m8, all the home page is perfect now. Is there a way to make the portal page have the same effects?

Try by adding this.

Code:

.module {
    background-color: #ECF3F7;
    border: 1px solid red;
    color: #536482;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 0 10px;
    box-shadow: 0 0 10px #888888;
    -webkit-box-shadow: 0 0 10px #888888;
    -moz-box-shadow: 0 0 10px #888888;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}

thats it thank you very much for the time you have taken to help me.

You welcome djmacca, good luck with your forum.

Solved => Locked