1. 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

This guide allows for full width previews within your style chooser

  1. Shelley

    Shelley Well-Known Member

    Shelley submitted a new resource:

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

    Read more about this resource...
     
    ShadyX, Chris D and Lisa like this.
  2. Edrondol

    Edrondol Well-Known Member

    What size/dimensions do the images need to be? Or does it matter?

    I love this, by the way!
     
  3. Shelley

    Shelley Well-Known Member


    Dimensions I used were 618px by 100px.
     
  4. Sylar

    Sylar Well-Known Member

    Gorgeous. Thanks for posting this :)
     
  5. DRE

    DRE Well-Known Member

    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.
     
  6. Rambro

    Rambro Well-Known Member

    Says site has been moved to a new server...

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

    Shelley Well-Known Member

    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.
     
  8. oman

    oman Well-Known Member

    Took me a while to work out what image size I wanted, but got there in the end. Nice job Shelley and thanks. :)

    stylechooserfinal.png
     
    Sylar and Shelley like this.
  9. Shelley

    Shelley Well-Known Member

    Looking great oman nicely done. :)
     
    oman likes this.
  10. DRE

    DRE Well-Known Member

    My style chooser has been broken ever since I installed Responsive, so I'm going to use this resource for the style chooser.
     
  11. DRE

    DRE Well-Known Member

    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 */
     
  12. elvamo

    elvamo Member

    Go to EXTRA.css Right?

    It leaves me to register on your forum?
     
  13. Shelley

    Shelley Well-Known Member

    Yes.
     

Share This Page