Privacy Policy display issue

  • Posts: 20
  • Thank you received: 3
2 years 11 months ago #337991

-- 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.

  • Posts: 82868
  • Thank you received: 13375
  • MODERATOR
2 years 11 months ago #337993

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 

.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.058 seconds
Powered by Kunena Forum