Need help? Check out our Support site, then

Reducing height of the academica slider

  1. I have been experimenting with the slider. I find it very intriguing. I have several questions about what can and cannot be tweaked by CSS.

    1. Is it possible to reduce the height from 300 to 100. (I would prefer creating text banners in photoshop and then using them as "photos.")

    2. Is it possible to adjust the speed.


    The blog I need help with is

  2. 1. Add this:

    .featured-slider {
        max-height: 100px;

    2. No.

  3. Thanks @justpi, I got sidetracked. :)

    @parishconnections, with @justpi's change in your CSS, try creating and assigning some featured images that are 960px x 100px and see if those show up correctly. I was starting to test, but haven't gotten around to it. With 300px tall images, the above change will hide the bottom 2/3's of the image.

  4. i reduced the height to 65. It might just work. However, instead of text...i may design some collages of people and have them rotate through.

    Two tweaks:
    1. get rid of the orange line above and below.
    2. narrow the space between the banner and the top of the columns

  5. 1 & 2. Top declaration does away with the borders. Adjust bottom margin as desired for spacing.

    #slider-wrap {
        border: none;
        margin-bottom: 20px;
  6. Add this, and decrease the value for the margin:

    #slider-wrap {
    border: 0 none;
    margin-bottom: 20px;
  7. !

  8. @justpi, we be thinking alike! :)

  9. even better, lets keep the orange line on top and have white space between the orange line and slider the same as between the orange line and the social icons, then configure the space at the bottom of the slider to be the same between the orange line and the top of the columns. I hope that makes sense :)

  10. I'm sorry about my indecisiveness...the design phase does that to a person. You have to try different options.

  11. I think i found a solution. Do you see anything wrong with adding a negative number as below

    #slider-wrap {
    border: none;
    margin-bottom: -5px;

  12. It seems to work...except I think the banner make the top of the page look very I am not so sure what to do.

    Thanks guys for helping.

  13. SUCCESS!!!! I think. Here is what I did. Do you see any problems with me using there a better way to achieve the desired results?

    This way i can create several 20px banners so that they rotate: St. Augustine, St. John the Baptist, etc. Since the slider cannot be linked to pages, I will have to create a post which looks like a page that is connected to the left banner of each parish.

    .featured-slider {
    max-height: 20px;

    #slider-wrap {
    border: none;
    margin-top: -5px;
    margin-bottom: -1px;

  14. Yay! Negative margins can sometimes confuse some browsers, but I use them when needed, so I wouldn't worry about it.

  15. I noticed that under compatibility view for IE (when I click the little icon next to the refresh so that it turns blue, that the home page does not render very well. The search box is way to high and the social icons and slider disappear. Is this something to worry about. I doubt if it can easily be fixed.

  16. What version of IE? Some older versions rendered quite differently between compatibility mode and "regular" mode.

  17. not sure, but i guess its really nothing to worry about. It's okay with every version of IE i have looked at, except when I press that compatibility button which I don't really understand.

  18. I have successfully set out what I intended to do. Although it is impossible to link a slider image to a page, I was able to create a psuedopage (as a post) and using a "pseudopage" tag was able to place custom menus on the left sidebar. The post, therefore, was to blend in quite nicely with the other pages.

    Do you guys see any problems ahead?

    Thanks for all your suggestions.

  19. I don't see any problems for you. Your site is looking grand.

Topic Closed

This topic has been closed to new replies.

About this Topic