In LESS kann man Variablen vordefinieren. Farbwerte, Paddings und mehr. Hilfreich z.B., will man mal einen Grauton etwas heller stellen, Man muss nicht in diversen Dateien die color-Werte anpassen, sondern kann das an 1 Stelle erledigen. Bootstrap 3 übertreibt mit diesem Feature etwas und ich suche mir regelmäßig einen Wolf. Erster Schritt, eine sortierbare Übersicht. Vielleicht hilft's was.
Da ich mittlerweile auf Bootstrap 4 und SCSS/SASS umgestiegen bin, ist diese Liste lediglich für's Archiv, sozusagen.
Bootstrap-3-Variablen dynamisch ausgelesen
/media/plg_system_bs3ghsvs/less/3.3.7/variables.less
/templates/bs4ghsvs/less/variables.less
BS3-Original und Overrides des aktiven Templates
Variable | Bootstrap | Template | # |
---|---|---|---|
@gray-base | #000 | 1 | |
@gray-darker | lighten(@gray-base, 13.5%) | #101010 | 2 |
@gray-dark | lighten(@gray-base, 20%) | 3 | |
@gray | lighten(@gray-base, 33.5%) | 4 | |
@gray-light | lighten(@gray-base, 46.7%) | 5 | |
@gray-lighter | lighten(@gray-base, 93.5%) | #ccc | 6 |
@brand-primary | darken(#428bca, 6.5%) | 7 | |
@brand-success | #5cb85c | 8 | |
@brand-info | #5bc0de | 9 | |
@brand-warning | #f0ad4e | 10 | |
@brand-danger | #d9534f | @red | 11 |
@body-bg | #fff | @gray-lighter2 | 12 |
@text-color | @gray-dark | @black | 13 |
@link-color | @brand-primary | @red | 14 |
@link-hover-color | darken(@link-color, 15%) | 15 | |
@link-hover-decoration | underline | 16 | |
@font-family-sans-serif | "Helvetica Neue", Helvetica, Arial, sans-serif | Arial, Helvetica, "Arial Unicode MS", Sans-Serif | 17 |
@font-family-serif | Georgia, "Times New Roman", Times, serif | Georgia, "Times New Roman", Times, serif | 18 |
@font-family-monospace | Menlo, Monaco, Consolas, "Courier New", monospace | Monaco, Menlo, Consolas, "Courier New", monospace | 19 |
@font-family-base | @font-family-sans-serif | @font-family-sans-serif | 20 |
@font-size-base | 14px | 16px | 21 |
@font-size-large | ceil((@font-size-base * 1.25)) | 22 | |
@font-size-small | ceil((@font-size-base * 0.85)) | 23 | |
@font-size-h1 | floor((@font-size-base * 2.6)) | 24 | |
@font-size-h2 | floor((@font-size-base * 2.15)) | 25 | |
@font-size-h3 | ceil((@font-size-base * 1.7)) | 26 | |
@font-size-h4 | ceil((@font-size-base * 1.25)) | 27 | |
@font-size-h5 | @font-size-base | 28 | |
@font-size-h6 | ceil((@font-size-base * 0.85)) | 29 | |
@line-height-base | 1.428571429 | 30 | |
@line-height-computed | floor((@font-size-base * @line-height-base)) | 31 | |
@headings-font-family | inherit | @font-family-sans-serif | 32 |
@headings-font-weight | 500 | normal | 33 |
@headings-line-height | 1.1 | 34 | |
@headings-color | inherit | @gray-darker | 35 |
@icon-font-path | "../fonts/" | 36 | |
@icon-font-name | "glyphicons-halflings-regular" | 37 | |
@icon-font-svg-id | "glyphicons_halflingsregular" | 38 | |
@padding-base-vertical | 6px | 39 | |
@padding-base-horizontal | 12px | 40 | |
@padding-large-vertical | 10px | 41 | |
@padding-large-horizontal | 16px | 42 | |
@padding-small-vertical | 5px | 43 | |
@padding-small-horizontal | 10px | 44 | |
@padding-xs-vertical | 1px | 45 | |
@padding-xs-horizontal | 5px | 46 | |
@line-height-large | 1.3333333 | 47 | |
@line-height-small | 1.5 | 48 | |
@border-radius-base | 4px | 49 | |
@border-radius-large | 6px | 50 | |
@border-radius-small | 3px | 51 | |
@component-active-color | #fff | @white | 52 |
@component-active-bg | @brand-primary | @brand-danger | 53 |
@caret-width-base | 4px | 54 | |
@caret-width-large | 5px | 55 | |
@table-cell-padding | 8px | 56 | |
@table-condensed-cell-padding | 5px | 57 | |
@table-bg | transparent | 58 | |
@table-bg-accent | #f9f9f9 | 59 | |
@table-bg-hover | #f5f5f5 | 60 | |
@table-bg-active | @table-bg-hover | 61 | |
@table-border-color | #ddd | 62 | |
@btn-font-weight | normal | 63 | |
@btn-default-color | #333 | 64 | |
@btn-default-bg | #fff | 65 | |
@btn-default-border | #ccc | 66 | |
@btn-primary-color | #fff | 67 | |
@btn-primary-bg | @brand-primary | 68 | |
@btn-primary-border | darken(@btn-primary-bg, 5%) | 69 | |
@btn-success-color | #fff | 70 | |
@btn-success-bg | @brand-success | 71 | |
@btn-success-border | darken(@btn-success-bg, 5%) | 72 | |
@btn-info-color | #fff | 73 | |
@btn-info-bg | @brand-info | 74 | |
@btn-info-border | darken(@btn-info-bg, 5%) | 75 | |
@btn-warning-color | #fff | 76 | |
@btn-warning-bg | @brand-warning | 77 | |
@btn-warning-border | darken(@btn-warning-bg, 5%) | 78 | |
@btn-danger-color | #fff | 79 | |
@btn-danger-bg | @brand-danger | 80 | |
@btn-danger-border | darken(@btn-danger-bg, 5%) | 81 | |
@btn-link-disabled-color | @gray-light | 82 | |
@btn-border-radius-base | @border-radius-base | 83 | |
@btn-border-radius-large | @border-radius-large | 84 | |
@btn-border-radius-small | @border-radius-small | 85 | |
@input-bg | #fff | 86 | |
@input-bg-disabled | @gray-lighter | 87 | |
@input-color | @gray | 88 | |
@input-border | #ccc | 89 | |
@input-border-radius | @border-radius-base | 90 | |
@input-border-radius-large | @border-radius-large | 91 | |
@input-border-radius-small | @border-radius-small | 92 | |
@input-border-focus | #66afe9 | 93 | |
@input-color-placeholder | #999 | 94 | |
@input-height-base | (@line-height-computed + (@padding-base-vertical * 2) + 2) | 95 | |
@input-height-large | (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2) | 96 | |
@input-height-small | (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2) | 97 | |
@form-group-margin-bottom | 15px | 98 | |
@legend-color | @gray-dark | 99 | |
@legend-border-color | #e5e5e5 | 100 | |
@input-group-addon-bg | @gray-lighter | 101 | |
@input-group-addon-border-color | @input-border | 102 | |
@cursor-disabled | not-allowed | 103 | |
@dropdown-bg | #fff | 104 | |
@dropdown-border | rgba(0,0,0,.15) | 105 | |
@dropdown-fallback-border | #ccc | 106 | |
@dropdown-divider-bg | #e5e5e5 | 107 | |
@dropdown-link-color | @gray-dark | 108 | |
@dropdown-link-hover-color | darken(@gray-dark, 5%) | @white | 109 |
@dropdown-link-hover-bg | #f5f5f5 | @red | 110 |
@dropdown-link-active-color | @component-active-color | 111 | |
@dropdown-link-active-bg | @component-active-bg | 112 | |
@dropdown-link-disabled-color | @gray-light | 113 | |
@dropdown-header-color | @gray-light | 114 | |
@dropdown-caret-color | #000 | 115 | |
@zindex-navbar | 1000 | 116 | |
@zindex-dropdown | 1000 | 117 | |
@zindex-popover | 1060 | 118 | |
@zindex-tooltip | 1070 | 119 | |
@zindex-navbar-fixed | 1030 | 120 | |
@zindex-modal-background | 1040 | 121 | |
@zindex-modal | 1050 | 122 | |
@screen-xs | 480px | 123 | |
@screen-xs-min | @screen-xs | 480px | 124 |
@screen-phone | @screen-xs-min | 125 | |
@screen-sm | 768px | 126 | |
@screen-sm-min | @screen-sm | 768px | 127 |
@screen-tablet | @screen-sm-min | 128 | |
@screen-md | 992px | 129 | |
@screen-md-min | @screen-md | 992px | 130 |
@screen-desktop | @screen-md-min | 131 | |
@screen-lg | 1200px | 132 | |
@screen-lg-min | @screen-lg | 1200px | 133 |
@screen-lg-desktop | @screen-lg-min | 134 | |
@screen-xs-max | (@screen-sm-min - 1) | (@screen-sm-min - 1) | 135 |
@screen-sm-max | (@screen-md-min - 1) | (@screen-md-min - 1) | 136 |
@screen-md-max | (@screen-lg-min - 1) | (@screen-lg-min - 1) | 137 |
@grid-columns | 12 | 138 | |
@grid-gutter-width | 30px | 139 | |
@grid-float-breakpoint | @screen-sm-min | 140 | |
@grid-float-breakpoint-max | (@grid-float-breakpoint - 1) | 141 | |
@container-tablet | (720px + @grid-gutter-width) | 142 | |
@container-sm | @container-tablet | 143 | |
@container-desktop | (940px + @grid-gutter-width) | 144 | |
@container-md | @container-desktop | 145 | |
@container-large-desktop | (1140px + @grid-gutter-width) | 146 | |
@container-lg | @container-large-desktop | 147 | |
@navbar-height | 50px | 0 | 148 |
@navbar-margin-bottom | @line-height-computed | 0 | 149 |
@navbar-border-radius | @border-radius-base | 150 | |
@navbar-padding-horizontal | floor((@grid-gutter-width / 2)) | 151 | |
@navbar-padding-vertical | ((@navbar-height - @line-height-computed) / 2) | 152 | |
@navbar-collapse-max-height | 340px | 153 | |
@navbar-default-color | #777 | 154 | |
@navbar-default-bg | #f8f8f8 | @gray-lighter5 | 155 |
@navbar-default-border | darken(@navbar-default-bg, 6.5%) | 156 | |
@navbar-default-link-color | #777 | @red | 157 |
@navbar-default-link-hover-color | #333 | lighten(@yellow, 15%) | 158 |
@navbar-default-link-hover-bg | transparent | @red | 159 |
@navbar-default-link-active-color | #555 | @nav-pills-active-link-hover-color | 160 |
@navbar-default-link-active-bg | darken(@navbar-default-bg, 6.5%) | @nav-pills-active-link-hover-bg | 161 |
@navbar-default-link-disabled-color | #ccc | 162 | |
@navbar-default-link-disabled-bg | transparent | 163 | |
@navbar-default-brand-color | @navbar-default-link-color | 164 | |
@navbar-default-brand-hover-color | darken(@navbar-default-brand-color, 10%) | 165 | |
@navbar-default-brand-hover-bg | transparent | 166 | |
@navbar-default-toggle-hover-bg | #ddd | 167 | |
@navbar-default-toggle-icon-bar-bg | #888 | 168 | |
@navbar-default-toggle-border-color | #ddd | 169 | |
@navbar-inverse-color | lighten(@gray-light, 15%) | 170 | |
@navbar-inverse-bg | #222 | 171 | |
@navbar-inverse-border | darken(@navbar-inverse-bg, 10%) | 172 | |
@navbar-inverse-link-color | lighten(@gray-light, 15%) | 173 | |
@navbar-inverse-link-hover-color | #fff | 174 | |
@navbar-inverse-link-hover-bg | transparent | 175 | |
@navbar-inverse-link-active-color | @navbar-inverse-link-hover-color | 176 | |
@navbar-inverse-link-active-bg | darken(@navbar-inverse-bg, 10%) | 177 | |
@navbar-inverse-link-disabled-color | #444 | 178 | |
@navbar-inverse-link-disabled-bg | transparent | 179 | |
@navbar-inverse-brand-color | @navbar-inverse-link-color | 180 | |
@navbar-inverse-brand-hover-color | #fff | 181 | |
@navbar-inverse-brand-hover-bg | transparent | 182 | |
@navbar-inverse-toggle-hover-bg | #333 | 183 | |
@navbar-inverse-toggle-icon-bar-bg | #fff | 184 | |
@navbar-inverse-toggle-border-color | #333 | 185 | |
@nav-link-padding | 10px 15px | 186 | |
@nav-link-hover-bg | @gray-lighter | 187 | |
@nav-disabled-link-color | @gray-light | 188 | |
@nav-disabled-link-hover-color | @gray-light | 189 | |
@nav-tabs-border-color | #ddd | 190 | |
@nav-tabs-link-hover-border-color | @gray-lighter | 191 | |
@nav-tabs-active-link-hover-bg | @body-bg | 192 | |
@nav-tabs-active-link-hover-color | @gray | 193 | |
@nav-tabs-active-link-hover-border-color | #ddd | 194 | |
@nav-tabs-justified-link-border-color | #ddd | 195 | |
@nav-tabs-justified-active-link-border-color | @body-bg | 196 | |
@nav-pills-border-radius | @border-radius-base | 1 | 197 |
@nav-pills-active-link-hover-bg | @component-active-bg | @orange | 198 |
@nav-pills-active-link-hover-color | @component-active-color | @white | 199 |
@pagination-color | @link-color | 200 | |
@pagination-bg | #fff | @white | 201 |
@pagination-border | #ddd | @gray-lighter2 | 202 |
@pagination-hover-color | @link-hover-color | 203 | |
@pagination-hover-bg | @gray-lighter | @gray-lighter4 | 204 |
@pagination-hover-border | #ddd | @gray-lighter2 | 205 |
@pagination-active-color | #fff | @black | 206 |
@pagination-active-bg | @brand-primary | @gray-lighter4 | 207 |
@pagination-active-border | @brand-primary | @gray-lighter2 | 208 |
@pagination-disabled-color | @gray-light | 209 | |
@pagination-disabled-bg | #fff | @white | 210 |
@pagination-disabled-border | #ddd | @gray-lighter2 | 211 |
@pager-bg | @pagination-bg | 212 | |
@pager-border | @pagination-border | 213 | |
@pager-border-radius | 15px | 214 | |
@pager-hover-bg | @pagination-hover-bg | 215 | |
@pager-active-bg | @pagination-active-bg | 216 | |
@pager-active-color | @pagination-active-color | 217 | |
@pager-disabled-color | @pagination-disabled-color | 218 | |
@jumbotron-padding | 30px | 219 | |
@jumbotron-color | inherit | 220 | |
@jumbotron-bg | @gray-lighter | 221 | |
@jumbotron-heading-color | inherit | 222 | |
@jumbotron-font-size | ceil((@font-size-base * 1.5)) | 223 | |
@jumbotron-heading-font-size | ceil((@font-size-base * 4.5)) | 224 | |
@state-success-text | #3c763d | 225 | |
@state-success-bg | #dff0d8 | 226 | |
@state-success-border | darken(spin(@state-success-bg, -10), 5%) | 227 | |
@state-info-text | #31708f | 228 | |
@state-info-bg | #d9edf7 | 229 | |
@state-info-border | darken(spin(@state-info-bg, -10), 7%) | 230 | |
@state-warning-text | #8a6d3b | 231 | |
@state-warning-bg | #fcf8e3 | 232 | |
@state-warning-border | darken(spin(@state-warning-bg, -10), 5%) | 233 | |
@state-danger-text | #a94442 | 234 | |
@state-danger-bg | #f2dede | 235 | |
@state-danger-border | darken(spin(@state-danger-bg, -10), 5%) | 236 | |
@tooltip-max-width | 200px | 237 | |
@tooltip-color | #fff | @black | 238 |
@tooltip-bg | #000 | @state-info-bg | 239 |
@tooltip-opacity | .9 | 1 | 240 |
@tooltip-arrow-width | 5px | 241 | |
@tooltip-arrow-color | @tooltip-bg | 242 | |
@popover-bg | #fff | 243 | |
@popover-max-width | 276px | 244 | |
@popover-border-color | rgba(0,0,0,.2) | 245 | |
@popover-fallback-border-color | #ccc | 246 | |
@popover-title-bg | darken(@popover-bg, 3%) | 247 | |
@popover-arrow-width | 10px | 248 | |
@popover-arrow-color | @popover-bg | 249 | |
@popover-arrow-outer-width | (@popover-arrow-width + 1) | 250 | |
@popover-arrow-outer-color | fadein(@popover-border-color, 5%) | 251 | |
@popover-arrow-outer-fallback-color | darken(@popover-fallback-border-color, 20%) | 252 | |
@label-default-bg | @gray-light | 253 | |
@label-primary-bg | @brand-primary | 254 | |
@label-success-bg | @brand-success | 255 | |
@label-info-bg | @brand-info | 256 | |
@label-warning-bg | @brand-warning | 257 | |
@label-danger-bg | @brand-danger | 258 | |
@label-color | #fff | @white | 259 |
@label-link-hover-color | #fff | @white | 260 |
@modal-inner-padding | 15px | 261 | |
@modal-title-padding | 15px | 262 | |
@modal-title-line-height | @line-height-base | 263 | |
@modal-content-bg | #fff | 264 | |
@modal-content-border-color | rgba(0,0,0,.2) | 265 | |
@modal-content-fallback-border-color | #999 | 266 | |
@modal-backdrop-bg | #000 | 267 | |
@modal-backdrop-opacity | .5 | 268 | |
@modal-header-border-color | #e5e5e5 | 269 | |
@modal-footer-border-color | @modal-header-border-color | 270 | |
@modal-lg | 900px | 271 | |
@modal-md | 600px | 272 | |
@modal-sm | 300px | 273 | |
@alert-padding | 15px | 274 | |
@alert-border-radius | @border-radius-base | 275 | |
@alert-link-font-weight | bold | 276 | |
@alert-success-bg | @state-success-bg | 277 | |
@alert-success-text | @state-success-text | 278 | |
@alert-success-border | @state-success-border | 279 | |
@alert-info-bg | @state-info-bg | 280 | |
@alert-info-text | @state-info-text | 281 | |
@alert-info-border | @state-info-border | 282 | |
@alert-warning-bg | @state-warning-bg | 283 | |
@alert-warning-text | @state-warning-text | 284 | |
@alert-warning-border | @state-warning-border | 285 | |
@alert-danger-bg | @state-danger-bg | 286 | |
@alert-danger-text | @state-danger-text | 287 | |
@alert-danger-border | @state-danger-border | 288 | |
@progress-bg | #f5f5f5 | 289 | |
@progress-bar-color | #fff | 290 | |
@progress-border-radius | @border-radius-base | 291 | |
@progress-bar-bg | @brand-primary | 292 | |
@progress-bar-success-bg | @brand-success | 293 | |
@progress-bar-warning-bg | @brand-warning | 294 | |
@progress-bar-danger-bg | @brand-danger | 295 | |
@progress-bar-info-bg | @brand-info | 296 | |
@list-group-bg | #fff | 297 | |
@list-group-border | #ddd | 298 | |
@list-group-border-radius | @border-radius-base | 299 | |
@list-group-hover-bg | #f5f5f5 | 300 | |
@list-group-active-color | @component-active-color | 301 | |
@list-group-active-bg | @component-active-bg | 302 | |
@list-group-active-border | @list-group-active-bg | 303 | |
@list-group-active-text-color | lighten(@list-group-active-bg, 40%) | 304 | |
@list-group-disabled-color | @gray-light | 305 | |
@list-group-disabled-bg | @gray-lighter | 306 | |
@list-group-disabled-text-color | @list-group-disabled-color | 307 | |
@list-group-link-color | #555 | 308 | |
@list-group-link-hover-color | @list-group-link-color | 309 | |
@list-group-link-heading-color | #333 | 310 | |
@panel-bg | #fff | 311 | |
@panel-body-padding | 15px | 312 | |
@panel-heading-padding | 10px 15px | 313 | |
@panel-footer-padding | @panel-heading-padding | 314 | |
@panel-border-radius | @border-radius-base | 315 | |
@panel-inner-border | #ddd | 316 | |
@panel-footer-bg | #f5f5f5 | 317 | |
@panel-default-text | @gray-dark | 318 | |
@panel-default-border | #ddd | 319 | |
@panel-default-heading-bg | #f5f5f5 | 320 | |
@panel-primary-text | #fff | 321 | |
@panel-primary-border | @brand-primary | 322 | |
@panel-primary-heading-bg | @brand-primary | 323 | |
@panel-success-text | @state-success-text | 324 | |
@panel-success-border | @state-success-border | 325 | |
@panel-success-heading-bg | @state-success-bg | 326 | |
@panel-info-text | @state-info-text | 327 | |
@panel-info-border | @state-info-border | 328 | |
@panel-info-heading-bg | @state-info-bg | 329 | |
@panel-warning-text | @state-warning-text | 330 | |
@panel-warning-border | @state-warning-border | 331 | |
@panel-warning-heading-bg | @state-warning-bg | 332 | |
@panel-danger-text | @state-danger-text | 333 | |
@panel-danger-border | @state-danger-border | 334 | |
@panel-danger-heading-bg | @state-danger-bg | 335 | |
@thumbnail-padding | 4px | 336 | |
@thumbnail-bg | @body-bg | lighten(@thumbnail-border, 10%) | 337 |
@thumbnail-border | #ddd | @gray-lighter2 | 338 |
@thumbnail-border-radius | @border-radius-base | 339 | |
@thumbnail-caption-color | @text-color | 340 | |
@thumbnail-caption-padding | 9px | 4px | 341 |
@well-bg | #f5f5f5 | 342 | |
@well-border | darken(@well-bg, 7%) | 343 | |
@badge-color | #fff | 344 | |
@badge-link-hover-color | #fff | 345 | |
@badge-bg | @gray-light | 346 | |
@badge-active-color | @link-color | 347 | |
@badge-active-bg | #fff | 348 | |
@badge-font-weight | bold | 349 | |
@badge-line-height | 1 | 350 | |
@badge-border-radius | 10px | 351 | |
@breadcrumb-padding-vertical | 8px | 15px | 352 |
@breadcrumb-padding-horizontal | 15px | 0 | 353 |
@breadcrumb-bg | #f5f5f5 | transparent | 354 |
@breadcrumb-color | #ccc | @black | 355 |
@breadcrumb-active-color | @gray-light | @gray-light | 356 |
@breadcrumb-separator | "/" | "|" | 357 |
@carousel-text-shadow | 0 1px 2px rgba(0,0,0,.6) | 358 | |
@carousel-control-color | #fff | 359 | |
@carousel-control-width | 15% | 360 | |
@carousel-control-opacity | .5 | 361 | |
@carousel-control-font-size | 20px | 362 | |
@carousel-indicator-active-bg | #fff | 363 | |
@carousel-indicator-border-color | #fff | 364 | |
@carousel-caption-color | #fff | 365 | |
@close-font-weight | bold | 366 | |
@close-color | #000 | @red | 367 |
@close-text-shadow | 0 1px 0 #fff | 368 | |
@code-color | #c7254e | 369 | |
@code-bg | #f9f2f4 | @gray-lighter5 | 370 |
@kbd-color | #fff | 371 | |
@kbd-bg | #333 | 372 | |
@pre-bg | #f5f5f5 | 373 | |
@pre-color | @gray-dark | 374 | |
@pre-border-color | #ccc | 375 | |
@pre-scrollable-max-height | 340px | 376 | |
@component-offset-horizontal | 180px | 377 | |
@text-muted | @gray-light | 378 | |
@abbr-border-color | @gray-light | 379 | |
@headings-small-color | @gray-light | 380 | |
@blockquote-small-color | @gray-light | 381 | |
@blockquote-font-size | (@font-size-base * 1.25) | 382 | |
@blockquote-border-color | @gray-lighter | 383 | |
@page-header-border-color | @gray-lighter | @separator-border-color | 384 |
@dl-horizontal-offset | @component-offset-horizontal | 385 | |
@dl-horizontal-breakpoint | @grid-float-breakpoint | 386 | |
@hr-border | @gray-lighter | 387 |
<?php
/*
2015-10-11
bootstrap-3-variables.php
Variablen und Werte aus BS3-variables.less (Orig.) auslesen.
2015-10-17: zusätzlich Custom Werte aus template-eigener variables.less.
*/
?>
<?php
defined('_JEXEC') or die;
$selector = 'bootstrap-3-variables';
$html = array();
$link = '';
$countCollect = 0;
$app = JFactory::getApplication();
// Relevant für FooTable, wenn paging enabled
if (!($maxentries = $app->input->get->getInt('maxentries')))
{
$maxentries = 50;
}
$apologise = JText::_('ICOMOONCLASSES_APOLOGISE');
$file = '/media/plg_system_bs3ghsvs/less/3.3.7/variables.less';
$fileAbs = JPATH_SITE . $file;
$template = $app->getTemplate();
$fileCustom = '/templates/' . $template . '/less/variables.less';
$fileCustomAbs = JPATH_SITE . $fileCustom;
if (!file_exists($fileAbs))
{
$html[] = '<p class="alert alert-error">Datei ';
$html[] = $file;
$html[] = ' nicht gefunden.';
$html[] = $apologise;
$html[] = '</p>';
}
elseif (!file_exists($fileCustomAbs))
{
$html[] = '<p class="alert alert-error">Datei ';
$html[] = $fileCustom;
$html[] = ' nicht gefunden.';
$html[] = $apologise;
$html[] = '</p>';
}
else
{
$link = '<p><a href="' . JUri::root(true) . $file . '" target="_blank">' . $file . '</a></p>';
$link .= '<p><a href="' . JUri::root(true) . $fileCustom . '" target="_blank">' . $fileCustom . '</a></p>';
$collect = collectLessVariablesGhsvs($fileAbs);
$countCollect = count($collect);
if ($countCollect)
{
$i = 0;
$collectCustom = collectLessVariablesGhsvs($fileCustomAbs);
$html[] = '<h4>BS3-Original und Overrides des aktiven Templates</h4>';
#$html[] = '<div class="table-responsive">';
$html[] = '<table class="table table-condensed table-bordered" id="' . $selector . '"';
$html[] = '>';
$html[] = '<thead>';
$html[] = '<tr>';
$html[] = '<th>Variable</th>';
$html[] = '<th data-breakpoints="xxs">Bootstrap</th>';
$html[] = '<th data-breakpoints="xs">Template</th>';
$html[] = '<th data-type="number">#</th>';
$html[] = '</tr>';
$html[] = '</thead>';
$html[] = '<tbody>';
foreach ($collect as $k => $v)
{
$vCustom = '';
$html[] = '<tr>';
$html[] = '<td data-ghsvs="toggle">' . $k . '</td>';
$html[] = '<td>' . $v . '</td>';
if (isset($collectCustom[$k]))
{
$vCustom = $collectCustom[$k];
unset($collectCustom[$k]);
}
$html[] = '<td>' . $vCustom . '</td>';
$html[] = '<td data-ghsvs="number">' . (++$i) . '</td>';
$html[] = '</tr>';
}
$html[] = '</tbody>';
$html[] = '</table>';
#$html[] = '</div><!--/table-responsive-->';
}
}
if (!count($html))
{
$html[] = '<p class="alert alert-error">Da ist wohl was schief gelaufen. ';
$html[] = $apologise;
$html[] = '</p>';
}
else
{
// Mehr Einträge in Tabelle anzeigen?
$uri = JUri::getInstance();
if ($countCollect > $maxentries)
{
$uri->setVar('maxentries', $countCollect);
$link .= '<p class=" btn btn-default text-fett" style="font-size:1.3em;"><a rel="nofollow" href="'.$uri.'#BELOWHEADER">Alle '.$countCollect.' Einträge auf 1 Seite anzeigen</a></p>';
}
########### FooTable 3 START ###########
// Speziell. Wir haben Footable auf unserem Server via Plugin installiert.
// Ggf. Zeilen entfernen
$options = array(
'empty' => JText::_('GHSVS_MODULES_FOOTABLE_EMPTY'),
'sorting' => array(
'enabled' => true
),
'filtering' => array(
'enabled' => true
),
'paging' => array(
'enabled' => ($countCollect > $maxentries) ? true : false,
'size' => $maxentries,
'countFormat' => JText::sprintf('JLIB_HTML_PAGE_CURRENT_OF_TOTAL', '{CP}', '{TP}'),
'current' => 1,
'limit' => 10,
'position' => 'center'
),
'state' => array(
'enabled' => true,
'filtering' => true,
'paging' => true,
'sorting' => true,
'key' => $selector
),
// Erster geöffnet. Auch nach Sortieren wird erster geöffnet.
'expandFirst' => false,
//'useParentWidth' => true,
'stopPropagation' => true,
// Leichteres Handling der Breakpoints. Nehmen drunter liegende mit.
'cascade' => true,
'breakpoints' => array(
// Du muss xxs eingeben, damit Spalte bei *xs* *verschwindet*!
'xxs' => 480,
'xs' => 620,
'sm' => 768,
'md' => 992,
'lg' => 1200,
),
);
JHtml::_('bs3ghsvs.footable', '#' . $selector, $options);
########### FooTable 3 ENDE ###########
echo '<style>table{
word-wrap: normal
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none;
}
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
[data-ghsvs="toggle"]{
font-weight: bold;
background-color: #fafafa;
cursor:pointer;
}
[data-ghsvs="number"]{
text-align: right;
}
</style>';
}
echo $link . implode('', $html);
function collectLessVariablesGhsvs($fileAbs)
{
$lines = file($fileAbs);
$collect = array();
foreach ($lines as $i => $line){
$line = trim($line);
if (strpos($line, '@') !== 0 || strpos($line, ':') === false)
{
continue;
}
// Fix 2015-10-17.
// Derzeit verwendet BS3 nur "//" als Kommentarzeichen
if (strpos($line, '//') !== false)
{
$line = explode('//', $line, 2);
$line = $line[0];
}
$line = explode(':', $line, 2);
if (count($line) != 2){
continue;
}
// Vorsicht! Derzeit geht das noch mit Semikolon.
// Es sind aber auch Semikolons statt Komma zwischen
// Funktions-Parametern erlaubt.
// Siehe "Fix 2015-10-17"
// $parts = explode(';', $line[1], 2);
// $line[1] = trim($parts[0]);
$collect[trim($line[0])] = trim($line[1], ' ;');
}
return $collect;
}
Allgemeiner Hinweis zu Erweiterungen und Code-Schnipseln
Verbesserungsvorschläge, Fragen und Feature-Wünsche sind willkommen.
Alle nicht explizit als fertige Erweiterung markierten Skripte und Codes von www.ghsvs.de dienen als Ansätze / Ideen für eigene Ausarbeitung. GHSVS bzw. die jeweiligen Autoren übernehmen keinerlei Garantien beim Einsatz Ihrer kostenlosen Erweiterungen, Programme, Codes und Skripte, helfen aber gerne bei Rückfragen, soweit zeitlich möglich.