Privacy Policy display issue

Delta99
Topic Author
Offline

4 years 9 months ago #337991 by Delta99

Privacy Policy display issue was created by Delta99

-- url of the page with the problem -- : kitsandcards.co.uk/index.php/beaded-jewellery/checkout
-- HikaShop version -- : 4.4.4
-- Joomla version -- : 3.9.24
-- PHP version -- : 7.4.24
-- Browser(s) name and version -- : Firefox 91.4

Hi guys
No idea if this is something generated by Hikashop or Joomla so apologies if it's the latter. I'm trying to figure out how to get this to display properly. There are no boxes anywhere for someone to tick whether or not they agree with the policy. And with it being a legal thing in the EU I'd kinda like to get it resolved

This is literally how it is on the site if you put an item in the basket and go to register for checkout (not via the login form under the menu). You'll maybe spot I've another issue re the cart but I'll come back about that separately at some point.
Thanks

Web Site Privacy
Privacy Policy*
I agree No
Fields marked with an asterisk (*) are required.

Please Log in or Create an account to join the conversation.

nicolas
Offline

4 years 9 months ago #337993 by nicolas

Replied by nicolas on topic Privacy Policy display issue

Hi,

The HTML there is generated by HikaShop.
It doesn't display properly because your template doesn't define CSS code for basic classes of Joomla that all templates are supposed to define.
So what you can do is to add the CSS code below, which comes from the default template of Joomla, to your template's CSS and it will then display the buttons properly:
i.imgur.com/C3gBMVW.png

Code:

.btn {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 13px;
	line-height: 18px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	color: #333;
	text-shadow: 0 1px 1px rgba(255,255,255,0.75);
	background-color: #f5f5f5;
	background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
	background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
	background-image: -o-linear-gradient(top,#fff,#e6e6e6);
	background-image: linear-gradient(to bottom,#fff,#e6e6e6);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
	border-color: #e6e6e6 #e6e6e6 #bfbfbf;
	*background-color: #e6e6e6;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
	border: 1px solid #bbb;
	*border: 0;
	border-bottom-color: #a2a2a2;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	*margin-left: .3em;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
	color: #333;
	background-color: #e6e6e6;
	*background-color: #d9d9d9;
}
.btn:active,
.btn.active {
	background-color: #cccccc \9;
}
.btn:first-child {
	*margin-left: 0;
}
.btn:hover,
.btn:focus {
	color: #333;
	text-decoration: none;
	background-position: 0 -15px;
	-webkit-transition: background-position .1s linear;
	-moz-transition: background-position .1s linear;
	-o-transition: background-position .1s linear;
	transition: background-position .1s linear;
}
.btn:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
.btn.active,
.btn:active {
	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
	box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.btn.disabled,
.btn[disabled] {
	cursor: default;
	background-image: none;
	opacity: 0.65;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-large {
	padding: 11px 19px;
	font-size: 16.25px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
	margin-top: 4px;
}
.btn-small {
	padding: 2px 10px;
	font-size: 12px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
	margin-top: 0;
}
.btn-mini [class^="icon-"],
.btn-mini [class*=" icon-"] {
	margin-top: -1px;
}
.btn-mini {
	padding: 0 6px;
	font-size: 9.75px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.btn-block {
	display: block;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.btn-block + .btn-block {
	margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
	width: 100%;
}
.btn-primary.active,
.btn-warning.active,
.btn-danger.active,
.btn-success.active,
.btn-info.active,
.btn-inverse.active {
	color: rgba(255,255,255,0.75);
}
.btn-primary {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #004b8d;
	background-image: -moz-linear-gradient(top,#005e8d,#002f8d);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#005e8d),to(#002f8d));
	background-image: -webkit-linear-gradient(top,#005e8d,#002f8d);
	background-image: -o-linear-gradient(top,#005e8d,#002f8d);
	background-image: linear-gradient(to bottom,#005e8d,#002f8d);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff005e8d', endColorstr='#ff002e8d', GradientType=0);
	border-color: #002f8d #002f8d #001641;
	*background-color: #002f8d;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
	color: #fff;
	background-color: #002f8d;
	*background-color: #002674;
}
.btn-primary:active,
.btn-primary.active {
	background-color: #001e5a \9;
}
.btn-warning {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #faa732;
	background-image: -moz-linear-gradient(top,#fbb450,#f89406);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbb450),to(#f89406));
	background-image: -webkit-linear-gradient(top,#fbb450,#f89406);
	background-image: -o-linear-gradient(top,#fbb450,#f89406);
	background-image: linear-gradient(to bottom,#fbb450,#f89406);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffab44f', endColorstr='#fff89406', GradientType=0);
	border-color: #f89406 #f89406 #ad6704;
	*background-color: #f89406;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.disabled,
.btn-warning[disabled] {
	color: #fff;
	background-color: #f89406;
	*background-color: #df8505;
}
.btn-warning:active,
.btn-warning.active {
	background-color: #c67605 \9;
}
.btn-danger {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #da4f49;
	background-image: -moz-linear-gradient(top,#ee5f5b,#bd362f);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f));
	background-image: -webkit-linear-gradient(top,#ee5f5b,#bd362f);
	background-image: -o-linear-gradient(top,#ee5f5b,#bd362f);
	background-image: linear-gradient(to bottom,#ee5f5b,#bd362f);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
	border-color: #bd362f #bd362f #802420;
	*background-color: #bd362f;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.btn-danger.disabled,
.btn-danger[disabled] {
	color: #fff;
	background-color: #bd362f;
	*background-color: #a9302a;
}
.btn-danger:active,
.btn-danger.active {
	background-color: #942a25 \9;
}
.btn-success {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #5bb75b;
	background-image: -moz-linear-gradient(top,#62c462,#51a351);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));
	background-image: -webkit-linear-gradient(top,#62c462,#51a351);
	background-image: -o-linear-gradient(top,#62c462,#51a351);
	background-image: linear-gradient(to bottom,#62c462,#51a351);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
	border-color: #51a351 #51a351 #387038;
	*background-color: #51a351;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
	color: #fff;
	background-color: #51a351;
	*background-color: #499249;
}
.btn-success:active,
.btn-success.active {
	background-color: #408140 \9;
}
.btn-info {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #49afcd;
	background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#5bc0de),to(#2f96b4));
	background-image: -webkit-linear-gradient(top,#5bc0de,#2f96b4);
	background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
	background-image: linear-gradient(to bottom,#5bc0de,#2f96b4);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
	border-color: #2f96b4 #2f96b4 #1f6377;
	*background-color: #2f96b4;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.disabled,
.btn-info[disabled] {
	color: #fff;
	background-color: #2f96b4;
	*background-color: #2a85a0;
}
.btn-info:active,
.btn-info.active {
	background-color: #24748c \9;
}
.btn-inverse {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #363636;
	background-image: -moz-linear-gradient(top,#444,#222);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#444),to(#222));
	background-image: -webkit-linear-gradient(top,#444,#222);
	background-image: -o-linear-gradient(top,#444,#222);
	background-image: linear-gradient(to bottom,#444,#222);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
	border-color: #222 #222 #000000;
	*background-color: #222;
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
	color: #fff;
	background-color: #222;
	*background-color: #151515;
}
.btn-inverse:active,
.btn-inverse.active {
	background-color: #090909 \9;
}
button.btn,
input[type="submit"].btn {
	*padding-top: 3px;
	*padding-bottom: 3px;
}
button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
	padding: 0;
	border: 0;
}
button.btn.btn-large,
input[type="submit"].btn.btn-large {
	*padding-top: 7px;
	*padding-bottom: 7px;
}
button.btn.btn-small,
input[type="submit"].btn.btn-small {
	*padding-top: 3px;
	*padding-bottom: 3px;
}
button.btn.btn-mini,
input[type="submit"].btn.btn-mini {
	*padding-top: 1px;
	*padding-bottom: 1px;
}
.btn-link,
.btn-link:active,
.btn-link[disabled] {
	background-color: transparent;
	background-image: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-link {
	border-color: transparent;
	cursor: pointer;
	color: #005e8d;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.btn-link:hover,
.btn-link:focus {
	color: #002b41;
	text-decoration: underline;
	background-color: transparent;
}
.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
	color: #333;
	text-decoration: none;
}
.btn-group {
	position: relative;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	font-size: 0;
	vertical-align: middle;
	white-space: nowrap;
	*margin-left: .3em;
}
.btn-group:first-child {
	*margin-left: 0;
}
.btn-group + .btn-group {
	margin-left: 5px;
}
.btn-toolbar {
	font-size: 0;
	margin-top: 9px;
	margin-bottom: 9px;
}
.btn-toolbar > .btn + .btn,
.btn-toolbar > .btn-group + .btn,
.btn-toolbar > .btn + .btn-group {
	margin-left: 5px;
}
.btn-group > .btn {
	position: relative;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.btn-group > .btn + .btn {
	margin-left: -1px;
}
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
	font-size: 13px;
}
.btn-group > .btn-mini {
	font-size: 9.75px;
}
.btn-group > .btn-small {
	font-size: 12px;
}
.btn-group > .btn-large {
	font-size: 16.25px;
}
.btn-group > .btn:first-child {
	margin-left: 0;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
}
.btn-group > .btn.large:first-child {
	margin-left: 0;
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	border-bottom-right-radius: 6px;
}
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
	z-index: 2;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
	outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
	padding-left: 8px;
	padding-right: 8px;
	-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
	-moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
	box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
	*padding-top: 5px;
	*padding-bottom: 5px;
}
.btn-group > .btn-mini + .dropdown-toggle {
	padding-left: 5px;
	padding-right: 5px;
	*padding-top: 2px;
	*padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle {
	*padding-top: 5px;
	*padding-bottom: 4px;
}
.btn-group > .btn-large + .dropdown-toggle {
	padding-left: 12px;
	padding-right: 12px;
	*padding-top: 7px;
	*padding-bottom: 7px;
}
.btn-group.open .dropdown-toggle {
	background-image: none;
	-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
	-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
	box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.btn-group.open .btn.dropdown-toggle {
	background-color: #e6e6e6;
}
.btn-group.open .btn-primary.dropdown-toggle {
	background-color: #002f8d;
}
.btn-group.open .btn-warning.dropdown-toggle {
	background-color: #f89406;
}
.btn-group.open .btn-danger.dropdown-toggle {
	background-color: #bd362f;
}
.btn-group.open .btn-success.dropdown-toggle {
	background-color: #51a351;
}
.btn-group.open .btn-info.dropdown-toggle {
	background-color: #2f96b4;
}
.btn-group.open .btn-inverse.dropdown-toggle {
	background-color: #222;
}
.btn .caret {
	margin-top: 8px;
	margin-left: 0;
}
.btn-large .caret {
	margin-top: 6px;
}
.btn-large .caret {
	border-left-width: 5px;
	border-right-width: 5px;
	border-top-width: 5px;
}
.btn-mini .caret,
.btn-small .caret {
	margin-top: 8px;
}
.dropup .btn-large .caret {
	border-bottom-width: 5px;
}
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
	border-top-color: #fff;
	border-bottom-color: #fff;
}
.btn-group-vertical {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
.btn-group-vertical > .btn {
	display: block;
	float: none;
	max-width: 100%;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.btn-group-vertical > .btn + .btn {
	margin-left: 0;
	margin-top: -1px;
}
.btn-group-vertical > .btn:first-child {
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}
.btn-group-vertical > .btn:last-child {
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}
.btn-group-vertical > .btn-large:first-child {
	-webkit-border-radius: 6px 6px 0 0;
	-moz-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
}
.btn-group-vertical > .btn-large:last-child {
	-webkit-border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	border-radius: 0 0 6px 6px;
}

I would recommend you contact your template provider.
It's not normal that it doesn't define the "btn" classes in its CSS.
And they would also be able to tell how best to add that CSS code on your end so that the buttons look like buttons.
Worst case, you could directly add it in the "styles for frontend" of the HikaShop configuration:
www.hikashop.com/support/documentation/1...ize-the-display.html
It will work, but it's not supposed to be used to add CSS that the template is supposed to define.

Regarding the issue with the cart, if you're talking about the look of the products table with the color changing when you hover on each row, this is also defined by your template CSS

Please Log in or Create an account to join the conversation.

Time to create page: 0.157 seconds