All site styles

Padding rules:

number is in pixels.

t=top • b=bottom • r=right • l=left (if no direction defined, it is all)

.pad5 (5px add 5px all)

.pad15tb (add 15px to the top and bottom)

.pad50r (add 50px to the right)

.center - centers text

.w8-norm Make text regular weight within bold text.

Put something inside a red ribbon!


<div class="red-ribbon">Text</div>



Circle bullets!

  • add the class "prod-overview" to the ul tag
  • like this: <ul class="prod-overview">
  • and then your bullets will be circles





#treefault

Excludes all pages except those with this id="treefault" applied to the top of the page.


h1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

h2 - Sed nec lacus vel tellus mattis euismod.

h3 - Sed molestie mi eget mauris ultricies commodo ut id leo.

h4 - Proin ullamcorper neque eu lorem tempor, eget hendrerit turpis vulputate.

h4.subheader - Suspendisse sollicitudin justo non massa faucibus, non cursus lacus sodales.

h5 - Quisque nec diam lobortis, lobortis sem in, iaculis purus.

a:link - all links are the same size as the text around it.

p - Regular paragraph text. Mauris id neque mollis, pretium lorem et, porta urna.

p.intro - Makes paragraph font size 25% bigger.

p.small Makes the paragraph font size 10% smaller than regular.

div.highlight - Phasellus accumsan dolor at tortor commodo, eu consequat tortor sodales.

Add .green to make text green.

Add .blue to make text blue.

Add .red to make text red.

p.quote - Phasellus accumsan dolor at tortor commodo, eu consequat tortor sodales. Vivamus euismod lorem varius odio mollis aliquam. Pellentesque rhoncus risus eu ligula condimentum consequat. Etiam sed magna pellentesque, efficitur libero a, ornare augue.

.author - , accumsan dolor at tortor

<div class="blockquote">
<blockquote>
<p class="quote">;Now we have an additional tool for educational purposes and a more interesting display for visitors.</p>
</blockquote>
<class="author">.author, accumsan dolor at tortor </p>
</div>



Buttons

Button Large

class="btn btn-primary btn-lg">

Button Small

class="btn btn-primary btn-sm"



#aplus Styles

These are the styles you can use when under the id #aplus

h2 heading

h3 heading

h4 heading

h5 heading


To add this gray panel around text, just add the class "container gray-panel" around a div tag.

<div class="container gray-panel">

Companion Products (sold separately)

Room Monitor

room monitor
  • Built-in temperature and humidity sensors measure conditions where the Monitor is located
  • Integrated digital display shows Monitor and add-on Wired Sensor
  • Compatible with add-on wired sensors, including the Liquid & Soil Temperature Sensor
Learn more

Outdoor Temperature & Humidity Monitor

outdoor monitor
  • Built-in temperature and humidity sensors measure conditions where the Monitor is located
  • Weather-resistant for outdoor use
Learn more
<div id="aplus" class="col-sm-12">
<div class="container gray-panel">
<h2 class="center">Companion Products <span class="subheader">(sold separately)</span></h2>
<div class="row">
<div class="col-md-6 border-R pad040 mar50t">
<h4 class="center">Room Monitor</h4>
<div class="center">
<a class="max200" href="/room-monitor-00276rm.html"><img src="https://www.acurite.com/media/images/room-monitor.jpg" alt="room monitor"></a>
</div>
<ul>
<li>Built-in temperature and humidity sensors measure conditions where the Monitor is located</li>
<li>Integrated digital display shows Monitor and add-on Wired Sensor </li>
<li>Compatible with add-on wired sensors, including the Liquid & Soil Temperature Sensor</li>
</ul>
<a class="btn btn-primary mar15t" href="/room-monitor-00276rm.html">Learn more</a>
</div><!--end 6 col-->
<div class="col-md-6 pad040 mar50t">
<h4 class="center">Outdoor Temperature & Humidity Monitor</h4>
<div class="center">
<a href="/outdoor-temperature-humidity-monitor-00275rm.html" class="max200"><img src="https://www.acurite.com/media/images/outdoor-monitor.jpg" alt="outdoor monitor"></a>
</div>
<ul>
<li>Built-in temperature and humidity sensors measure conditions where the Monitor is located</li>
<li>Weather-resistant for outdoor use</li>
</ul>
<a class="btn btn-primary mar15t" href="/room-monitor-00276rm.html">Learn more</a>
</div><!--end 6 col-->
</div><!--end row-->
</div><!--end container gray-panel-->
</div><!--end aplus 12 col-->