CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
AndreaNobili
AndreaNobili

Reputation: 42997

How can I change the background color of this block using BootStrap framework?

I am very new in BootStrap development and I have the following theme implemented using it: http://lnx.asper-eritrea.com/

As you can see in the content area there are 3 boxes (respectively named La Situazione, Archivio and Archivio Video).

This is the related code:

<section id="lancio-progetti">
    <div class="row">

        <a href="#">
        <div class="col-sm-4">
            <div class="box-progetto">
                <h3 class="text-center">La Situazione</h3>
                <!--<p class="text-center"><img src="/wordpress/wp-content/themes/AsperTheme/assets/img/pencil-3.jpg" class="img-thumbnail img-responsive"></p>-->
                <p class="text-center"><img src="<?php bloginfo('template_url'); ?>/assets/img/icona-situazione-big.gif" class="img-thumbnail img-responsive">
                </p>
                <p>
                    La situazione in sintesi: situazione politica dell'Eritrea           
                </p>
                <!--<a href="#" class="btn btn-primary btn-large btn-block upper-botton"><span class="glyphicon glyphicon-arrow-right"></span> Visita Archivio Attività</a>-->
            </div>
        </div><!-- /.col-sm-4 -->
        </a>
        <div class="col-sm-4">
            <div class="box-progetto">
                <h3 class="text-center">Archivio</h3>
                <!--<p class="text-center"><img src="/wordpress/wp-content/themes/AsperTheme/assets/img/pencil-1.jpg" class="img-thumbnail img-responsive"></p>-->
                <p class="text-center"><img src="<?php bloginfo('template_url'); ?>/assets/img/icona-comunicati-big.gif" class="img-thumbnail img-responsive">
                </p>
                <p>
                    Archivio storico che raccoglie i nostri comunicati e le notizie pubblicate
                </p>
                <a href="#" class="btn btn-primary btn-large btn-block upper-botton"><span class="glyphicon glyphicon-arrow-right"></span> Visita Archivio Comunicati</a>
            </div>
        </div><!-- /.col-sm-4 -->
        <div class="col-sm-4">
            <div class="box-progetto">
                <h3 class="text-center">Archivio Video</h3>
                <!--<p class="text-center"><img src="/wordpress/wp-content/themes/AsperTheme/assets/img/pencil-2.jpg" class="img-thumbnail img-responsive"></p>-->
                <p class="text-center"><img src="<?php bloginfo('template_url'); ?>/assets/img/icona-video.gif" class="img-thumbnail img-responsive">
                </p>
                <p>
                    Raccolta di videodocumenti e testimonianze video
                </p>
                <a href="#" class="btn btn-primary btn-large btn-block upper-botton"><span class="glyphicon glyphicon-arrow-right"></span> Visita Archivio Video</a>
            </div>
        </div><!-- /.col-sm-4 -->

    </div><!-- /.row -->
</section><!-- /section lancio progetti-->

As you can see the first box is different from the others 2 boxes because I have moove the link on the entire block and not only on the:

<a href="#" class="btn btn-primary btn-large btn-block upper-botton"><span class="glyphicon glyphicon-arrow-right"></span> Visita Archivio Video</a>

My problem is: using BootStrap can I obtain the same effect (the background color change when I put the mouse cursor on the link) that I have on the buttons links on the other 2 blocks?

Tnx

Upvotes: 0

Views: 1318

Answers (1)

APAD1
APAD1

Reputation: 13666

In the CSS, change this:

.upper-botton:hover, .upper-botton:focus, .upper-botton:active, .upper-botton.active, .open .dropdown-toggle.btn-primary {
   color: #ffffff;
   background-color: #F1B000;
   border-color: #285e8e;
}

to this (notice the addition of .box-progetto:hover to the CSS rule):

.upper-botton:hover, .upper-botton:focus, .upper-botton:active, .upper-botton.active, .open .dropdown-toggle.btn-primary, .box-progetto:hover {
   color: #ffffff;
   background-color: #F1B000;
   border-color: #285e8e;
}

Upvotes: 1

Related Questions