Community Forums › Forums › Archived Forums › General Discussion › Center Genesis Responsive Slider
- This topic has 6 replies, 2 voices, and was last updated 9 years, 7 months ago by AVTsteve.
-
AuthorPosts
-
September 12, 2014 at 4:51 pm #124171AVTsteveParticipant
This theme, Streamline Pro did not originally have a widget area below the menu for a slider. I registered the widget area and added the Genesis responsive slider. I was able to modify the code in the slider plugin style sheet to get it to the correct width, but cannot figure out how to get the image to center. What am i doing wrong? thanks!
http://198.57.236.71/~lwmhcsc/
http://198.57.236.71/~lwmhcsc/September 13, 2014 at 8:38 am #124227jbergenMemberHi,
Since your images are 920px wide, you just need to set #genesis-responsive-slider to
max-width: 920px;
. Here's what the CSS will look like (style.css, line 4):#genesis-responsive-slider { background-color: #FFF; border: 10px solid #EEE; margin: 0px auto; padding: 10px; position: relative; max-width: 920px; }
Jamie
Jamie @ Ladebug Studios
September 15, 2014 at 6:47 am #124491September 15, 2014 at 8:13 am #124497jbergenMemberHi!
You modified the CSS rule correctly, but there is a curly bracket at the beginning of your style.css file that is causing it to be ignored.Current style.css:
/* Genesis Slider ------------------------------------------------------------ */ } #genesis-responsive-slider { background-color: #FFF; border: 10px solid #EEE; margin: 0px auto; padding: 10px; position: relative; max-width: 920px; }
Remove the curly bracket so it looks like this, and the image will be centered:
/* Genesis Slider ------------------------------------------------------------ */ #genesis-responsive-slider { background-color: #FFF; border: 10px solid #EEE; margin: 0px auto; padding: 10px; position: relative; max-width: 920px; }
Jamie
Jamie @ Ladebug Studios
September 15, 2014 at 8:44 am #124499AVTsteveParticipantThank you, that looks much better. If i want to keep the slider width the same as the area above and below it, (around 1140px), is there a way to have it that wide, and still center the 920px image within it?
Also - I've never made changes to a style.css sheet for a plugin before. When the plugin gets updated, will that overwrite these changes? Thanks again!
September 15, 2014 at 11:33 am #124526jbergenMemberI'm not sure how easy that would be to make the slider 1140px wide and get the images centered. You can make it a little wider by setting max-width of #genesis-responsive-slider to 960px. Maybe if you loaded wider images, you could get it to display wider.
Great question about making changes to style.css. Yes, if you update your plugin, the changes you make to its stylesheet will be lost. (Sorry if I implied earlier that that was a good idea - I certainly didn't mean to!) One option is to add your changes to the theme's style.css file and use !important to override the plugin styling. For example, you could add this code to your theme's style.css:
#genesis-responsive-slider { max-width: 960px !important; }
However, if you ever change or update your theme, you'll lose anything you add to its style.css. So the safest option is to make your own custom CSS file (see this video for a tutorial).
I hope that helps,
Jamie
Jamie @ Ladebug Studios
September 15, 2014 at 1:18 pm #124540AVTsteveParticipantThanks, much appreciated!
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.