-
Posts
-
Hi, I’ve seen others do this but am not sure how to do it myself – two things:
1. I’d like to add borders to text bodies. For example, if I have two 1/2 page layouts next to each other and both have text elements inside them, I’d like to add borders (with rounded corners) to their element blocks. The problem with the “Color Section” option is that it tends to affect the entire background area, not just the area of a layout element. Thus, being able to change their background colors within these borders would also be useful.
2. I’d like to take words within normal text and change their color so that they stand out. I’ve seen this done – but again, I’m not sure if I can accomplish this using short codes or something?
Thanks,
Lea
Hi,
Can you do a layout such as the one you describe minus the borders on some out of the way page and provide the url so we can be sure we understand the requirements. An image will not help since we need to work on the live css.
Thanks,
Nick
Sure can do that – not sure how helpful any layout I provide could be though – it would just contain the standard layout and text elements, would that be enough for you to work with? Basically if I choose a 1/3 layout element or a 1/2 layout element, that element itself should have a rounded border and light background color. If you say you can work with the basic layout, let me know and I’ll arrange that page for you.
Hi,
Ok I got you. Here is the css code, please add it to /css/custom.css OR to quick css located in Enfold > Layout Styling.
.flex_column {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 2px solid #6640FF;
background: rgba(255, 255, 255, 0);
-webkit-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}It has a shadow. If you dont want the shadow, you can take out the 3 lines in the middle of what i gave you above that contain the word ‘shadow’ in them. The curve will not be seen in older browsers (ie8 i think and below and 25% of visitors have that browser). To make curves visible to ie8, you need to use 4 transparent images of curves,
Here is another way to do this that creates a cool looking panel with a 3d effect and curved corners. take the previous one out and add this
http://www.clipular.com/c?8148149=gdtT_1yP35oTh4-qyi2Hxq7S33M&f=.png
.flex_column {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background-color: rgba(0,0,0,0.0);
box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
border: 2px solid #6640FF;
/*border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;*/
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.flex_column:before {
position: absolute;
width: 80%;
height: 40%;
left: 10%;
border-radius: 50%;
z-index: -1;
top: 0%;
content: "";
box-shadow: 0 -7px 16px rgba(0,0,0,0.4);
}
.flex_column:after {
position: absolute;
width: 80%;
height: 40%;
left: 10%;
border-radius: 50%;
z-index: -1;
bottom: 0%;
content: "";
box-shadow: 0 7px 16px rgba(0,0,0,0.4);
}Thanks,
Nick
Hi Nick!
Love the first option, thanks! The only problem is it effects every layout element, when I want to limit it to text elements? Is that possible? Thanks
Hi,
Try this instead
.avia_textblock {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 2px solid #6640FF;
background: rgba(255, 255, 255, 0);
-webkit-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75);
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}Thanks,
NIck
- The topic ‘Customizing Font and Text Bodies’ is closed to new replies.