Widget CSS Guidance Needed

  • Resolved diverdan

    (@diverdan)


    3 years, 12 months ago

    We are trying to customize the display in the widget.

    This may be seen on https://dev3.neponset.org/programs/habitat-restoration/

    How can we make the boxes wider and how do we center the images in their little boxes?

    Any guidance would be appreciated.

    This is the CSS currently in place;

    .crp_related_widget {
    clear: both;
    margin: auto;
    width: 75%
    }
    .crp_related_widget h3 {
    margin: auto !important;
    width: 75%
    }
    .crp_related_widget ul {
    list-style: none;
    float: left;
    margin: 0 !important;
    padding: 0 !important;
    }
    .crp_related_widget li, .crp_related a {
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    }
    .crp_related_widget li {
    margin: auto !important;
    width: 75%
    border: 1px solid #ddd;
    padding: 6px;
    }
    .crp_related_widget li:hover {
    background: #eee;
    border-color: #bbb;
    }
    .crp_related_widget a {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    }
    .crp_related_widget a:hover {
    text-decoration: none;
    }
    .crp_related_widget .crp_title {
    color: #fff !important;
    position: absolute;
    display: block;
    bottom: 0;
    padding: 3px;
    font-size: .9em;
    text-shadow: .1em .1em .2em #000;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    }
    .crp_related_widget li:hover .crp_title {
    background-color: rgba(0, 0, 0, 0.8);
    }
    .crp_related_widget li {
    vertical-align: bottom;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    list-style-type: none;
    }

    .crp_related_widget .crp_excerpt {
    display: none;
    }

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Ajay

    (@ajay)

    Hi,

    A couple of things can be done – the first thing would be to correctly set the image size to fit the width of your sidebar – this would probably be about 310px maximum

    Next you have width’s in the code above that limits it in 75% which you could take out or increase.

    Lastly, I found a piece of code in the custom.css that forces the widget a tag to be a max of 88%. This is below

    
.widget ul li a {
    width: 88%;

    You can override this with 

    
.crp_related_widget ul li a {
    width: 100%;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Widget CSS Guidance Needed’ is closed to new replies.