Radius for sidebar


Author Message
NeoenY152

Posted: 5/13/2011
Quote message 

Is it possible to do a radius for the sidebars? (does not seem possible in artisteer) I have imported sidebar_g.png into photoshop and added my own radius, but it doesnt seem like it is working.

See sidebar_g.png here (not a perfect radius, but I want to get this working first)
http://www.googlieyes.net/wp-content/themes/googli2/images/sidebar_g.png
and see the implemented template here
http://www.googlieyes.net
 
Garry

Posted: 5/13/2011
Quote message 

Artisteer support assigning radius for blocks is possible: Sidebar-> Block style-> Styling-> Radius

If adding custom radius sidebar background image manually Firebug may be helpful.
 
NeoenY152

Posted: 5/17/2011
Quote message 

Thank you for your response. That particular option is only for the outline around text and menus within the sidebar. But you cant actually ad a radius to the sidebar itself.

If someone knows of a way that would be great.
 
Cooldotz

Posted: 5/17/2011
Quote message 

I believe what Garry was trying to tell you is that within Artisteer, you can only radius the sidebar by adding a border to it, then assign a radius to the border.

Or, if you're comfy with CSS, jump into the sidebar code you generate and style it by hand.
:-@
 
Adeptris

Posted: 5/18/2011
Quote message 

Save your artx file with a new name, style the article (post) with the radius you want, and export the theme.

In the images folder you have four images:

post_c.png
post_h.png
post_s.png
post_v.png


Rename these to

sidebar_c.png
sidebar_h.png
sidebar_s.png
sidebar_v.png


Then from style.css copy to a file and rename the post border image styles from 'art-post' to 'art-sidebar' like in this pastebin, there are abut 100 lines.
http://pastebin.com/prQgL4uX

Then in all the page files, index.php, single.php, archive.php, page.php etc:

Find the sidebar container code:

<div class="art-layout-cell art-sidebar1">
<?php get_sidebar('default'); ?>
<div class="cleared"></div>
</div>


Add in the new styles:

<div class="art-layout-cell art-sidebar1">
<div class="art-sidebar-tl"></div>
<div class="art-sidebar-tr"></div>
<div class="art-sidebar-bl"></div>
<div class="art-sidebar-br"></div>
<div class="art-sidebar-tc"></div>
<div class="art-sidebar-bc"></div>
<div class="art-sidebar-cl"></div>
<div class="art-sidebar-cr"></div>
<div class="art-sidebar-cc"></div>
<?php get_sidebar('primary'); ?>
<div class="cleared"></div>
</div>


This is not tested, so you may have to adjust the sidebar widths, margins, or style code.

HTH

David 8-)
 
Adeptris

Posted: 5/18/2011
Quote message 

Just to make it clear you style the article in a copy of your temple, then rename the images and copy them to your main template, add the new styles to your main template and the sidebar wrapper styles,

Phew!
 
Adeptris

Posted: 5/18/2011
Quote message 

I have tested it and added another style as a container with padding added:


.art-sidebar
{
position: relative;
min-width: 31px;
min-height: 31px;
margin: 10px;
padding: 10px;
}
['/code]

wrapped the sidebar in a container with padding, just for sidebar 2.

<div class="art-layout-cell art-sidebar2">
<div class="art-sidebar">
<div class="art-sidebar-tl"></div>
<div class="art-sidebar-tr"></div>
<div class="art-sidebar-bl"></div>
<div class="art-sidebar-br"></div>
<div class="art-sidebar-tc"></div>
<div class="art-sidebar-bc"></div>
<div class="art-sidebar-cl"></div>
<div class="art-sidebar-cr"></div>
<div class="art-sidebar-cc"></div>
<?php get_sidebar('secondary'); ?>
</div>
<div class="cleared"></div>
</div>


I added the code to just page.php, styles to the end of style.css and copied re-named and added back the images in a WordPress theme for download.

This download is just so you can see where the code fits WordPress with Artisteer Version 3 RC.
Download: http://digitalraindrops.net/downloads/?did=68

HTH

David
 
Adeptris

Posted: 5/18/2011
Quote message 

Artisteer WE NEED A FIVE MINUTE EDIT FUNCTION!

.art-sidebar {
position: relative;
min-width: 31px;
min-height: 31px;
margin: 10px;
padding: 10px;
}


Wrapped the sidebar in a container with padding, just for sidebar 2.

<div class="art-layout-cell art-sidebar2">
<div class="art-sidebar">
<div class="art-sidebar-tl"></div>
<div class="art-sidebar-tr"></div>
<div class="art-sidebar-bl"></div>
<div class="art-sidebar-br"></div>
<div class="art-sidebar-tc"></div>
<div class="art-sidebar-bc"></div>
<div class="art-sidebar-cl"></div>
<div class="art-sidebar-cr"></div>
<div class="art-sidebar-cc"></div>
<?php get_sidebar('secondary'); ?>
</div> <div class="cleared">
</div>
</div>


I added the code to just page.php:
styles to the end of style.css:
copied re-named and added back the images in a WordPress theme for download.

This download is just so you can see where the code fits WordPress with Artisteer Version 3 RC.

Download: http://digitalraindrops.net/downloads/?did=68

HTH

David 8-)
 
Chris

Posted: 7/18/2012
Quote message 

Or assume your browsers can read CSS3 (fairly safe assumption these days)

Find .art-content-layout .art-sidebar1:before in your css and add:

moz-border-radius: 7px;
border-radius: 7px;

for some shadow add:

-moz-box-shadow: 3px 3px 5px #c0c0c0;
-webkit-box-shadow: 3px 3px 5px #c0c0c0;

works also
 

Reply


NAME *
EMAIL
SMILIES :-) :( :-D 8-) :*) :-/ :-{} :-X :-O :-@ O:) :-P :-< :-( :-| ;-) 
CODES [Quote] [B] [I] [U] [Code] [IMG] 
BODY *  
VALIDATION *