Slider Customization

Community Forums Forums Design Tips and Tricks Slider Customization

This topic is: resolved

This topic contains 14 replies, has 2 voices, and was last updated by  angieatc 1 year, 3 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #45227

    angieatc
    Participant
    Post count: 80

    Sorry if this is a double post. My original post does not appear.
    I need some help with the slider on my site.

    I have the slider h2 coded like this:

    .slide-excerpt-border h2 a,
    .slide-excerpt-border h2 a:visited {
    color: #fff !important;
    font-family: ‘Copse’, serif !important;
    font-size: 30px;
    font-style: italic;
    line-height: 1;
    margin: 0;
    text-align: center !important;
    }

    It will not center at all but will take on all other colors, size, etc. So then I use this for the hover:

    .slide-excerpt-border h2 a:hover {
    color: #efc936 !important;
    }

    and nothing! Any help please? What is up with having to use !important on almost everything?

    http://test2.strosgirldesigns.com/
    #45244

    rfmeier
    Participant
    Post count: 597

    Hello,

    It technically was centering, but the .slide-excerpt-border box was only wide enough to accommodate the title width. I did the following and was able to center the text;

    [css]
    /* line ~42 */
    html > body .slide-excerpt-border {
    background: none;
    border: 1px solid #ddd;
    display: inline;
    float: left;
    margin: 10px;
    padding: 14px;
    position: relative;
    z-index: 8;
    width: 648px; /* set a static width */
    text-align: center; /* set alignment to center. Child elements should inherit. */
    }[/css]

    I hope this helps.


    #45246

    angieatc
    Participant
    Post count: 80

    Thank you! I had forgotten I removed the width from it when I copied the code from another site I had designed.

    Angie

    #45248

    rfmeier
    Participant
    Post count: 597

    Angie,

    You are welcome.

    As I think about it, you may want to setup a width / max-width combo for responsiveness like below;

    [css]
    /* line ~42 */
    html > body .slide-excerpt-border {
    background: none;
    border: 1px solid #ddd;
    display: inline;
    float: left;
    margin: 10px;
    padding: 14px;
    position: relative;
    z-index: 8;
    width: 100%; /* expand it */
    max-width: 648px; /* set a max width */
    text-align: center; /* set alignment to center. Child elements should inherit. */
    }[/css]


    #45249

    angieatc
    Participant
    Post count: 80

    Now you have lost me. Would I need to because I am using the responsive slider?

    #45251

    rfmeier
    Participant
    Post count: 597

    Angie,

    Never mind. There is css already taking care of this when the screen is re-sized. Carry on. :)


    #45333

    angieatc
    Participant
    Post count: 80

    Thanks for your help!

    #45337

    rfmeier
    Participant
    Post count: 597

    You are welcome. I am glad I could help.


    #46003

    angieatc
    Participant
    Post count: 80

    Ok, I need some help with this again please! I had to change themes to Serenity for the client and I have changed the widths in the Genesis Slider settings and in the CSS and the images are weird and my post title in the slider is jacked up as well.

    html > body .slide-excerpt-border {
    background: none;
    border: 0 solid #ddd !important;
    display: inline;
    float: left;
    margin: 10px;
    padding: 14px;
    position: relative;
    z-index: 8;
    width: 700px; /* set a static width */
    text-align: center;
    }
    Post Title

    .slide-excerpt-border h2 a,
    .slide-excerpt-border h2 a:visited {
    color: #fff !important;
    font-family: ‘Copse’, serif !important;
    font-size: 30px;
    line-height: 1;
    margin: 0;
    text-align: center !important;
    }

    Just curious if you could take a look at it as you were the only one to figure out the other issue I was having.

    Thanks

    #46090

    rfmeier
    Participant
    Post count: 597

    Angie,

    Is a site demo available to look at?


    #46100

    angieatc
    Participant
    Post count: 80

    Oh crap, it is the same site. I am sorry. Same link!

    http://test2.strosgirldesigns.com/

    I am an idiot!

     

    #46177

    rfmeier
    Participant
    Post count: 597

    Angie,

    Here is what I got so far;

    [css]
    /* line ~738 */
    #featured-bottom ul, #featured-top ul {
    list-style-type: square;
    margin: 0; /* changed to 0 */
    padding: 0; /* changed to 0 */
    }

    /* line ~744 */
    #featured-bottom ul li, #featured-top ul li {
    list-style-type: square;
    margin: 0; /* changed to 0 */
    padding: 0;
    }[/css]

    The image alignment still isn’t quite right and it is hard to figure out with the slider constantly moving. I will take a look at it again in a bit.


    #46183

    angieatc
    Participant
    Post count: 80

    OK so far so good! I will look at it again tonight. The sizes are all correct (width wise) but I have no idea where the grey border is coming from.

    Thanks!

    #46249

    angieatc
    Participant
    Post count: 80

    Ryan,

    They are switching back to the Adorable theme so I think I am good because the customization from before is still there. Thanks again for all of your help!

     

    #50425

    angieatc
    Participant
    Post count: 80

    Ok, I am back, I thought I had this down but when I went to switch back over to the Adorable theme the customization for the slider was gone. I am having an issue with the next slider post title going into the current slider. Here is the site: http://69.195.124.58/~homegrr7/ would there be anyway you could see what is going on? I am going to slow it down just in case you can look at it.

    Thanks

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

You must be logged in to reply to this topic.