DTCOM - the most dtcom moodle theme
===========================================

Version 1.0 (20200606)

DTCOM é um tema Moodle responsivo de duas colunas altamente personalizável baseado no popular tema BCU que adiciona:

- Fontes personalizáveis ​​(Google Fonts)
- Cores totalmente personalizáveis
- Estilos de bloco totalmente personalizáveis ​​(incluindo ícones FA)
- Botões totalmente personalizáveis
- Navegação de cabeçalho adicional
- Noticiário
- Controle deslizante jQuery alternativo
- Estilos alternativos de curso de primeira página
- Blocos de marketing personalizáveis ​​adicionais
- Configurações adicionais de layout para largura, largura do controle deslizante, preenchimento de
  vários elementos
- Ícones sociais
- Configurações móveis (personalize a aparência do tema em dispositivos móveis)
- Alertas de bootstrap descartáveis
- Opção para adicionar formulário de login no cabeçalho da página inicial
- Carregador de logotipo e favicon
- Emojis modernos (graças a EmojiOne)
- Construtor de layout de página inicial
- Construtor de layout de painel
- Construtor de layout de curso
- Status de atividades
- API de privacidade (compatível com GDPR)
- opções de estilo de cabeçalho de 2 e 3 linhas
- 2 layouts de perfil de usuário


Estrutura HTML do Bloco de Marketing 


MARKETING BLOCO 1

<div class="thumbnail animate__animated animate__fadeInUp animate__delay-1s">
    <a href="#" target="_blank">
  <img src="marketing1.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom">
    </a>
    <div class="caption">
        <h3>Dicas</h3>
        <p class="text-overflow">Texto aqui!&nbsp;<br></p>
        <p style="text-align: right;"><a href="#" target="_blank">Saiba mais</a></p>
    </div>
</div>

MARKETING BLOCO 2

<div class="thumbnail animate__animated animate__fadeInUp animate__delay-2s">
    <a href="#" target="_blank">
  <img src="marketing1.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom">
    </a>
    <div class="caption">
        <h3>Dicas</h3>
        <p class="text-overflow">Texto aqui!&nbsp;<br></p>
        <p style="text-align: right;"><a href="#" target="_blank">Saiba mais</a></p>
    </div>
</div>

MARKETING BLOCO 3

<div class="thumbnail animate__animated animate__fadeInUp animate__delay-3s">
    <a href="#" target="_blank">
  <img src="marketing1.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom">
    </a>
    <div class="caption">
        <h3>Dicas</h3>
        <p class="text-overflow">Texto aqui!&nbsp;<br></p>
        <p style="text-align: right;"><a href="#" target="_blank">Saiba mais</a></p>
    </div>
</div>










HTML/CSS sample code for block areas
------------------------------------
Here you will find some code samples to help you to customize the Info Box and the Marketing Blocks.

You can insert any HTML tag to customize the front page blocks. Use a <div> tag as a main container and add the height to keep the
same value in all the blocks.

The Font Awesome icons set is available in
http://fortawesome.github.io/Font-Awesome/icons/.

You can insert any of them following the examples
http://fortawesome.github.io/Font-Awesome/examples/


Front Page Slider Styles
------------------------
Add images with at least 1900px x 400px.
If you want to reduce or increase the height, DTCOM will resize the image automatically.
There are two possible slider styles each with different markup required:


Original BCU Slider Markup:

<div class="span9">
  <h4>Information</h4>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
    et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>

  <div class="span3">
  <a href="#" class="submit">2016/17 Courses <i class="fa-chevron-right fa"></i></a>
</div>


Coventry Style Slider Markup

<div class="span6 col-sm-6">
<h3>Hand-crafted</h3> <h4>pixels and code for the Moodle community</h4>
<a href="#" class="submit">Check out our custom theme pricing!</a>
</div>


Estrutura HTML do Bloco de Marketing 


MARKETING BLOCO 1

<div class="thumbnail animate__animated animate__fadeInUp animate__delay-1s">
    <a href="#" target="_blank">
  <img src="marketing1.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom">
    </a>
    <div class="caption">
        <h3>Dicas</h3>
        <p class="text-overflow">Texto aqui!&nbsp;<br></p>
        <p style="text-align: right;"><a href="#" target="_blank">Saiba mais</a></p>
    </div>
</div>

MARKETING BLOCO 2

<div class="thumbnail animate__animated animate__fadeInUp animate__delay-2s">
    <a href="#" target="_blank">
  <img src="marketing1.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom">
    </a>
    <div class="caption">
        <h3>Dicas</h3>
        <p class="text-overflow">Texto aqui!&nbsp;<br></p>
        <p style="text-align: right;"><a href="#" target="_blank">Saiba mais</a></p>
    </div>
</div>

MARKETING BLOCO 3

<div class="thumbnail animate__animated animate__fadeInUp animate__delay-3s">
    <a href="#" target="_blank">
  <img src="marketing1.jpg" alt="" role="presentation" class="img-responsive atto_image_button_text-bottom">
    </a>
    <div class="caption">
        <h3>Dicas</h3>
        <p class="text-overflow">Texto aqui!&nbsp;<br></p>
        <p style="text-align: right;"><a href="#" target="_blank">Saiba mais</a></p>
    </div>
</div>




Front page Info Box and Marketing Blocks
----------------------------------------

There are two Info blocks in the front page located above and below the Marketing Blocks. These are just for compatibility with the
old BCU.

It is recommended to use the new marketing blocks builder that allows you to create your own layout and add much more blocks.

There are 8 rows where you can add up to 4 blocks in each with a total of 32 block of different size. See pix/layout.png for
more information.

You can enter any HTML code to the block, include FA icons, images, videos and apply in-line styles.

Some samples:


Block with solid background, FA icon and some text:

<div style="text-align:center; background: #e6e6e6; height: 350px; padding: 7px;">
    <i class="fa fa-paint-brush fa-5x" style="color: #3A454b;"></i>
    <h3>Title </h3>
    <div style="text-align:center;">Add your text here.</div>
</div>


Block with border and transparent background:

<div style="text-align:center; height: 350px; padding: 7px; border: 1px solid #3A454b;">
    <i class="fa fa-list fa-5x" style="color: #3A454b;"></i>
    <h3>Heading</h3>
    <div style="text-align:center; padding: 5px; color: #3A454b;">Add your text here.</div>
</div>


Block with an image:

<div style="height: 350px;">
    <img src="http://yoursite/yourimage.jpg" style="vertical-align:text-bottom; margin: 0 .5em;" height="auto" width="100%">
    <p style="margin-top: 5px; color: #333333; text-align: center;"><strong>Add your text here</strong></p>
</div>


Block with a video:

<div style="background: #606060; height: 350px">
    <center>
    <iframe src="https://www.youtube.com/embed/wop3FMhoLGs" allowfullscreen="" frameborder="0" height="315" width="560"></iframe>
    </center>
</div>


Block using multi-lang filter:

<div style="width: 100%; height: 240px; background-color: #cccccc;">
<h1 style="text-align: center; line-height: 120px;">
      <span class="multilang" lang="en">text in english</span>
      <span class="multilang" lang="es">texto en espaÃƒÂ±ol</span>
      <span class="multilang" lang="fr">texte en franÃƒÂ§ais</span>
      <span class="multilang" lang="ca">text en catalÃƒ </span>
</div>


Footer Blocks
-------------
You can apply the same HTML/CSS in the footer blocks.

Some samples:

Contact information

<i class="fa fa-building"></i>  High St. 100<br>
<span style="margin-left: 20px;">123456 City</span><br><br>
<i class="fa fa-phone"></i> +12 (3)456 78 90<br>
<i class="fa fa-envelope"></i> info@mail.com<br>
<i class="fa fa-globe"></i> www.example.com


List with Chevron

<ul class="block-list">
    <li><a href="http://moodle.org/"><span class="fa fa-chevron-right"></span><span>Accessibility</span></a></li>
    <li><a href="http://moodle.org/"><span class="fa fa-chevron-right"></span><span>Moodle Help</span></a></li>
    <li><a href="http://moodle.org/"><span class="fa fa-chevron-right"></span><span>Moodle Feedback</span></a></li>
    <li><a href="http://moodle.org/"><span class="fa fa-chevron-right"></span><span>IT Help</span></a></li>
    <li><a href="http://moodle.org/"><span class="fa fa-chevron-right"></span><span>IT Feedback</span></a></li>
</ul>


Copyright text
--------------
A sample of copyright text using FA icon

Made with <i class="fa fa-heart" style="color: #ff0000;"></i> in Europe


News Ticker
-----------
From version 1.3 the news ticker do not need to create an unordered list. Just add paragraphs using <p> tags:

<p>Configure all the theme colors</p>
<p>Use any Google Font for the content, headings and site title</p>
<p>Display a logo or a configurable title site</p>
<p>Configurable Slideshow</p>
<p>Display up to 12 marketing blocks in the front page</p>


Messages / Notifications
------------------------
Moodle 3.2 includes a new system to display messages and notifications in the screen.

The new system displays a hard coded black icons that are difficult to see when using dark background color in the top header.
In that case, you can use an alternate icons pack using white color.

Login the server by FTP or SFTP and open /theme/dtcom/pix_core/i and
delete notifications.png and rename notifications-white.png to notifications.png

Then open /theme/dtcom/pix_core/t and delete message.png and
rename message-white.png to message.png

From moodle 3.6 the messages and notifications has been changed to the called "Messages Drawer".


Activities icons
------------------------
From version 1.4, DTCOM includes its own icons pack that replace the default moodle icons.
If you don't want to use the icons just remove dtcom/pix_plugins and dtcom/pix_core/f
You can enable this icons from the administration.

