Garage Thumbnails - Drive Thru Online - Support

fxlr8 · #1 (**permalink**) 04-17-2011, 02:03 AM

No matter what dimensions I set the thumbnails to in the garage they are always scaled to 100x75. How can I change this?

fxlr8 · #2 (**permalink**) 04-17-2011, 02:03 AM

Also this is for vB4

Nathan · #3 (**permalink**) 04-17-2011, 06:27 AM

Please be sure to rebuild the thumbnails after setting the size.

Mark · #4 (**permalink**) 04-17-2011, 08:02 AM

Also, for vB4, you're going to have to make modifications to the dto_garage.css. Unfortunately vB4 makes it much harder to change thumbnail sizes and not break the layout.

If you are set on changing the thumb sizes to something else look for references to 100 and 75 in the dto_garage.css (before making any edits be sure to save a copy of the original). Change these to what you desire. After these changes you'll need to view the results of the changes and then tweak the image surrounds, boxes, etc to make sure they work. We're not CSS experts so, unfortunately, any changes you make to the layout via css will be something you will have to experiment with.

Thanks

Mark

fxlr8 · #5 (**permalink**) 04-18-2011, 12:00 PM

Got it to look pretty good with a 200x150px thumbnail.

First I set the settings to 200x150 in the Garage Settings.

Then I did the following changes in dto_garage.css (I am no expert in coding so hopefully this will help anybody else trying to obtain a 200x150 thumbnail).

Code:

@charset "UTF-8";
.popupblockbody { 
    padding-left:0px;
    padding-right:0px;
}

.dtogaragepromo {
   display:block;
   margin-bottom: 2px;
   margin-top: 5px;
   padding:5px;
   border: 1px solid #cecece;
    font:   normal 12px Tahoma,Calibri,Verdana,Geneva,sans-serif;   
    font-weight: bold;
   -moz-border-radius: 0px;
   -webkit-border-radius: 0px
}


.dtogaragetitle {
            display:block;
            float:left;
            clear:right;
            width: 49%;
            margin-left: 10px;
            font:   normal 12px Tahoma,Calibri,Verdana,Geneva,sans-serif;
            font-weight: bold;
}

.dtopopupbody {
        width: 530px;
        height: 185px;
}

.popupbodybuttons {
    text-align: center;
    padding-top: 12px;
}

div.popupbodytext {
    margin: 5px;
    font-size: 11px;
    text-align: center;
}


.formcontrols .blockrow label {
    width: 175px;
    float:left;
    font-size:13px;
}

.dtolabeldisplay
{
    width: 175px;
    float: left;
    font-size: 13px;
    font-weight: bold;
    clear: left;
}

.formcontrols .popupblockrow {
    width: 525px;
    margin-top: 8px;
}
.formcontrols .popupblockrow label {
    width: 85px;
    float:left;
    font-size:13px;
}


div.blockrow {
    width: 500px;
}

.blockrow .dtoblockrowdisplay {
    width: 350px;
    margin-left: 175px;
}

form .rightcol {
    display:block;
    margin-left: 175px;
    max-width:496px;
    *margin-left:0;
    float: none;
}

.dtoitemtitle {
/*    font-size:11pt; */
    font-weight:bold;
    text-decoration:none;
}

#ocontainer div.dtothumbcontainer {
    width:210px;
    height:160px;
    overflow:visible;
    margin:5px auto;
    text-align:center;
    vertical-align: middle;
}

#dtophotocontainer div.dtothumbcontainer img.album_cover {
    margin: auto 0;
    vertical-align: middle;
    -moz-box-shadow: -2px 2px 2px #ddd;
    -webkit-box-shadow: -2px 2px 2px #ddd;    
}
#dtophotocontainer p {
    overflow:hidden;
}

#dtophotocontainer li {
    float:left;
    margin-left:36px;
    margin-top:20px;
    margin-bottom:0px;
    padding: 20px 20px 0px 20px;
    text-align:center;
    display:block;
    width: 210px;
    height: 200px;
    overflow:visible;
    border: 1px solid #e9e9e9; 
    -moz-box-shadow: -2px 2px 2px #c7cbcc;
    -webkit-box-shadow: -2px 2px 2px #c7cbcc;
}

#dtosccontainer li {
    float:left;
    margin-left:5px;
    padding: 5px 5px 5px;
    text-align:left;
    display:block;
    width: 200px;
    height: 190px;
    overflow: visible;
}

.dtoemptythumb {
    display: block;    
    width: 100px;
    height: 100px;
    margin: 5px auto;    
    text-align: center;
    -moz-box-shadow: -2px 2px 2px #aaa;
    -webkit-box-shadow: -2px 2px 2px #aaa;
    border: 1px solid silver;
    vertical-align: 90px;
}

.dtothumb {
    display:block;
    width:200px;
        height: 150px;
    margin: 5px auto;
    text-align:center;
    
    -moz-box-shadow: -2px 2px 2px #aaa;
    -webkit-box-shadow: -2px 2px 2px #aaa;
    border: 1px solid #9d9d9d;
}

div.dtothumbtext {
    text-align: center;
    vertical-align: middle;
    width: 98px;
    margin-top: 35px;
}

#dtophotocontainer li:hover {
    background:#FFF url(http://dev/vb40X/images/gradients/form-control-gradient-alpha.png) repeat-x scroll center bottom;
}

#dtophotocontainer li:last-child {
    margin-bottom:30px;
}

#dtophotocontainer li a img {
    margin: auto;
}

#dtophotocontainer li span {
    display:block;
    clear:left;
    margin-top:5px;
}
#dtophotocontainer li span.time {
    display:inline;
}
#dtophotocontainer .dtoitemtitle {
    font-weight:bold;
    text-decoration:none;
        padding-top: 5px;
}

#dtosccontainer .dtoitemcaption {
    text-decoration:none;
        text-align:center;
}

#dtophotocontainer .shade {
    font-size:11px;

}

#dtophotocontainer .shadered {
        color: #990000;
    font-size:9px;

}

.dtoreminfo {
    margin-left: 4px;
    color: gray;
    font-size:10px;
} 

.formcontrols .section {
    padding: 0;
    width: 500px;
}

.formcontrols .searchsection {
    padding: 0;
}

div.rightcolumn {
    margin-left: 1px;
}  

div.leftcolumn {
    width: 560px;
    float: left;
}   

.leftcolumn .dtoleftcolumndisplay {
    width: 475px;
    float: left;
}

#controls_above {
    margin-bottom:{vb:stylevar padding};
}

#controls_below {
    margin-top:{vb:stylevar padding};
}


#controls_above a.textcontrol,
#controls_below a.textcontrol {
    float:{vb:stylevar right};
    margin-{vb:stylevar left}:{vb:stylevar padding};
}

#pagination_top,
#pagination_bottom {
    float:{vb:stylevar left};
}

p.textentry {
        float: none;
    display: block;
    clear: none;
    overflow: hidden;
    position: relative;
}

Here is a demo--> Garages

Mark · #6 (**permalink**) 04-18-2011, 12:03 PM

Nicely done! The larger layout looks really nice with the design of your site.

Mark

Nathan · #7 (**permalink**) 04-18-2011, 01:12 PM

That looks great. Thanks for sharing the code as well.

StonePilot · #8 (**permalink**) 10-02-2012, 01:04 PM

I just installed this and it's not working for Garage Plus 2.2.0 running inside of vB 4.2.0.

I would revert back to the original dto_garage.css file, but it got lost on my desktop during cleanup (my bad!). How can I revert my dto_garage.css file to the version that was there when I installed it?

StonePilot · #9 (**permalink**) 10-02-2012, 01:19 PM

... nevermind, I found it. They moved it from the last time I had to revert to the original template. I won't hijack this thread anymore, going to start a new one.