The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

stroke lines & drop shadows

View previous topic View next topic Go down

Solved stroke lines & drop shadows

Post by djmacca on Thu Jun 09, 2011 3:14 pm

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.

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Thu Jun 09, 2011 3:23 pm

Hi,

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

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Thu Jun 09, 2011 3:30 pm

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.

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Thu Jun 09, 2011 3:54 pm

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 ...

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Thu Jun 09, 2011 4:18 pm

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.

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Thu Jun 09, 2011 4:44 pm

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

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Thu Jun 09, 2011 4:57 pm

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.

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Thu Jun 09, 2011 5:21 pm

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;
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Thu Jun 09, 2011 5:30 pm

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.

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Captain Kuchiki on Thu Jun 09, 2011 5:45 pm

Did you try on different browser ?

Captain Kuchiki
Forumember

Male Posts : 193
Reputation : 34
Language : Serbian, English
Location : In the air

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Thu Jun 09, 2011 5:48 pm

@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?

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Captain Kuchiki on Thu Jun 09, 2011 5:52 pm

Change the browser Very Happy

Captain Kuchiki
Forumember

Male Posts : 193
Reputation : 34
Language : Serbian, English
Location : In the air

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Thu Jun 09, 2011 5:58 pm

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

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Fri Jun 10, 2011 9:44 am

Last try thanks to my Jagodicans Smile

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);
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Fri Jun 10, 2011 12:42 pm

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?

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Fri Jun 10, 2011 12:54 pm

Add this for logo and see is it OK.

Code:
.headerbar {
    background-color: #12A3EB;
    background-image: url("http://illiweb.com/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);
}


Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Sat Jun 11, 2011 4:00 am

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

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Sat Jun 11, 2011 4:46 am

Forums? Add this.
Code:

.forabg {
    background-color: #0076B1;
    background-image: url("http://illiweb.com/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;
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Sat Jun 11, 2011 3:19 pm

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.

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Sat Jun 11, 2011 3:24 pm

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);
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Sat Jun 11, 2011 3:30 pm

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

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Sat Jun 11, 2011 3:36 pm

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);
}

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by djmacca on Sat Jun 11, 2011 3:40 pm

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

djmacca
Forumember

Male Posts : 33
Reputation : 0
Language : english

Back to top Go down

Solved Re: stroke lines & drop shadows

Post by Nera. on Sat Jun 11, 2011 3:41 pm

You welcome djmacca, good luck with your forum.

Solved => Locked

Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum