• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
Style Chooser Enhancement (Full width)

Style Chooser Enhancement (Full width

Shelley

Well-known member
#1
Shelley submitted a new resource:

Style Chooser Enhancement (Full width (version v1) - This guide allows for full width previews within your style chooser


View attachment 40885

Summary: The following enhancement allows for your previews to span the full width of the style chooser. Use the following as a reference guide as your style IDs and image paths/images will differ.

Live Preview: You can see a live preview at bbsmiley.com by clicking the style chooser link.

Install: Upload your custom images to the folder of choice (in this...
Read more about this resource...
 

DRE

Well-known member
#5
Would it be possible to just make the images smaller but make the style chosen grow bigger when hovering over it and for the rest of them ones not selected to fade out instead? I think that way would be more intuitive. Like Nintendo.
 

Rambro

Well-known member
#6
Says site has been moved to a new server...

How would one go about making up those images showing the style examples?
 

Shelley

Well-known member
#7
Says site has been moved to a new server...

How would one go about making up those images showing the style examples?
You will have to use a graphics editor. Screenshot style-x and crop to a pre-defined size (sizes are within the css) for reference.
 

DRE

Well-known member
#10
My style chooser has been broken ever since I installed Responsive, so I'm going to use this resource for the style chooser.
 

DRE

Well-known member
#11
Doesn't work for me even when responsive is disabled. :(

Removing for now.


Screen Shot 2013-05-12 at 12.10.22 PM.png

Code:
/* Style Chooser Full width image Enhancement */
 
.chooserColumns .title, .chooserColumns .description {
    display: none !important;
    margin-left: 0 !important;
    text-align: center; }
 
.styleChooser  .style91{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/8thosTheme.jpg") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
 
.styleChooser  .style107{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/EbonyTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important;
}
 
.styleChooser  .style130{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/FacebookTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
 
.styleChooser  .style143{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/MirthTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }

.styleChooser  .style136{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/XenforoTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
.styleChooser  .style129{
    height: 100px !important;
    width: 618px !important;
    background-image: url("styles/8thos/MobileTheme.jpg"") !important;
    background-repeat: no-repeat;
    border: 1px solid white !important;
    margin-left: 0!important;
    background-color: none !important; }
 
.styleChooser li:hover .icon{
    opacity: 0.35;
    -moz-transition: all 0.7s ease-in-out 0s;
    -o-transition: all 0.7s ease-in-out 0s;
    -webkit-transition: all 0.7s ease-in-out 0s;
    margin: 17px 35px 0 0;
    transform: scale(0.8, 0.8); }
 
.chooserColumns li a:hover {background-color: transparent !important;}
 
.chooserColumns li  {width: 100% !important;}
 
/* Style Chooser Full width image Enhancement */