Đã hoàn thành

Fix CSS to display tax toggle correctly - 26/04/2018 07:28 EDT

We have a WordPress/WooCommerce site and we use this plugin: [login to view URL]

The plugin allows our customers to toggle between prices that have included VAT and excluded VAT.

I have come as far as I can with my limited CSS knowledge but now I need a professional to fix the rest.

As you can see in the attached image, the tax toggle is located on the left in the topbar. It should be located to the right in the topbar, where LOGOUT currently sits. LOGOUT should be moved to the left of the TAX toggle and have sufficient space between them.

Also, the toggle itself doesn't look very nice. It should use up the entire height of the topbar and the two buttons ("exkl. moms" and "inkl. moms") should both have the same height. When switching between the two options, the background color of both of them should change respectively.

All this must be achieved using CSS. We use a WordPress plugin called Simple Custom CSS and JS where we can add CSS directly in the Admin panel. This is the CSS code we currently use to achieve what you see in the attached image:

/* STYLE TAX TOGGLE */

/*.topnav-item {

margin-right: 300px!important;

}*/

/*#mycartbtn {

margin-right: 0px!important;

}*/

#wcvat-toggle::before {

display: none;

}

#wcvat-toggle {

margin-right: 0px;

padding-left: 5px;

color: #FFFFFF;

background-color: #66cc33;

font-family: "Open Sans";

font-size: 13px;

margin-right: 5px;

}

#[login to view URL] {

padding-left: 5px;

color: #FFFFFF;

background-color: #999999;

font-family: "Open Sans";

font-size: 13px;

margin-right: 5px;

}

#wcvat-toggle:after {

margin-top: 0px;

padding-left: 5px;

padding-right: 5px;

background-color: #999999;

color: #FFFFFF;

font-family: "Open Sans";

font-size: 13px;

content: "inkl. moms";

}

#[login to view URL]:after {

min-height: 100%;

padding-left: 5px;

padding-right: 5px;

background-color: #66cc33;

color: #FFFFFF;

font-family: "Open Sans";

font-size: 13px;

content: "inkl. moms";

}

/* END TAX TOGGLE STYLING */

.product-tax {

font-size: 12px!important;

font-weight: 200;

}

.woocommerce-Price-amount {

font-size: 18px!important;

font-weight: 600;

}

NOTE!!!! This job needs to be completed fast. Unless you can start working on it and complete it within 30- 60 minutes, please don't bid on this project.

Thanks in advance.

Kĩ năng: CSS, HTML, Javascript, PHP, WordPress

Xem nhiều hơn: fix css display page correctly ie6, display fix css, css display block firefox fix, fix css mouse issues, help fix css positioning, javascript ie6 fix css, fix css tables, fix css drop menu, css display error message, fix css ie6 javascript, ie6 fix css, fix css chrome, fix css compatibilities ie7, virtuemart fix product display, fix css dropdown menu

Về Bên Thuê:
( 11 nhận xét ) Hägersten, Sweden

ID dự án: #16786433

Được trao cho:

envumsolutions

Hello, I can fix css to display tax toggles. I am a web developer having 7 years of experience. I have an excellent designing and development skills. I can assure you that I would the right person for this project. Thêm

$25 USD trong 1 ngày
(51 Đánh Giá)
5.2

18 freelancer đang chào giá trung bình $26 cho công việc này

maxsmith8

Hello there, I am interested and ready to start, lets discuss with details. Please visit our profile and see our project reviews https://www.freelancer.com/u/maxsmith8.html looking forward to hear from you Thêm

$30 USD trong 0 ngày
(236 Nhận xét)
8.0
$30 USD trong 0 ngày
(340 Nhận xét)
7.7
arityinfoway

Hello Sir, I have gone through your requirements regarding Fix CSS to display tax toggle correctly. We brief and understand your idea and preference for job as you are looking for. I have more than 7+ years of ex Thêm

$31 USD trong 1 ngày
(146 Nhận xét)
7.0
diama64

Helllo there and good afternoon , i read your project about css to relocate the togle and logout , please send me a messge on chat with the link of your website to see my self as the image you uploaded isnt there so i Thêm

$25 USD trong 0 ngày
(383 Nhận xét)
6.6
aimych1

HI. I will complete it in 30 minutes. I am ready for this job. I have 5 years of experience. kindly send me a simple message.

$25 USD trong 0 ngày
(127 Nhận xét)
6.4
$25 USD trong 1 ngày
(14 Nhận xét)
5.2
vashishtrupinder

Hello, As I have seen your Job Post I am ready to work. I am having extensive experience in WordPress / Woocommerce development. Also I have good experience in UI design so I will handle all tasks perfectly. Thêm

$50 USD trong 0 ngày
(35 Nhận xét)
5.4
abbasjami47

4+ years in web development. Specialist in WORD-PRESS PLUGIN AND THEME DEVELOPMENT, WOO-COMMERCE,CODE-IGNITER, E-COMMERCE, CURL, CORE PHP,PAYMENT GATEWAYS, GOOGLE and RESPONSIVE DESIGNS. Bringing 4 years of WEB DE Thêm

$25 USD trong 1 ngày
(29 Nhận xét)
5.0
$15 USD trong 1 ngày
(51 Nhận xét)
4.4
sonaphp247

Hi, Could you come over to chat to discuss further in this regards as I would love to hear more about the idea/concept ? Allow me to discuss in details so that the detail features and functional flow gets clari Thêm

$25 USD trong 1 ngày
(18 Nhận xét)
3.8
$15 USD trong 1 ngày
(15 Nhận xét)
3.8
rk5737388

Dear Hiring Manager, Sir I have checked your [login to view URL] studying it all the points in brief . I am coming to the decision that i will do this project easily. I will start this project right now. Sir I am profe Thêm

$15 USD trong 1 ngày
(22 Nhận xét)
3.7
$25 USD trong 1 ngày
(13 Nhận xét)
3.7
adnanaslamit

Just drop your requirement and tell me when we will start the process so that i will provide you the best of my work. Can you discuss the points in chat ? Cheers @Adi

$25 USD trong 1 ngày
(13 Nhận xét)
2.9
ashrana9871

I having 6+ years of experience in Software DevelopmenT, acting in national and international projects in many areas like: PHP, CMS, FRAMEWORK and MOBILE [login to view URL] message me to discuss further

$25 USD trong 1 ngày
(15 Nhận xét)
4.0
govindsoni16

Hello, Greetings from Influencewebtech..!! Hope you doing great I understand all the requirements and I'm ready to start immediately. Please do not worry about the success of your project, you can rely on me. I Thêm

$25 USD trong 1 ngày
(6 Nhận xét)
2.3
$25 USD trong 1 ngày
(3 Nhận xét)
1.8