Hi Joffm
So looking at the progress of the TFR template for version 3, its not really as good as I would have hoped, now where near as nice as the original - but then this is a work in progress so here's hoping.
However, you advice lead me to the solution I was looking for. By adopting the CSS from the custom.css file in the TFR Retro I was able to achieve exactly what I was looking for within the Fruity template. Every post I read said this wasn't possible without replacing with images - but it works well.
The changes I made are as follows and I hope this helps others trying to achieve the same.
Thanks for the help :laugh:
This is based on a Question / Body Text size of 17px :
Code:
.checkbox-item label,
.checkbox-item label.ls-label-xs-visibility {
padding-left: 30px;
padding-top: 3px;
}
.checkbox-item label::before,
.checkbox-item label.ls-label-xs-visibility::before {
width: 30px;
height: 30px;
}
.checkbox-item label::after,
.checkbox-item label.ls-label-xs-visibility::after {
width: 30px;
height: 30px;
border-radius: 2px;
padding-top: 0px;
padding-left: 5px;
background-color: #702000;
color: white;
font-size: 24px;
line-height: 27px;
}
.checkbox-item .ls-label-xs-visibility {
width: 30px;
height: 30px;
}
.checkbox-list .input-sm {
height: 32px;
font-size: inherit;
}
.othertext-label-checkbox-container {
padding-top: 0;
}
.radio-item .ls-label-xs-visibility {
width: 30px;
height: 30px;
}
.radio-item label {
padding-left: 25px;
padding-top: 3px;
}
.radio-item label:before {
width: 30px;
height: 30px;
border-color: #aaa;
margin-right: 20px;
}
.radio-item label::after {
background-color: #702000;
width: 20px;
height: 20px;
left: 5px;
top: 5px;
}