Gradient to Border « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Coherence

resolved

Gradient to Border

24 posts from 5 voices

Started 1 year ago by ak-muc
Latest reply from Devin
This topic is resolved

Tags:

No tags yet.

ak-muc
Member

Hi,

how can i add a gradient to the border of my site ?

Posted 1 year ago #
elames
Member

The border where? Around the entire page? First have to create the image.The define where the image is. Just a theory.
Do you use Firebug? You should try it.

I think this is the code that applies:

* #Base 960 Grid
================================================== */
#wrap_all { margin: 0 auto; position:relative; z-index: 3; }
.boxed #wrap_all { margin: 0 auto; width: 990px; /* -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3); -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3); box-shadow: 0 0 5px rgba(0,0,0,0.3); */}
.container { position: relative; width: 930px; margin: 0 auto; padding: 0px 30px; clear:both; overflow: hidden;}
.container_wrap { clear:both; }
.unit, .units { float: left; display: inline; margin-left: 30px; position:relative; z-index:1; }
.row { position:relative; margin-bottom: 20px; clear:both; }
.stretch_full { position:relative; left:-30px; }

Posted 1 year ago #
ak-muc
Member

thx but this doesnt work...i meant a code like this:

.boxed #wrap_all {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
margin: 30px auto;
}

but here the shadow goes over the top.

Posted 1 year ago #
elames
Member

You would have to upload your gradient image. Copy the URL and put that into the code so it would know the location.
I just pasted in the entire code from the style sheet.

What I see you have there is the shadow..how wide it is and probably the density of the shadow. You would have to experiment with a gradient image. Though I am not sure you would see much gradient is a small shadow. You could also try just changing the color code for a different effect

Posted 1 year ago #
ak-muc
Member

yes i mean a shadow...sorry for bad english. here u can see that the shadow goes too much to the top.
but the look is good. it would be perfect if the shadow is only at the box, not above.

http://www.martinaundchristoph.de/

Posted 1 year ago #
elames
Member

What you are referring to is this:

The meta header:You have removed the contact box that was their in the original set up. So If you still want it there, you can change the height. Experiment with what you think looks good, or you could display: none} I think? Worth a try.

Is this for YOUR wedding? Very nice

#meta_header, #top #meta_header .container{
position: relative;
z-index: 101;
background:transparent;
height:60px;
}

Posted 1 year ago #
ak-muc
Member

no its not for me ... its for a customer. im his agency :)

the code doesnt work :( but thx for helping me :)

i want only a little shadow to my box

Posted 1 year ago #
elames
Member

This is the code for the shadow around it all:
You have to adjust to suit your needs.

.boxed #wrap_all {
box-shadow: 0 3px 14px
rgba(0, 0, 0, 0.8);
margin: 0px auto;
}

But to me, it still looks like you still have to remove that large empty area at the top of your page.

Posted 1 year ago #
ak-muc
Member

yes, the shadow goes over it. i dont know how to do that :)

Posted 1 year ago #
elames
Member

Try putting this in the QUICK STYLES area and see what happens

#meta_header, #top #meta_header .container{
position: relative;
z-index: 101;
background:transparent;
height:0px;
}

Posted 1 year ago #
ak-muc
Member

yeah thx, now its ok, but the top space is gone...the site box is now on the top. nothing other solutions ? if not i use this code.

Posted 1 year ago #
Devin
Moderator

Hi ak-muc,

I'm not quite sure what your're still looking to have happen at this point. If you can give a bit more detail, maybe we can help with a bit of css tweaking.

Regards,

Devin

Posted 1 year ago #
elames
Member

Well try making the height something different and see how it looks,,,instead of 0 try 5 or 10

#meta_header, #top #meta_header .container {
position: relative;
z-index: 101;
background:
transparent;
height: 10px;
}

Posted 1 year ago #
ak-muc
Member

its ok, thx for help.
i cant explain it in english.

ich wollte einfach nur nen schatten haben, der um meine seite läuft wie hier zu sehen.

http://www.schumanns-weinblog.de/

nur dass er eben nicht nach oben weiterläuft und an den weissen ausgesparten stellen nach innen geht.
im link oben geht der schatten nur am rand entlang nach oben.

:)

schwierig zu erklären aber halb so wild wenns nicht geht...danke trotzdem :)

in corona gehts gut wie hier zu sehen, aber hier ist die "box" (contentbereich) auch druchgehend:

http://www.richter-kiehn.de/

Posted 1 year ago #
elames
Member

Try this:

#meta_header, #top #meta_header .container {
position: relative;
z-index: 101;
background:
transparent;
height: 60px;
}

Posted 1 year ago #
Mya

Thanks for helping out elames! You rock! Let us know how that works for you ak-muc.

Regards,
Mya

Posted 1 year ago #
ak-muc
Member

thx, but this code doesnt change anything. its ok and not very important for me. i dont put the shadow in it.
with corona it works nicely...to see here: http://www.richter-kiehn.de

this shadow i want to have in coherence :)

Posted 12 months ago #
Dude
Dude
I think you need to push the container down a bit - otherwise you won't see the shadow on the top/bottom. Add following css code to css/custom.css or the quick css field:
```
.boxed #wrap_all {
    margin: 20px auto
}
```
Posted 11 months ago #
ak-muc
Member

yes ... cool, but here u can see what i mean...
the shadow goes straight to the top. it doesnt go around the content box.

http://www.martinaundchristoph.de/

Posted 11 months ago #
Devin
Moderator
Hi ak-muc,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#meta_header, #top #meta_header .container {
box-shadow: none;
}
.container_wrap {
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.8);
}
```
Regards,

Devin
Posted 11 months ago #
ak-muc
Member

ok thx, code is in and looks like this, but nothing changed. its ok if i cant get fixed. i dont wanna waste ur time with it :)

#socket .container { display:none; }
.main_menu {
top: 70%;
}

.main_menu .menu ul {
padding-top: 10px;
}
#top .comment-reply-link {
left: -95px;
}

.commentlist .gravatar {
left: -10px;
}
.comment_content{
left:30px;
}
.title_container h1 {
margin: 0;
font-size: 12px;
position: relative;
z-index: 2;
}
.title_container{
display: none;
}
#footer .container { display:none; }
#meta_header, #top #meta_header .container {
position: relative;
z-index: 101;
background:
transparent;
height: 60px;
}
.boxed #wrap_all {
margin: 20px auto
}
.boxed #wrap_all {
box-shadow: 0 3px 14px
rgba(0, 0, 0, 0.8);
margin: 0px auto;
}
#meta_header, #top #meta_header .container {
box-shadow: none;
}
.container_wrap {
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.8);
}

Posted 11 months ago #
Devin
Moderator

Hello,

I'm out of ideas if that one didn't work then. You can remove the css I provided then if its not making any change for you as well as the others provided above. That way you don't get any other complications from overlapping issues later on.

Regards,

Devin

Posted 11 months ago #
ak-muc
Member

ok thank you...that what i try to do is a border around my page like here to see:

http://www.staudacher-arbeitsrecht.de/de/kst-impressum.php

i mean the blur/gradient/shadow around the content box.

Posted 11 months ago #
Devin
Moderator

Hi ak-muc,

I believe we all understand what you are looking for but have no other suggestions on how to achieve the effect. If you would like to look into it further, I would recommend hiring a freelance web developer who can make the customization for you.

Regards,

Devin

Posted 11 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top