using image in menu

General questions about CMSimple
bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: using image in menu

Post by bastingse » Thu Oct 14, 2021 1:48 pm

Let's party !!!!!! :lol: :lol: :lol: :lol:

Problem fixed!!
Thanks a lot lck!! And thank you to all of you who did try to help!!

Nice topic for others!

Thanks again!!

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: using image in menu

Post by lck » Thu Oct 14, 2021 1:55 pm

bastingse wrote:
Thu Oct 14, 2021 1:48 pm
Let's party !!!!!! :lol: :lol: :lol: :lol:

Problem fixed!!
👍🏻

To make it look good you could add a little padding to the navigation (when scrolled). lck_ddmenu.css line #29.

Code: Select all

body.is-scrolled .lck_nav {
	background-color: rgba(188, 0, 9, 0.98);
	-webkit-box-shadow: 0 1px 2px #212121;
	box-shadow: 0 1px 1px #616161;
	padding: 0; 
}
Change padding: 0; to padding: 0.5em 0;
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: using image in menu

Post by bastingse » Thu Oct 14, 2021 2:01 pm

Yeah, looks much much better. Thanks very kindly!!!

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: using image in menu

Post by lck » Thu Oct 14, 2021 2:57 pm

The mail form should also be styled a bit differently. I refer to viewtopic.php?f=13&t=16804&p=77674.

For this delete in the stylesheet.css line #955 to #967 and replace this with the following. Of course only a suggestion ;) .

Code: Select all

.xh_mailform .text,
.xh_mailform textarea {
	background-color: #ffffff;
	border: 1px solid #9e9e9e;
	box-sizing: border-box;
	color: #424242;
	font: 400 20px/1.5 Roboto, Arial, sans-serif;
	padding: 6px 10px;
}
.xh_mailform textarea {
	line-height: normal;
}
.xh_mailform .text:focus,
.xh_mailform textarea:focus,
.xh_mailform .xh_captcha_input:focus {
	background-color: #fff;
}
.xh_mailform .xh_captcha_input,
.xh_mailform .xh_captcha_code,
.xh_mailform .submit {
	border: 1px solid #9e9e9e;
	box-sizing: content-box;
	color: #000;
	display: inline-block;
	font: normal 24px/30px Roboto, Arial, sans-serif;
	height: 30px;
	margin: 0 0 0.5em 0;
	padding: 4px 10px;
	text-align: center;
	vertical-align: middle;
	width: 10rem;
}
.xh_mailform .xh_captcha_input {
	background-color: #fff;
}
.xh_mailform .xh_captcha_code {
	background-color: #777;
	color: #fff;
}
.xh_mailform .submit {
	background-color: #fff;
	cursor: pointer;
	font-weight: bold;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: using image in menu

Post by bastingse » Fri Oct 15, 2021 6:54 am

Thanks again!! Done and looks good! :)

lck
Posts: 2955
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: using image in menu

Post by lck » Fri Oct 15, 2021 9:19 am

If you also want to improve the login area, then replace line 1298 to 1354 in stylesheet.css with this code:

Code: Select all

/* XH login and password forgotten */
body.xh_login,
body.xh_login div.xh_login,
body.xh_login * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body.xh_login {
	background: none;
	background-color: #fafafa;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	font: 400 normal 1.25rem/1.25 system-ui, sans-serif !important;
	height: 100vh;
	padding: 1.5rem 0;
	position: relative;
	text-align: center;
	width: 100%;
}
body.xh_login div.xh_login {
	background: none;
	background-color: #fff;
	border: 0px solid transparent;
	border-radius: 10px;
	box-shadow: 0 30px 60px 0 rgb(0 0 0 / 30%);
	display: flex;
	flex-direction: column;
	height: auto !important;
	max-width: 700px;
	overflow: auto;
	padding: 30px 0 0;
	position: relative;
	left: auto;
	top: auto;
	text-align: center;
	transform: translate(0, 0);
	width: 90%;	
}
body.xh_login div.xh_login p:first-of-type {
	margin: 2em auto !important;
	width: 85%;
}
body.xh_login div.xh_login #login {
	display: flex;
	align-items: center;
	flex-direction: column;
}
body.xh_login strong, body.xh_login b {
	color: #000;
	font: 400 normal 1.25rem/1.25 system-ui, sans-serif !important;
}
body.xh_login input {
	background-color: #f6f6f6 !important;
	border: 2px solid #f6f6f6 !important;
	border-radius: 0.25rem !important;
	font: 400 normal 1.25rem/1.25 system-ui, sans-serif !important;
	line-height: 3 !important;
	margin: 0 0 0.5em !important;
	outline: none;
	text-align: center;
	width: 85%;
}
body.xh_login input:focus {
	background-color: #fff;
	border-bottom: 2px solid #e57373 !important;
}
body.xh_login input[type="submit"] {
	background-color: #e57373 !important;
	color: #fff !important;
	font: 400 normal 1.25rem/1.25 system-ui, sans-serif !important;
	line-height: 3 !important;
	margin: 0.5em 0 2em !important;
	width: 85%;
}
body.xh_login input[type="submit"]:hover {
	background-color: #ef5350 !important;
}
div.xh_login p a {
	color: #e57373;
}
div.xh_login form ~ p {
	background-color: #f6f6f6 !important;
	line-height: 3;
	margin: 0 !important;
	padding: 1em 0 0;
}
div.xh_login form ~ p + p {
	border-radius: 0 0 10px 10px;
	padding: 0 0 1em;
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

bastingse
Posts: 308
Joined: Fri Jun 06, 2008 9:38 pm
Location: Netherlands
Contact:

Re: using image in menu

Post by bastingse » Fri Oct 15, 2021 10:24 am

Awesome!!! :P

Post Reply