How te create border around columns and add hover color? – Themeco Community

How te create border around columns and add hover color?

Aida M — Wed, 24 Sep 2014 21:46:50 +0000

hi,
my customer asked me to recreate the styling of boxed content from this page http://www.thegreencreator.com (please see the boxed articles in the middle of the page). my customer is asking me to create 4 blocks which are outlined (have a border) and this outline/border changes color when you hover over it.
can you please help me with this? my website is http://oilivia.nl/wordpress/ i already made 2 rows with 2 columns, but now need to add the outline/border and add hover color.
thanks in advance for your help!
regards,
aida

Reply To: How te create border around columns and add hover color?

Darshana — Wed, 24 Sep 2014 22:13:04 +0000

Hi there,

Add a special class to reflect those columns (Eg:”my-block”) and follow the example below. Place the CSS code into the Customizer, Custom > CSS section using the menu Appearance -> Customize.


.my-block {
	border: 1px solid black;
}
.my-block:hover {
	border: 1px solid red;
}

Hope that helps.

Reply To: How te create border around columns and add hover color?

Aida M — Thu, 25 Sep 2014 07:44:57 +0000

this worked fine! thank you so much!!! 🙂

Reply To: How te create border around columns and add hover color?

Paul R — Thu, 25 Sep 2014 09:31:23 +0000

You’re welcome Aida. 🙂

Reply To: How te create border around columns and add hover color?

Aquor — Mon, 24 Aug 2015 22:35:51 +0000

Does this method work with hex colors as well? I’ve tried replacing “border: 1px solid black;” with “border: 1px #000;” and it stops working — what am I overlooking?

Thanks!

Reply To: How te create border around columns and add hover color?

Prasant Rai — Tue, 25 Aug 2015 03:17:56 +0000

Hello There,

Thanks for writing in!

Request you to kindly update your code with the following border: 1px solid #000 !important;. If your are still facing the problem kindly share URL of your website.

Thanks.