Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   Putting Fade Background in Sidebars, and Removing Grey Blocks next to Widgets (http://forum.bytesforall.com/showthread.php?t=5860)

rhythm Feb 13, 2010 12:01 AM

Putting Fade Background in Sidebars, and Removing Grey Blocks next to Widgets
 
2 questions:
1) I'm trying to put a rounded-corner border around my sidebar widgets, with a simple fade-blue-to-white background image behind the title/links. If you go to http://www.thedigitalrecordingstudio.info at look at the Recent Posts, Recommended and Tags in the right sidebar, you'll see what I'm trying to simulate. That bordered, faded box is a .jpg image file living in that theme called Amazona (obvious name!) which I'd like to insert into Atahualpa. Can I just put the code into the Sidebar>Style option, or do I have to follow it up in the CSS and/or sidebar.php. I'm not a coder, so I need all the guidance I can get, thanks

2) In all the Atahualpa widget link lists, you get these little grey blocks just to the left of each link (no matter if your remove all padding.) Just want the words, no grey boxes...how do I get rid of 'em?

rhythm Feb 13, 2010 11:21 PM

excuse the bump, but isn't there anyone who knows how to create a border and a light fade around our sidebar lists? Juggledad, anyone?:(

And am I the only one who wants to get rid of those little grey blocks next to all our post links?:confused:

Would really appreciate some guidance, thanks.

Velma Feb 14, 2010 09:47 PM

I haven't figured out the round corners for the sidebars either, however with the gray blocks, that's pretty easy. :)

Under Style Widgets, Widget List Items, put the Left Border Width for Links at 0 (zero) and they'll be gone. :)

juggledad Feb 15, 2010 05:02 AM

if you want round corners, you need to use the 'border' css
HTML Code:

-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

add this to RIGHT sidebar style (or LEFT) - NOTE: This does not work in IE because IE doesn't support border

rhythm Feb 15, 2010 12:44 PM

Quote:

Originally Posted by juggledad (Post 25599)
if you want round corners, you need to use the 'border' css
HTML Code:

-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

add this to RIGHT sidebar style (or LEFT) - NOTE: This does not work in IE because IE doesn't support border

Thanks Juggledad. I got lots of help for both my questions from Rashell. She had me put that border radius code right into the ATA Options>Widgets>Widget Container and it worked fine.

She also helped me insert that fade image in the background behind all my Widgets, see:
http://www.jukeboxandpinball.info/

Problem is, it's only showing up on the Home page (currently set to show Latest Post in Settings>Reading). If you click any other post link, the rounded border and it's padding settings stay, but the blue-to-white background fade disappears...even though the image URL is entered into Widgets>Widget Container, which should be a universal option for ALL posts

She didn't know why this was happening, and said either you or Flynn could help?

juggledad Feb 15, 2010 01:10 PM

I suspect this has to do with the permalinks. Try swapping back to the default permalink and see if it works.
To make sure it works, use the fully qualified url of the image.

rhythm Feb 15, 2010 02:02 PM

Quote:

Originally Posted by juggledad (Post 25652)
I suspect this has to do with the permalinks. Try swapping back to the default permalink and see if it works.
To make sure it works, use the fully qualified url of the image.

Thanks, J. Switching to Default Permalink did allow the image on all posts.
For cleaner URLs and SEO, I always use the Custom Permalink /%postname%/, and never had problems in the past. And it's curious that the code for those rounded borders is in the same Widget Container style box as the image URL, and the borders show up on every page.

I'd certainly prefer to use /%postname%/ over the Default permalink. Is there a way I can do both? I'm not sure what "fully qualified url of the image" means, or if that's part of the solution

juggledad Feb 15, 2010 04:10 PM

the borders are CSS while the url may be getting effected by the code in the .htaccess (I am by no means an .htaccess pro...or even amateur)
Fully quallified url = http://www.mydomain.com/wordpress.wp-contents...etc etc

rhythm Feb 15, 2010 04:59 PM

Quote:

Originally Posted by juggledad (Post 25671)
the borders are CSS while the url may be getting effected by the code in the .htaccess (I am by no means an .htaccess pro...or even amateur)
Fully quallified url = http://www.mydomain.com/wordpress.wp-contents...etc etc

I know nuttin' about htaccess either, but you hit the nail on the head when you sent me a "fully qualified URL" example. My URLs were like yours, but without the http://domainname.info" on the front end. When I added that in the code, the background image now repeats itself in all posts, EVEN with the custom /%postname%/ Permalink chose. Yay!

One other quick question if you please: If I widen my browser screen, the extra bars (bar1, bar2) I added stretch with it, no matter how wide I go. However my header image does not. It was created (in Photoshop) with an image width of 1260 pixels, but the width isn't flexible with the browser display. Where do I set this?

Also, I love this theme (because of it's immense flexibility) and you guys have been great with support, so I want to donate. Where do I donate, and what's a good suggested amount?

juggledad Feb 15, 2010 05:55 PM

If you want to stop the page from getting any bigger than the 1260px, at ATO->Style & configure LAYOUT put 1260 in 'Layout MAX width' or else make your images wider.

On my own site, I use 1440 as teh max width and have my pictures that size. You can 'pin' the image to the right, center or left so as the page gets smaller the left disapears, both sides disapear, or the right disapears off the page. I pcked center and make sure if there is an importane image, it is in the center.

If all your images had, say, a face on the right of the picture, you would want to align it (ATO->Header Image->Header Image: Alignment) it on the right so the left side would disappear as teh page is made smaller.

You can donate to Flynn (the developer) by clicking the 'Click Here To DONATE!' and then hitting the top donate button. You can donate to me by clicking the 'Donate to Juggledad' button. Both donations will be credited to your account. Any amount is appreciated.

rhythm Feb 15, 2010 06:43 PM

OK Juggledad (can I know your real name, or something shorter:-)...that page width info was perfect, thanks!

I donated directly to you, will donate a similar amount to Flynn in near future. ATA is great, the only theme I know of where you can literally make your blog look anything you want...including non-blog sites like Amazon...once you get fluid with all the settings.

Another question if you have time:
I almost always replace ATA's header images with one of my own creation. I just delete the 3 header images ATA comes with, and upload my one header image. It always works, but one problem. The Search Bar becomes invisble, even if it's still checked "Yes" in the Show Search Bar? query.

I know I could put one in the sidebar w/Widgets, but I prefer a workable search bar in the header. If I simply add a searchbar graphic when I'm creating my header in Photoshop, it'll look like there's a searchbar there, but it won't be an operable link. And I'm not coder enough to turn that graphic into a workable link.

So is there any way to overlay ATA's own working Search Bar over a self-replaced header? Or what would be your cleanest way of accomplishing this?


All times are GMT -6. The time now is 03:32 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.