CSS multiple loading

  • Resolved ClubMagellano

    (@clubmagellano)


    11 years, 10 months ago

    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 https://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

    https://www.ads-software.com/extend/plugins/my-shortcodes/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author David Cramer

    (@desertsnowman)

    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 https://docs.caldera.co.za/tab-css

    Hope that helps!

    Thread Starter ClubMagellano

    (@clubmagellano)

    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

    (@desertsnowman)

    No problem!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS multiple loading’ is closed to new replies.