CSS homepage help with slider

Community Forums Forums Design Tips and Tricks CSS homepage help with slider

This topic is: resolved

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  bwboykin 1 year, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #12747

    theand
    Participant
    Post count: 8

    Hi any CSS Superheros out there willing to help a damsel in distress?
    I have a couple of questions. Please see the site I’ve listed in regards to these questions. I am using Google Chrome to build the site.
    >>> http://designdr.com.au/christies/
    A) The featured slider area: There is a white bar appearing above the 3 images I have uploaded to that area. How do I get rid of this white bar?
    B) Just to the top left of the feature slider area is a small black circle. How did this appear there and how do I remove it?
    C) In the ‘Latest News’ section in the bottom right of the homepage: how do I add some padding underneath each of the [Read More...] lines so there is a bit of separation between the end of each post and the title of the next post?
    Thanks very much,
    Andrew

    #12795

    theand
    Participant
    Post count: 8

    I worked out that for problem A) and problem B) that when I set the responsive slider to ‘Fade’ transition the problems occur and when I set it to ‘Slide’ transition the problems disappear!

    I need it to be on ‘Fade’ though.

    #12799

    theand
    Participant
    Post count: 8

    Anyone?

    #12800

    theand
    Participant
    Post count: 8

    For my question C) I found in the CSS file this code:

    .home h2 {
    margin: 0 0 5px;
    }

    Then I can add spacing by adding padding like this:

    .home h2 {
    margin: 0 0 5px;
    padding-top: 5xp;
    }

    Except then the 1st post moves down out of alignment also. How do I add padding to just the 2nd and 3rd posts on the homepage and not the first?

    #13384

    theand
    Participant
    Post count: 8

    Found help from elsewhere on the web. Incase any other people are interested here is the solutions:

     

     

    To fix A & B, open your style.css file goto line 137 and look for

    Code:
    ul li {
    list-style-type: circle;
    /*list-style-image: url(‘sqpurple.gif’);*/
    }

    and change to

    Code:
    ul li {
    list-style-type: none;
    /*list-style-image: url(‘sqpurple.gif’);*/
    }

    To fix C, same file (style.css) goto line 1333 and look for

    Code:
    .featuredpage .page,
    .featuredpost .post {
    overflow: hidden;
    margin: 0;
    padding: 0;
    }

    and change to

    Code:
    .featuredpage .page,
    .featuredpost .post {
    overflow: hidden;
    margin: 0;
    padding: 0;
    margin-bottom:20px;
    }

    you can change the 20px to whatever you decide.

    #13390

    bwboykin
    Participant
    Post count: 11

    Glad you figured it out. I was just about to log in and post where in style.css that can be found.

    A great tool if you’re a Firefox user is Firebug. It is very helpful in drilling down what different elements are named and how they are styled. If you’re a Chrome user they have something similar as well. Either can save you much, much time.

    Cheers!

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

The topic ‘CSS homepage help with slider’ is closed to new replies.