Archived topic
Issues with CSS
3 replies · Started by Knuth Becker on January 20, 2022
Hi
I know that this goes beyond the scope of the GP support so I understand if you can not help, but I thought it would be a quick problem solving for CSS wizards like you :-)
I had a web designer that I unfortunately cannot get in contact with any longer. He developed CSS for Calculated Fields Forms which created a checkbox design for radio button images (i.e. orange border at hover, orange checkbox at click on the image etc.) (example https://www.screencast.com/t/Or5FOO4sVPk) which I would like to move to a different site.
Is it possible that CSS can be located elsewhere on the site than 'Additional CSS'? Because I have tried to follow the exact same code etc.
I have tried copying the whole 'Additional CSS' file from test site to the non-test site to no avail as well as use the extra CSS (i.e. .custom_csss) for the radio buttons:
#fbuilder .customm_csss .two_column
{
float: left;
width: 23%;
position: relative;
margin: 15px 1%;
border: 1px solid #d3d3d3;
padding: 8px 8px 2px 8px;
min-height:225px;
}
#fbuilder .customm_csss .two_column.hello
{
border: 1px solid #d16800;
}
#fbuilder .customm_csss .two_column label
{
display: block;
position: relative;
padding-left: 0;
margin-bottom: 0;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#fbuilder .customm_csss .two_column label input
{
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
#fbuilder .customm_csss .two_column span.checkmark {
position: absolute;
bottom:-12px;
left: 50%;
height: 20px;
width: 20px;
background-color: #fff;
z-index: 99;
border: 1px solid #d16800;
border-radius: 100%;
transform: translate(-50%, -50%);
}
#fbuilder .customm_csss .two_column label:hover input ~ .checkmark
{
background-color: #d16800;
}
#fbuilder .customm_csss .two_column label input:checked ~ .checkmark
{
background: #d16800 !important;
}
#fbuilder .customm_csss .two_column label input:checked ~ .checkmark:after
{
display: block;
}
#fbuilder .customm_csss .two_column span.checkmark:after
{
content: "";
position: absolute;
left: 6px;
top: 3px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
display: none;
}
#fbuilder .customm_csss .two_column span img
{
width: 100%;
margin: 0 auto;
position:relative;
z-index:1;
}
#fbuilder .customm_csss .two_column span small
{
position: relative;
bottom: -26px;
left: 0;
right: 0;
margin: 0 auto;
color: #000;
font-size: 14px;
font-weight: 600;
text-transform: inherit;
letter-spacing: 1px;
z-index: 1;
padding: 0 10px;
border: none;
display: block;
width: 90%;
text-align: center;
background: transparent;
}
.cp_cff_pastel #fbuilder .pbPrevious{
background: #3f8823 !important;
border:1px solid #3f8823 !important;
}
.cp_cff_pastel #fbuilder .pbNext{
background: #3f8823 !important;
border:1px solid #3f8823 !important;
}
#fbuilder .custom_label_input input {
font-weight: 700 !important;
text-decoration: underline;
line-height: 38px;
background: transparent !important;
box-shadow: none !important;
color: #000 !important;
font-size: 21px !important;
}
#fbuilder .custom_label_input .dfield {
display: inline;
}
#fbuilder .custom_label_input label {
display: inline-block;
}
#fbuilder .custom_button_green input{
background: #3f8823 !important;
border:1px solid #3f8823 !important;
}
#fbuilder div.cpefb_error{
position:relative !important;
}
.cp_cff_pastel #fbuilder .pbEnd .pbPrevious {
background-color: #c1c1c1
!important;
border:1px solid #c1c1c1 !important;
}
/******** Responsive ********/
@media screen and (max-width:1366px)
{
}
@media screen and (max-width:1280px)
{
}
@media screen and (max-width:1199px)
{
#fbuilder .customm_csss .two_column
{
width: 31%;
margin: 15px 1%;
min-height: 240px;
}
}
@media screen and (max-width:991px)
{
#fbuilder .customm_csss .two_column
{
width: 31.33%;
margin: 15px 1%;
min-height: 255px;
}
}
@media screen and (max-width:767px)
{
#fbuilder .customm_csss .two_column
{
width: 48%;
margin: 15px 1%;
min-height:310px;
}
}
@media screen and (max-width:667px)
{
}
@media screen and (max-width:480px)
{
#fbuilder .customm_csss .two_column
{
float: none;
width: 100%;
margin: 15px 0;
min-height: 330px;
}
input#fieldname17_1
{
white-space: pre-wrap;
padding: 10px;
font-size: 14px;
line-height: 18px;
margin-bottom: 20px;
}
.tablepress {
overflow-y: hidden;
display: block;
}
}
@media screen and (max-width:380px)
{
#fbuilder .customm_csss .two_column
{
float: none;
width: 100%;
margin: 15px 0;
min-height: 295px;
}
}
@media screen and (max-width:330px)
{
#fbuilder .customm_csss .two_column
{
float: none;
width: 100%;
margin: 15px 0;
min-height: 235px;
}
}
Hi there,
Unfortunately we cannot provide support like this as it's completely unrelated to the theme.
I would recommend posting your question in a forum like this:
https://wordpress.stackexchange.com/
Or hiring another developer using a service like Codeable suggested at the bottom of the page:
https://generatepress.com/what-support-includes/
Thanks for your understanding :)
Of course, completely understandable. Thanks for the references!
Thank you!