Tutorial - Changing The CheckBox and Button on Subscribe Page

On the user subscribe page it shows the list of newsletters along with a checkbox next to each one. here are a few issues by default.

By default the checkbox does not look like a checkbox, it looks like a normal empty button, i have already had users tell me they did not see a checkbox. So i did some small css modifications in my custom CSS file and basically just overrode the bootstrap defaults to make it look better.

First the default presentation looks like this:

subscribebutton_before

As you can see it looks like a empty button next to the named button. So lets fix that…

In your custom css just add this code:

label.btn {
border: 0px;
}

.btn.active {
border: 1px solid;
}

.btn span {
border: 1px solid;
height: 15px;
width: 15px;
}

the label.,btn will remove the border that surrounds both items.
the .btn.active will place the border back on the named button so it is not naked without a border of its own.
the .btn span will size the checkbox and also place a new border around it.

So now it looks like this:

subscribebutton_after

and all done… :slight_smile:

1 Like