Useful HTML/CSS codes
Article by: Lateș Iulian
OVERVIEW
Here is a list of useful HTML/CSS codes for builders to use whenever needed. The list is not perfect and can be improved with the help of everyone that builds websites. Please let the person that is in charge with the guide website what can be improved, changed, added to modify this article.
The list
/*Make the column as a clickable link*/
onclick="window.open('/camps-and-clinics#remote', '_blank');"
/*Change color when selecting text or images on website*/
::-moz-selection {
background: #a68459;
color: #f9f9f9;
}
::selection {
background: #a68459;
color: #f9f9f9;
}
/*Search bar padding left and right + the icon color and width*/
#dm .dmStoreSearch .dmStoreSearchClickOverlay {
width:50px !important;
}
#dm .dmStoreSearch .dmStoreSearchIcon {
right:20px !important;
color: #db232d !important;
}
*#dm *.p_hfcontainer div.u_1228684397 .dmStoreSearchInput {
padding-left:20px !important;
}
/*No padding for gallery widget*/
*#dm *.dmBody *.u_1889724166 .layout-container {
padding: 0 !important;
margin-left: -20px !important;
width: 103% !important;
}
/*Popup full height and width, visible as a normal page*/
*#dm *.dmBody *.allWrapper .dmPopupInner {
top: 0px !important;
left: 0px !important;
right: 0px !important;
width: 100% !important;
margin: 0px !important;
height: 100vh !important;
}
/*Contact form input height*/
div.dmInner input[type="text"], div.dmInner input[type="email"], div.dmInner input[type="number"], div.dmInner input[type="tel"], div.dmInner input[type=password], div.dmInner select {
height: 55px;
}
/*Contact form message height*/
*#dm *.dmBody div.dmforminput textarea {
height: 200px;
}
/*Button styling*/
*#dm *[data-buttonstyle] div.dmInner *#site_content *.dmWidget {
width: 200px !important;
height: 50px !important;
}
/*Changing website width*/
.dmRespRow .dmRespColsWrapper {
max-width: 1200px !important;
position: relative !important;
margin: 0 auto !important;
width: 100% !important;
}
/*Links*/
.myLinks a {
opacity : 1 !important;
-webkit-transition : all 0.4s ease-in-out !important;
-moz-transition : all 0.4s ease-in-out !important;
transition : all 0.4s ease-in-out !important;
}
.myLinks a:hover {
opacity : 0.6 !important;
-webkit-transition : all 0.4s ease-in-out !important;
-moz-transition : all 0.4s ease-in-out !important;
transition : all 0.4s ease-in-out !important;
}
/*Fixed buttons to bottom*/
*#dm *.dmBody a.u_1801173340 {
height:60px !important;
position:absolute !important;
bottom:25px !important;S
margin-bottom:0 !important;
text-align:center !important;
width:calc(100% - 190px) !important;
left:95px !important;
}
/*Slider arrows, change "\f0d9"; to the icons from font-awesome website*/
.nav-layout-2 .flex-direction-nav a:before {
content: "\f0d9";
}
.nav-layout-2 .flex-direction-nav a.flex-next:before {
content: "\f0da";
}
.flex-direction-nav a {
text-shadow: none !important;
}