|
#1
May 10, 2009, 04:28 PM
|
|
|
75 posts · Apr 2009
Oregon, USA
|
|
My apologies if this was answered in a different post, but my search turned up nothing... So here goes.
I want to create a rounded sidebar with a border, much like the border I've created on my blog, Machu Picchu Vacations.
I'm also looking to create rounded post summary boxes with borders as well.
Any thoughts?
Thanks,
Shawn
|
#2
May 11, 2009, 03:45 PM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
For a whole sidebar, you have to edit header.php or footer.php and add the green part:
<!-- Left Sidebar -->
<td id="left">
<div id="left-sidebar">
<?php // Widgetize the Left Sidebar
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
...
<?php endif; ?>
</div>
</td>
<!-- / Left Sidebar -->
Theme Options -> HTML/CSS Inserts -> CSS Inserts:
HTML Code:
div#left-sidebar, div.post {
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
|
#3
May 12, 2009, 03:17 PM
|
|
|
|
37 posts · Apr 2009
Greece
|
|
And if we would like to do that, when the sidebars are together? I mean on the one side ? Could we have one border for both of them ? With the same style of course.
|
#4
May 13, 2009, 07:34 PM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
You could simulate that by removing the right border of the left sidebar and the left border of the right sidebar, with CSS at Theme Options -> Sidebars
|
#5
Jun 8, 2009, 12:51 PM
|
|
|
|
15 posts · Jun 2009
Right now, Hoboken, NJ
|
|
I applied the above code for the right and left sidebars, but they still appear square. I have the following typed in my CSS Inserts:
div#left-sidebar, div.post {
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
div#right-sidebar, div.post {
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
And I updated my header and footer.php as suggested.
http://www.twobackpackers.com/blogs/
|
#6
Jun 8, 2009, 01:47 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Depends on the browser you are viewing the site with. IE doesn't play well. Check it out with Firefox or Safari. In Safari on the Mac I see a small curve on your sidebars.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#7
Jun 8, 2009, 03:43 PM
|
|
|
|
15 posts · Jun 2009
Right now, Hoboken, NJ
|
|
Are there any solutions for getting the curves to appear in IE?
|
#8
Jun 10, 2009, 10:37 AM
|
|
|
|
3,768 posts · Oct 2008
Munich, Germany
|
|
Quote:
Originally Posted by Jcasteli
Are there any solutions for getting the curves to appear in IE?
|
For IE you'd have to use images or Javascript http://www.curvycorners.net/
|
#9
Nov 26, 2009, 01:53 PM
|
|
|
75 posts · Apr 2009
Oregon, USA
|
|
I tried all of this and it just didn't work. I'm trying to change my right side bar and I made the appropriate code changes to reflect this, but no results. see DrSoszka.com
Thanks,
Shawn
|
#10
Nov 26, 2009, 07:59 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
add a CSS selector 'td#right, '
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#11
Nov 27, 2009, 12:43 PM
|
|
|
75 posts · Apr 2009
Oregon, USA
|
|
Hey thanks for the reply,
I'm a bit confused where in the code I would place that new command that you suggested.
Here's what I am using:
div#right-sidebar, div.post {
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
Thanks,
Shawn
|
#12
Nov 27, 2009, 12:49 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
put it in the CSS Inserts - i.e. ATO->Add HTML/CSS Inserts->CSS Inserts
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#13
Nov 27, 2009, 01:06 PM
|
|
|
75 posts · Apr 2009
Oregon, USA
|
|
Yep did that, here's what it looks like:
div#right-sidebar, div.post {
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
'td#right, '
}
|
#14
Nov 27, 2009, 02:51 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Quote:
div#right-sidebar, div.post {
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
'td#right, '
}
|
????????? that's not right it should be
HTML Code:
td#right,
div#right-sidebar,
div.post {
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
The TD#RIGHT is a selector not a rule
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#15
Nov 27, 2009, 08:04 PM
|
|
|
75 posts · Apr 2009
Oregon, USA
|
|
Got it, thanks!!
Thanks,
Shawn
Last edited by juggledad; Nov 28, 2009 at 05:27 AM.
|
|