General help with some stuff

This topic has 10 replies, 2 voices, and was last updated 9 years, 5 months ago by Sakin.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
May 28, 2015 at 10:11 pm #58521

stevan021
Member

Hello Sakin 🙂 .

I wanna make my new site close to this one I made in Shoppify: http://cheapsafegold.com/
My new site: http://test.cheapsafegold.com/ . I am using Catch Responsive theme.

First problem I’d say is the shop: http://test.cheapsafegold.com/?post_type=product
Pictures are way out of line and there are “read more” and “add to cart” buttons I wanna remove. I want to have 5 products in 1 line , and other 5 in 2nd line like on the first website ( http://cheapsafegold.com/collections/all ).

Second thing that may be impossible but doesn’t hurt to ask is if you know if there’s a way to make the border of the site (not background) bigger so it encompasses my “cheap safe gold” logo as well. Basically, I don’t want to see background behind my logo.

Any help would be greatly appreciated.

Best regards,
Stevan

May 29, 2015 at 10:40 am #58543
Sakin
Keymaster
1. You can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
```
@media screen and (min-width: 769px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        margin-right: 2.5%;
        width: 18%;
    }
}
.woocommerce.post-type-archive-product a.product_type_simple { display: none; }
```
2. Sorry I don’t understand this one. As I see your logo set fine.
May 29, 2015 at 6:07 pm #58553

stevan021
Member

Okay. That removed the buttons but all five products couldn’t fit in 1 row so it goes like this: http://prntscr.com/7aq38d . Could you delete the parts I squared in red?

May 29, 2015 at 10:49 pm #58574
Sakin
Keymaster
@stevan021:
1. For 5 products in line. Replace the following previous css:
```
@media screen and (min-width: 769px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        margin-right: 2.5%;
        width: 18%;
    }
}
```
With the following css:
```
@media screen and (min-width: 769px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        margin-right: 1%;
        margin-left: 1%;
        width: 18%;
    }
}
```
2. To remove that from screenshot, add the following css:
.woocommerce-breadcrumb, .woocommerce-result-count, .woocommerce-ordering { display: none; }
May 30, 2015 at 2:37 am #58582

stevan021
Member

Wow that worked great. Thanks a lot Sakin.

Let me clarify on the 2nd one. The start of the page on my old website looks like this: http://prntscr.com/7aw675. Notice how the black “background” extends beyond the logo. On wordpress here : http://test.cheapsafegold.com/ if I change the background to be some picture the logo would get “lost” in it. I want to make the black circled background extend to the part of the site where the logo is- if that’s possible?

May 31, 2015 at 1:17 am #58608
Sakin
Keymaster
@stevan021: I am not sure if I understand you correctly. But if you want to add background color just in logo then you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
```
#site-logo {
    background-color: #000;
}
```
May 31, 2015 at 3:10 pm #58652

stevan021
Member

Okay I changed my site background so it makes more sense. I want the black background to be behind my logo: http://prntscr.com/7bf24o

May 31, 2015 at 3:55 pm #58657

stevan021
Member

Basicly I want the backgrund in the green area to be black

June 1, 2015 at 11:31 am #58705
Sakin
Keymaster
@stevan021: Then you can add the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:
```
#masthead {
    background-color: #000;
}
```
June 4, 2015 at 12:59 am #58867

stevan021
Member

Thanks a lot. That worked perfectly. How do I delete these empty parts of page so that my text is everywhere?

http://prntscr.com/7cr58c

June 4, 2015 at 1:15 am #58868
Sakin
Keymaster
@stevan021: For that you need to use “No Sidebar, Full Width” layout option which is there only in Pro version. For free version, again you need to adjust with custom css. So, add the following css:
```
.no-sidebar.content-width #main {
    width: 100%;
}
```
Author

Posts