Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #203754

    Hi
    Hopefully just a quicky. My site (http://visionimpossiblestudios.com/ianBaxter/) is nearly ready to start filing with content. I want to tidy a couple of things up a bit first though.

    1) The slideshow on the main page was too big. I entered the following that I found on this forum into my ‘quick css’:
    #top .slideshow.fade_slider {
    width: 512px !important
    }
    and that works great, except the next/previous buttons got left behind after the resize. Is there a way to move these over a bit so they are closer to the slideshow?

    2) Is there a way to reduce the size of the borders? Borders may be the incorrect term (I am new to wordpress!), but I mean the whitespace above and beow the horizontal lines i.e. above and below the navigation bar and at the very bottom of the screen etc.

    Thanks very much
    Ian

    #203757

    Hey ianbaxter1!

    Please add following code to Quick CSS in Eunoia theme options under Styling tab and adjust as needed
    1)

    div .arrow_controls { right: 235px; }

    2)

    #socket { margin-bottom: 20px; }
    #header .container { min-height: 140px; }

    Cheers!
    Yigit

    #203762

    Wow, that was quick! Thanks!
    1) perfect thank you!
    However, I also just noticed a side effect of what I did to resize the slideshow on the homepage. No idea why but now the portfolio (on a different page) images are cropped. This is all the code I have added thus far:
    /*disable footer*/
    #footer { display: none!important; }
    #socket .container { display: none!important; }

    /*set portfolio video to not have a black border*/
    #top.single-portfolio .slideshow_container ul{ height: 281px !important; }
    #top.single-portfolio .slideshow_container ul{ width: 500px !important; }

    /* remove tweet and share button from protfolio items */
    .single-portfolio .post-meta-infos {
    display: none;
    }

    /*remove mouseover*/
    #top #wrap_all .filtered-image {
    display: none;
    }
    .csstransforms .image_overlay_effect {
    background-color: rgba(0, 0, 0, 0.3);
    display: none!important;
    }

    /*
    .portfolio-title .main-title {
    text-align: center;
    }8=*/

    /*index page slideshow size*/
    #top .slideshow.fade_slider {
    width: 500px !important
    }

    /*index page slideshow prev/next image position*/
    div .arrow_controls { right: 235px; }

    #socket { margin-bottom: 1px; }
    #header .container { min-height: 1px; }

    I am guessing I need to specify the page I want to amend the slideshow on like:
    /*index page slideshow size*/
    page-id-index .slideshow.fade_slider {
    width: 500px !important
    }
    or something similar as this doens’t work!

    2) no change sadly. I changed the values to 1px so it would be obvious but still nothing. Any ideas?

    Thanks again.
    Ian

    #203781

    Hi!

    1)Please add following code to Quick CSS as well. It should fix the issue on mobile

    @media only screen and (max-width: 480px) {
    #top .slideshow li img { width: 64%; }
    .arrow_controls { bottom: 290px; right: 0px; }
    .thumbnails_container { top: -30px; }}

    2) Please flush browser cache and refresh your page a few times. On your homepage you do not have enough content to fill the page in case you would like to decrease the white space on footer. Code for header seems to be working on my end. You can additionally add following code to Quick CSS to decrease header height even more

    #header #menu_container { padding-bottom: 0px; }
    div .logo { min-height: 75px; }

    Cheers!
    Yigit

    #203816

    Hi. Thanks for the reply again!
    1) The images in the portfolio are still croped since I added:
    #top .slideshow.fade_slider {
    width: 512px !important
    }
    …to make the slideshow on the homepage smaller. Any ideas? This happens on my desktop using firefox, chrome, ie, and on my ipad.

    2)I have added the code and some extra content, but the whitespace has stayed exactly the same. I have cleared caches, tried on multiple devices and browsers, reloaded etc. All seem to behave exactly the same. I am talking about the white space above and below each of the horizontal lines. Any ideas?
    My code is now as follows:

    /*disable footer*/
    #footer { display: none!important; }
    #socket .container { display: none!important; }
    
    /*set portfolio video to not have a black border*/
    #top.single-portfolio .slideshow_container ul{ height: 281px !important; }
    #top.single-portfolio .slideshow_container ul{ width: 500px !important; }
    
    /* remove tweet and share button from protfolio items */
    .single-portfolio .post-meta-infos {
       display: none;
    }
    
    /*remove mouseover*/
    #top #wrap_all .filtered-image {
    display: none;
    }
    .csstransforms .image_overlay_effect {
    background-color: rgba(0, 0, 0, 0.3);
    display: none!important;
    }
    
    /*
    .portfolio-title .main-title {
    text-align: center;
    }8=*/
    
    /*index page slideshow size*/
    #top .slideshow.fade_slider {
    width: 500px !important
    }
    
    /*index page slideshow prev/next image position*/
    div .arrow_controls {right: 235px; }
    
    @media only screen and (max-width: 480px) {
    #top .slideshow li img { width: 64%; }
    .arrow_controls { bottom: 290px;right: 0px; }
    .thumbnails_container { top: -30px; }}
    
    #socket { margin-bottom: 1px; }
    #header .container { min-height: 1px; }
    
    #header #menu_container { padding-bottom: 0px; }
    div .logo { min-height: 1px; }
    • This reply was modified 6 months, 3 weeks ago by  ianbaxter1.
    • This reply was modified 6 months, 3 weeks ago by  ianbaxter1.
    #203910

    Hey!

    1) Have you added the code only for the slider on your homepage? If so, we can edit the code to affect only that certain element so there will not be any issues on other elements
    2)

    .thumbnails_container { padding: 10px 50px; }
    .dynamic_element .post-entry-dynamic, .dynamic_element.post-entry-dynamic, .template-blog.dynamic_element, .dynamic_element.partner_list { margin: 10px 0; }
    .logo { padding: 10px 0; }

    Best regards,
    Yigit

    • This reply was modified 6 months, 3 weeks ago by  Yigit.
    #203927

    Hi again!
    1) No, I haven’t. That’s what I thought I needed to do, just not sure how to access it. This is the section that made the slideshow on the homepage work but broke the portfolio:

    #top .slideshow.fade_slider {
    width: 512px !important
    }

    I tried to apply it to just the homepage by doing:

    /*index page slideshow size*/
    page-id-index .slideshow.fade_slider {
    width: 500px !important
    }

    but it was a complete guess and didn’t work! How do I access just the slider on the homepage?

    2) So close!
    This worked perfectly:
    .thumbnails_container { padding: 10px 50px; }

    As did this:
    .dynamic_element .post-entry-dynamic, .dynamic_element.post-entry-dynamic, .template-blog.dynamic_element, .dynamic_element.partner_list { margin: 10px 0; }
    But the logo border didnt:
    .logo { padding: 10px 0; }

    So close now. Any ideas for this last little bit?
    Thanks for all the support!
    Ian

    • This reply was modified 6 months, 3 weeks ago by  ianbaxter1.
    • This reply was modified 6 months, 3 weeks ago by  ianbaxter1.
    • This reply was modified 6 months, 3 weeks ago by  ianbaxter1.
    • This reply was modified 6 months, 3 weeks ago by  ianbaxter1.
    #203984

    Hi!

    1) Please try following codes instead

    .home .slideshow.fade_slider {
    width: 512px !important
    }

    2)

    div .logo {
    padding: 10px 0; }

    Best regards,
    Yigit

    #204027

    Hi
    1) Perfect. Thank you! Exactly what I was after.
    2) That definately moved the logo up, great. There is still a huge border below though. I wonder if it is a navigation menu border or something?

    Thanks again,
    Ian

    #204071

    Hey!

    Following codes i previously posted are not being applied. Please make sure that they are present in Quick CSS

    #header .container 
    { min-height: 114px; } 
    #header #menu_container 
    { padding-bottom: 0px; }

    Best regards,
    Yigit

    #204092

    Yeah, was just looking at those, seeing if I could get them to work a little better. They are in now, but the same issue. From testing a few values in the extra code, it seems as though if I move the logo down slightly, the navigation will go down as well and there is still the large gap below? I could always keep this if there was a way to lower the logo so it was centered within the header? Changing the div .logo {
    padding: value moves everything else in the header down as well, including the bottom horizontal line.

    Thanks very much,
    Ian

    #204093

    Hi!

    Would you mind creating a temporary admin login and posting it here privately so i can take a look?

    Regards,
    Yigit

    #204096
    This reply has been marked as private.
    #204098

    Hi!

    Changes are done. Please review your website. You can find custom CSS code i added under /*border at above logo*/ in Quick CSS

    Cheers!
    Yigit

    #204102

    That’s brilliant. Thanks very much for that. Amazing support!
    Ian

    #204113

    Hi!

    You are welcome! Glad we could help. Happy new year

    Best regards,
    Yigit

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Slideshow and borders’ is closed to new replies.