Rotate this news

Mar 2019 FormatTest

 

Use {$SITE_ROOT} for all of the image paths in CSS. This is the safest way to include a background image.
For example:

.className [
    background: url("{$SITE_ROOT}/files/...jpg")
]

Test1: No site root

This text in a para.
<img src='files/imagegallerymodule...> :
<img src='/files/imagegallerymodule...> :
End img

Test2: site root

This text in a para.
<img src='files/imagegallerymodule...> :
<img src='/files/imagegallerymodule...> :
End img

Test3: /files/...

This text in a para.
<img src='files/imagegallerymodule...> :
<img src='/files/imagegallerymodule...> :
End img

View the CSS
Chrome
With Domain
Without Domain

Edge, in the editor
With Domain
Without Domain

IE, for Hotdoodle_html5_3
With Domain


Debugging

Browsers are detected only in a new session
?hdsid=new&section=436

New session, dump, set page, set browser
?hdsid=1 &section=436 &dump_session=1 &Browser=Opera


$__Browser:

Every .tpl file, including the stylesheets, has the variable $__Browser which will be one of: 

  • Chrome
  • Firefox
  • Safari
  • Opera
  • Edge -  what IE became past v11
  • IE
  • base - value used when we do not recognize the browser

For CSS, $__Browser is what the browser will be
For other TPL, $__Browser is what the current user browser actually is.

Usage:

    {if $__Browser=='IE'}
    .clearfix [ display: inline-block;]
    {/if}

 

 

{$editor}

$editor is true for CSS when in the bare-bones iframe holding text in the HTML editor.
Mostly set body[] colors and table borders.
{if $editor}...{/if}

 

$is_ie
$is_ie is still around for legacy reasons. in CSS only.
Replace with {if $__Browser=='IE'}...{/if}

 

{look_dates}
{look_dates} now expands with a string saying for that CSS the values for 
$__Browser, $editor, $SITE_ROOT

 

The TPL we are using
/* lslater tests SITE_ROOT='{$SITE_ROOT}
__Browser={$__Browser} Browser={$Browser}  is_ie={$is_ie} __is_ie={$__is_ie}
 */

{declare_style family='Background Color' style=backgroundTest1 name='Test Background No Site root' rev=1 order=216 desc='To add a test background'}
div.backgroundTest1_container_box [
	{background_gradient color='lightblue'};
	padding: 30px;
	box-shadow: 0px 0px 10px {$SHADOW_COLOR};
	border-radius: 10px;
]
.backgroundTest1_moduletitle [

]
.backgroundTest1_modulebody [
    border: 4px dashed orange; 
    background: url("files/imagegallerymodule/43a33b22b4e6a@random/gallery64/back4.jpg") top center;
]

    div.backgroundTest1_container_box [
    	margin-bottom: 15px;
    ]



{declare_style family='Background Color' style=backgroundTest2 name='Test Background With Site root' rev=1 order=217 desc='To add a test background'}
div.backgroundTest2_container_box [
	{background_gradient color='lightpink'};
	padding: 30px;
	box-shadow: 0px 0px 10px {$SHADOW_COLOR};
	border-radius: 10px;
]
.backgroundTest2_moduletitle [

]
.backgroundTest2_modulebody [
    border: 4px dashed orange; 
    background: url("{$SITE_ROOT}/files/imagegallerymodule/43a33b22b4e6a@random/gallery64/back4.jpg") top center;
]

    div.backgroundTest2_container_box [
    	margin-bottom: 15px;
    ]






{declare_style family='Background Color' style=backgroundTest3 name='Test Background With /files' rev=1 order=218 desc='To add a test background'}
div.backgroundTest3_container_box [
	{background_gradient color='lightgreen'};
	padding: 30px;
	box-shadow: 0px 0px 10px {$SHADOW_COLOR};
	border-radius: 10px;
]
.backgroundTest3_moduletitle [

]
.backgroundTest3_modulebody [
    border: 4px dashed orange; 
    background: url("/files/imagegallerymodule/43a33b22b4e6a@random/gallery64/back4.jpg") top center;
]

    div.backgroundTest3_container_box [
    	margin-bottom: 15px;
    ]



/* Show some effects */
body [
        /* Set a background color in the editor */	
	{if $editor}
		background-color: pink ; 
	{/if}
       /* Set a awkward and obvious border on the entire page, when in Opera */
        {if $__Browser=='Opera'}
		background-color: orange ; 
		color: red; ;
		border: 20px solid blue !important; 
	{/if}
]
Browser

      2     [name] => Google Mediapartners
      2     [name] => Xbox 360
      4     [name] => Google Web Preview
      7     [name] => Vivaldi
      8     [name] => BingPreview
      8     [name] => Yahoo! Slurp
     13     [name] => twitter
     30     [name] => facebook
     79     [name] => ahref AhrefsBot
    173     [name] => Edge
    214     [name] => Opera
    241     [name] => Webview
    708     [name] => Baiduspider
   1522     [name] => Safari
   1633     [name] => HTTP Library
   1938     [name] => Googlebot
   2235     [name] => UNKNOWN
   2379     [name] => Internet Explorer
   3069     [name] => Firefox
   5729     [name] => bingbot
  10152     [name] => Chrome
  18346     [name] => misc crawler

Category

      2     [category] => appliance
   1633     [category] => misc
   1804     [category] => UNKNOWN
   2230     [category] => smartphone
  15958     [category] => pc
  26865     [category] => crawler

http://www.hotdoodle.com, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Powered by http://www.hotdoodle.com, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Website Designers for Web Site You Edt Site Map
Back to Top