Narrower slideshow and wider sidebar « Support Forum | Kriesi.at

Support Forum » Abundance

Narrower slideshow and wider sidebar

7 posts from 4 voices

Started 10 months ago by SandyMc
Latest reply from Devin
This topic is not a support question

Tags:

SandyMc
Member

I am using the Abundance theme and I am trying to make the slideshow narrower and the sidebar wider. I narrowed the slideshow somewhat, but there seems to be a large gap between the slideshow and how wide it will let me make the right sidebar. I guess this is because of padding? But I am not sure how to fix it. Please help.

Also, I am trying to get some color for the background into the right sidebar and I am having a problem accomplishing that. Can anyone help in that regard?

My website is PizzazzGifts.com/temp if you care to look at it. Don't laugh, I am VERY slowly figuring this out and getting some things accomplished. I have not uploaded any new pictures to the slideshow until I see what size they will need to be. Thank you for any help you can give me.

Posted 10 months ago #
Dude
Dude
Hey!

Add following code to css/custom.css (or the quick css field) and change/adjust the width values:
```
.content, #top .fullwidth .template-blog.content {
    width: 690px;
}

.sidebar {
    width: 215px;
}
```
Regards,
Peter
Posted 10 months ago #
SandyMc
Member

Peter -

Thank you! I tried the code and it did not work. Obviously, I am doing something wrong. Here is my custom.css file:

#top .product_title.page-title {
display: none;
}

{h1.page-title{display:none !important;}

#top .main_menu .avia_mega {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/PurpleLtDkGradBar.jpg);
}

.main_menu .avia_mega > li:hover > a, #top .main_menu .avia_mega > .current-menu-item > a {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/PinkLtDkGradBar.jpg);
}

media="screen"
html, body {
color: rgba(252, 250, 250, 0.87);
}

.content, #top .fullwidth .template-blog.content {
width: 600px;
}

.sidebar {
width: 300px;
background-color: #C408E7;

In comparing the file with my actual website, you can see some things worked and some did not. Some work partially.

1. I was able to get the title of the page to not show up (Good thing)
2. I was able to get the Purple Gradient Bar to work on the menu, but the Pink Gradient Bar does not show up when you hover over the menu item. (Partial good thing)
3. I was not able to change the body html color (Bad thing)
4. I was not able to change the width of the content or sidebar. Also not able to change the background color of the sidebar. (2 Bad things)

When I use the Quick Custom CSS I have no luck at all, so I have been going into the actual file. I am a little more comfortable doing that now because I have seen SOME results from it. Can you help again, please?

Thanks again,
Sandy

Posted 10 months ago #
Mya
Hi Sandy,

Can you post a link to your website so we can do some testing? In the meantime, is the code above typed exactly as you have it in your custom.css? If so, there's a few errors which may be causing at least some of your issues. I'm going to retype the code below as it should be then explain what I've done. Bare with me. :)
```
#top .product_title.page-title {
display: none;
}

#top .main_menu .avia_mega {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/PurpleLtDkGradBar.jpg);
}

.main_menu .avia_mega > li:hover > a, #top .main_menu .avia_mega > .current-menu-item > a {
background: URL(http://pizzazzgifts.com/temp/wp-content/uploads/2012/06/PinkLtDkGradBar.jpg);
}

html, body {
background-color: #FFFFFF;
color:#666666;
}

.content, #top .fullwidth .template-blog.content {
width: 600px;
}

.sidebar {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #EEEEEE;
width: 300px;
}
```
Okay so here's what I did. The first error I saw was this:

{h1.page-title{display:none !important;}

The { in front of the h1 shouldn't be there and may be affecting your other code. Can't be sure without looking. :) Anyway, I removed the whole line since the #top .product_title.page-title above does the same thing.

Second error I saw:
```
media="screen"
html, body {
color: rgba(252, 250, 250, 0.87);
}
```
I assuming this is what you're using to change the background color of the page. Not sure where the media="screen" comes in but that should be removed since it's not CSS. Now to change the background color you need to use "background-color" not just "color" which is for text.

Third error was that your .sidebar code was missing a closing }. I figured that was just missed when you pasted but wanted to point it out just in case.

So if you will fix those errors and let us know what works then we can get the other questions answered. :D

Regards,
Mya
Posted 10 months ago #
SandyMc
Member

Mya -

Thank you! That is freaking awesome! Thanks for explaining WHAT you did and WHY. That's the only way I'm going to learn.

Yes, I did have that last "}" and it got lost in the pasting process. I had also noticed in the meantime that even though the "hover" part was not working, I had uploaded the jpg again thinking there was something wrong with the jpg. When I did that, it changed the URL of the jpg and I changed that now too.

I messed around with it some more and got the changes to work, including the background color for the sidebar! Thank you, I cannot tell you how great this is as I can now move on in my design.

One more question, I use HostGator and in the code editor of the CPanel they have different colors for different code which doesn't work when I post it here. Any ideas on what the colors mean? This might be helpful to know also as it may help me see errors? Not sure if it would, but would like to know.

The link to my website is: http://www.PizzazzGifts.com/temp

Again, thank you so much. I have literally been messing around with this for weeks.

Sandy

Posted 10 months ago #
SandyMc
Member

Okay, I guess I can't leave it alone. In my top menu bar, the subtotal for the cart amount is in black or gray. I would love it if that could be white as the rest of the menu words are, so it can show up. Can you please tell me how to accomplish that?

This is what I have so far, and I am trying to add it to custom.css file:

.function avia_woocommerce_cart_dropdown()
{
global $woocommerce;
$cart_subtotal = $woocommerce->cart->get_cart_subtotal();
$link = $woocommerce->cart->get_cart_url();
html, color:#FFFFFF;
}

Sandy

Posted 10 months ago #
Devin
Moderator
Hi Sandy,

The code you have there isn't usable with css. CSS will always be:
```
Selector(a div or a class){
property: value;
property: value;
}
```
or condensed:
Selector(a div or a class){property: value;property: value;}

See: http://www.w3schools.com/css/css_syntax.asp

So for the cart dropdown, you will be targeting the span class .amount. You want to make sure however that you only change the color of the amount that is inside the dropdown so you'll add .cart_dropdown class (which you can find by inspecting the live site) as another selector. For good measure, since this is in the overall .main_menu class we'll add that in there too just so it isn't confused with anything else:
```
.main_menu .cart_dropdown .amount {
color: #fff;
}
```
Also, you'll want to attach your background to html, body instead of just body. So in your custom.css it should be:
```
html, body {
color:#000000;
background: transparent url('http://pizzazzgifts.com/temp/wp-content/plugins/background-control/bg/bkg.jpg') repeat;
}
```
Regards,

Devin
Posted 10 months ago #