Editing Icon Frame Width/Color

Support
#1

Hi ThemeCo Staff,

I searched the forums and found an old post about how to change the width/color of the border frame in Icon, but the CSS didn’t work, unless I’m doing it wrong:

.x-iso-container-posts > .hentry .entry-wrap {
margin: 0 -1px -1px;
border: 5px solid #cccccc;
background-color: #f2f2f2;
}

I put in “5px” and it wouldn’t save it.

Thanks for your help!

#2

Hello There,

Thanks for writing in! The css code will only work if you have set your site to display a masonry grid in your blog index and archive pages. Would you mind to give further clarifications what you want to do and maybe you can share your site url so that we can take a closer look?

Thanks.

#3

Hi RueNel,

Thanks for the quick reply! This is just a tester right now, but you can look at: http://trueco2.com/shop-page/

I’m looking to format all of the horizontal bars in light grey. Ideally I would like to change the “Showing 7 Results” box and the “Sort By” box as well. I’d like that to be site wide. The grey bars around the product images though I would like to keep grey.

I hope that’s not too complicated!

Thanks!

#4

Hey There,

Do you want something like this?

If that is the case, please use this code instead:

.x-breadcrumb-wrap,
.entry-featured {
  border: 5px solid #cccccc;
  background-color: #f2f2f2;
}

.woocommerce-result-count,
.woocommerce-ordering select {
    border: 2px solid red;
}

It really help if you have a screenshot and a mock layout pointing out what do you want to change, on which page and on which of the page elements.

Thank you.

#5

Hi RueNel,

Thanks so much for your quick and very useful reply!

I’ve attached screenshots of where I’m looking to edit. I want them all to look the same, so the Homepage header and footer, Shop Page header and footer.

The exception though is for the product images on the Shop Page. I would like to add a background on the header, but not on the images as well. The command you gave me does them both at the same time, is it possible to edit them separately?

Also in the “Sort by Price” bot and “Showing 7 Results” Box the color is defined with CSS colors instead of the #ccccc format. Is it possible to use any color, or am I limited to the ones with names for that? That’s not a big deal, I’m just curious.

I would like thickness and color for all of those elements if you can do that. Sorry if this is a lot of work!

Thanks so much!

#6

#7

#8

#9

#10

I couldn’t upload them all at once.

I forgot that I wanted line color and width as well as background color where there is a background, for instance on the footer and the shop page header.

Thanks again!

#11

Hi There,

For the footer and product review tab border color and thickness, please add this to Theme Options > CSS

/*border color and width for footer and additional info/review section*/
.x-colophon.top, .x-colophon.bottom,
.x-nav-tabs, .x-tab-content,
.x-nav-tabs.top>.active>a, .x-nav-tabs.top>.active>a:hover {
	border-color: #008000 !important;
	border-width: 3px;
}

For header and footer background-color, add this:

footer.x-colophon,
header .x-navbar {
	background-color: tomato !important;
}

Please clarify what do you mean by this:

You can use either Hexadecimal colors values or Predefined/Cross-browser color names

Hope it helps,
Cheers!

#12

Hi friech,

Thanks, that was very helpful! I didn’t know how css works too well so some of the commands were bundled and that’s why I said I wanted to edit different elements separately, but I figured that out so I’m fine on that front now. I understand the colors now too, so thank you!

I noticed on the footer section that the background color extends past the double bars at the bottom. Can I choose different colors for the background between the bars and below the second bar?

Thanks.

Ari

#13

Hi again,

Please add the following code in your Customizer:

footer.x-colophon.top {
    background-color: #3582a5 !important;
}
footer.x-colophon.bottom {
    background-color: #1cadef !important;
}

Change the colors as per your need.

Cheers!

#14

That’s exactly what I wanted, thank you!

#15

We are delighted to assist you with this.

Cheers!

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.