Can I delete the border?

Hi,

You can amend the style.css file to remove the border and replace the plus/minus images in the image folder (keep the same name on the image files you use).

As of the latest version you can override the border on an individual basis using the border parameter: e.g. [toggle border=’1px dotted red’]content[/toggle]

Ian

Hi Ian,

Thanks for getting back so quickly. As a novice with WordPress & php it took me a while but I got the result which I was after (I changed the text to a simple “Read more …”, zero’d the margins as I will insert it into the middle of a long paragraph and removed all borders. It seems to work fine.

I used [toggle border=’none’ toggle title=”Read more …”] xxx content xxx/toggle] to remove the border on an individual basis. What would be a line of code to change in CSS file to remove borders permanently? And where would it go?

Also to take out the +/- signs I just deleted the lines of code that looked like they added the images??? Is there a better way to do it or is this ok?

Thank you, i really like the plugin.

I thin it might be best if I add an options page in the admin panel and allow settimgs such as the border, image and so o t be defined there.

Sounds great. The flexibility will be useful for all as I am sure everyone wants something a little different.

@susizimm:

Correct shortcode:

I’m pretty sure your shortcode should read…

[toggle border='none' title="Read more …"] xxx content xxx [/toggle]

…instead of what you provided in your comment…

[toggle border='none' toggle title="Read more …"] xxx content xxx/toggle]

…which has the word toggle incorrectly mentioned twice (once is sufficient) and you’re additionally missing an opening square bracket for the your closing tag.

Removing border and +/- icons:

You shouldn’t under any circumstances be directly editing the plugin files quite simply because every time you upgrade the plugin to its latest version, your edits will be lost.

Instead, use this straight-forward plugin: https://www.ads-software.com/plugins/simple-custom-css/

…and in the provided code editor, add the following code to remove all borders:

.azc_tsh_toggle, .azc_tsh_toggle_container{
    border:0;
}

…or add the following code if also wish to remove the padding (since you only really need the padding when using the borders):

.azc_tsh_toggle, .azc_tsh_toggle_container{
    border:0;
    padding:0;
}

Note that you can change the padding or border to whatever you require:

CSS for borders: https://www.w3schools.com/css/css_border.asp
CSS for padding: https://www.w3schools.com/css/css_padding.asp

To remove the +/- icons, add the following code:

.azc_tsh_toggle_active {
    background-image: none;
    padding-left:0;
}
.azc_tsh_toggle {
    background-image: none;
    padding-left:0;
}

Note that this also removes the left padding of 30px that creates the space for the icon images. Since the icons are being removed, you don’t need the padding and again, you can change 0 to whatever you require e.g. 1px, 2px, 3px etc.

This method will survive plugin upgrades since your CSS code is independently applied via the plugin I’ve suggested.

@azurcurve: If you’re making an options page, using an icon font set could save you a good bit of time.

Source a selection of icons in SVG format here: https://www.flaticon.com/

• Plus icons: https://www.flaticon.com/search/plus
• Expand icons: https://www.flaticon.com/search/expand
• Minus icons: https://www.flaticon.com/search/minus
• Contract icons: https://www.flaticon.com/search/collapse

Then, simply upload them to Fontello which will create an icon font for you for free.

After that, it’s simply a case of using your option pages to interchangeably apply classes to trigger the selected icons and icon colour.

The colours of icon fonts are set by CSS in the exact same way you’d set text colour via CSS so you wouldn’t have to worry about creating multiple color schemes for your icon graphics. Furthermore, they’re font/SVG based meaning they’re completely scalable (can be as large or small as required without pixelation or blurring occurring).

Icon fonts were an emerging trend in 2014 and are all the rage for 2015.

@susizimm:

If you want to replace the icons with your own:

1. Upload the two required icons via the media section of the WordPress admin area.
2. View each each file and copy the path (URL) to each file.
3. Paste the paths as the value for the background images (see code below).
4. Change left padding to whatever creates enough space for your icon.

.azc_tsh_toggle_active {
    /*Note: Path for minus goes between double quotes...*/
    background-image: url("");
    padding-left:0;
}
.azc_tsh_toggle {
    /*Note: Path for plus goes between double quotes...*/
    background-image: url("");
    padding-left:0;
}

Hi Clarus,

Thanks for the information on font sets; I’ll take a look.

Ian

@clarus Dignus THANKS for all that info. Super handy for lots of other stuff as well. Don’t forget the native WordPress Dashicons as well.