Title: CSS multiple loading
Last modified: August 21, 2016

---

# CSS multiple loading

 *  Resolved [ClubMagellano](https://wordpress.org/support/users/clubmagellano/)
 * (@clubmagellano)
 * [13 years ago](https://wordpress.org/support/topic/css-multiple-loading/)
 * Hi, it’s always me, your nightmare 🙂
    I’ve noticed a curious behaviour: I’ve
   created a shortcode that creates a custom button+image but every time I request
   the shortcode the plugin loads again all the CSS so instead of having one css
   for all buttons I have a N-times bigger CSS. You can view it from this page [http://www.oktoberfest.it/octoberfest/oktoberfest-2013/](http://www.oktoberfest.it/octoberfest/oktoberfest-2013/)
   Buttons have .button_image class. Why only with this shortcode is doing this 
   curious thing?
 * This is my original CSS:
 *     ```
       .button_image{
       	background-color:#36aef3;
       	color:rgba(255,255,255,1) !important;
       	border:1px solid rgba(0,0,0,0.1);
       	text-shadow:-1px -1px rgba(0,0,0,0.1);
       	background-image: -moz-linear-gradient(top,  rgba(255,255,255,0.5) 28%, rgba(255,255,255,0) 100%); /* FF3.6+ */
       	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(28%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
       	background-image: -webkit-linear-gradient(top,  rgba(255,255,255,0.5) 28%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
       	background-image: -o-linear-gradient(top,  rgba(255,255,255,0.5) 28%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
       	background-image: -ms-linear-gradient(top,  rgba(255,255,255,0.5) 28%,rgba(255,255,255,0) 100%); /* IE10+ */
       	background-image: linear-gradient(to bottom,  rgba(255,255,255,0.5) 28%,rgba(255,255,255,0) 100%); /* W3C */
       	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
       	font-size:18px;
       	box-shadow:1px 1px 3px rgba(0,0,0,0.1);
       	text-align:center;
       	padding:10px 10px 10px 95px;
       	display:inline-block;
       	*display:inline;zoom:1;
       	position:relative;
       	max-width:180px;
       	font-weight:normal !important;
       	border-radius:2px;
       	margin:40px 5px 10px 0;
       }
       .button_image:hover{
       	background:none no-repeat scroll 0 0 #36aef3!important;
       }
       .button_image span {
       	background-color:#FFFFFF;
           border: 3px solid #FFFFFF;
           bottom: 0;
           box-shadow: 1px 0 rgba(0, 0, 0, 0.2), -1px 0 rgba(0, 0, 0, 0.2), 0 -1px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0,0,0,0.8) inset;
           display: block;
           height: 77px;
           left: -1px;
           padding: 3px;
           position: absolute;
           width: 77px;
       }
       .button_image .tool_box:after {
           border-color: transparent #FFFFFF;
           border-style: solid;
           border-width: 20px 0 0 20px;
           bottom: -3px;
           content: "";
           display: block;
           left: auto;
           position: absolute;
           right: -23px;
           width: 0;
       }
       ```
   
 * You can match this with the CSS that’s generated from the plugin.
    I hope this
   will be fixed soon. Regards, the nightmare XD
 * [http://wordpress.org/extend/plugins/my-shortcodes/](http://wordpress.org/extend/plugins/my-shortcodes/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [David Cramer](https://wordpress.org/support/users/desertsnowman/)
 * (@desertsnowman)
 * [13 years ago](https://wordpress.org/support/topic/css-multiple-loading/#post-3778542)
 * Hi there. No you’re not a nightmare! I really enjoy when people find problems.
   Makes things get better.
 * To address your problem, you can use the once tags.
    for example:
 *     ```
       [once]
       .button_image{
         ....
       }
       [/once]
       ```
   
 * The CSS between the [once] and [/once] tags will only get rendered on the first
   instance.
 * You can read more about it here [http://docs.caldera.co.za/tab-css](http://docs.caldera.co.za/tab-css)
 * Hope that helps!
 *  Thread Starter [ClubMagellano](https://wordpress.org/support/users/clubmagellano/)
 * (@clubmagellano)
 * [13 years ago](https://wordpress.org/support/topic/css-multiple-loading/#post-3778548)
 * ok thanks, that worked! I will read the documentation now I know where it is 
   🙂 I didn’t know about its existence! 😉
 *  Plugin Author [David Cramer](https://wordpress.org/support/users/desertsnowman/)
 * (@desertsnowman)
 * [13 years ago](https://wordpress.org/support/topic/css-multiple-loading/#post-3778574)
 * No problem!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘CSS multiple loading’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/my-shortcodes_f6e3df.svg)
 * [My Shortcodes](https://wordpress.org/plugins/my-shortcodes/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/my-shortcodes/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/my-shortcodes/)
 * [Active Topics](https://wordpress.org/support/plugin/my-shortcodes/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/my-shortcodes/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/my-shortcodes/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [David Cramer](https://wordpress.org/support/users/desertsnowman/)
 * Last activity: [13 years ago](https://wordpress.org/support/topic/css-multiple-loading/#post-3778574)
 * Status: resolved