Community Forums › Forums › Archived Forums › Design Tips and Tricks › Slider Customization
- This topic has 14 replies, 2 voices, and was last updated 10 years, 9 months ago by angieatc.
-
AuthorPosts
-
June 11, 2013 at 6:35 am #45227angieatcMember
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?
My design site, Hill Springs Designs
June 11, 2013 at 8:35 am #45244rfmeierMemberHello,
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;
/* 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. */ }
I hope this helps.
June 11, 2013 at 8:41 am #45246angieatcMemberThank you! I had forgotten I removed the width from it when I copied the code from another site I had designed.
Angie
My design site, Hill Springs Designs
June 11, 2013 at 8:44 am #45248rfmeierMemberAngie,
You are welcome.
As I think about it, you may want to setup a width / max-width combo for responsiveness like below;
/* 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. */ }
June 11, 2013 at 8:45 am #45249angieatcMemberNow you have lost me. Would I need to because I am using the responsive slider?
My design site, Hill Springs Designs
June 11, 2013 at 8:47 am #45251rfmeierMemberAngie,
Never mind. There is css already taking care of this when the screen is re-sized. Carry on. 🙂
June 11, 2013 at 1:12 pm #45333angieatcMemberJune 11, 2013 at 1:29 pm #45337rfmeierMemberJune 14, 2013 at 6:23 pm #46003angieatcMemberOk, 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
My design site, Hill Springs Designs
June 15, 2013 at 9:07 am #46090rfmeierMemberJune 15, 2013 at 9:52 am #46100angieatcMemberOh crap, it is the same site. I am sorry. Same link!
http://test2.strosgirldesigns.com/
I am an idiot!
My design site, Hill Springs Designs
June 15, 2013 at 4:29 pm #46177rfmeierMemberAngie,
Here is what I got so far;
/* 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; }
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.
June 15, 2013 at 4:35 pm #46183angieatcMemberOK 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!
My design site, Hill Springs Designs
June 16, 2013 at 7:24 am #46249angieatcMemberRyan,
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!
My design site, Hill Springs Designs
July 12, 2013 at 1:43 pm #50425angieatcMemberOk, 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
My design site, Hill Springs Designs
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.