Community Forums › Forums › Archived Forums › Design Tips and Tricks › Changing background colour of the Genesis Responsive Slider
Tagged: background, css, slider
- This topic has 12 replies, 3 voices, and was last updated 11 years, 9 months ago by
David Chu.
-
AuthorPosts
-
April 23, 2013 at 5:15 am #37085
Hannah P
MemberHi!
I hope I'm asking this in the right place - thanks for any help. I am brand new to WordPress and Genesis etc., so many apologies if I miss a very basic point. I have just set up a new site with bluehost and installed Genesis and child theme Fabric8ted.
I am experimenting with the slider and working things out. I would like to be able to have a coloured background to the slider so that if a picture doesn't fill up the slider (maybe due to orientation etc.) that there is a still a theme colour rather than white on the slide to the side of the image. I would also like to make such images central if possible. If however this is some complicated request I'll leave it!
I have gone to: Plugins - Editor - Genesis Responsive Slider (select) - genesis-responsive-slider/style.css and then found #genesis-responsive-slider and edited the background-color property so that it now reads:
#genesis-responsive-slider {
background-color: #ded9c2;
border: 10px solid #eee;
margin: 0 auto;
padding: 10px;
position: relative;
}However, this has not changed the background colour of the slide, so I'm guessing that I've misunderstood what background is referring to in this instance. If it makes any difference it does say Editing genesis-responsive-slider/style.css (inactive) at the top of the page. If anyone can advise me on how to change the background colour of slides (and possibly image alignment) I would be very grateful.
My other question on the slider is in determining exactly what size images I should make my post featured images so that they are neither too big and make the site slow, or too small and look weird on the slider. For now I have simply copied the theme demo settings which are: maximum slider width 1140, maximum slider height 445. However I imagine that 1140x445 is the full size of the slider including the opaque section to the right with the first part of the post in, and therefore I'm looking at a height of 445 and a width about a third less than 1140. Is there any way to get this precise figure? In the slider settings I do have: Slider Excerpt Width (in percentage): 50, but the opaque section is definitely not as wide as 50%. I would like to work out the perfect size for the slider - although my understanding of the slider settings are that a taller image will simply have the bottom cut off, a wider one will have the right cut off, and a smaller image will appear in its entirity with white space around it.
Many thanks for time and help.
http://livingbeyondme.comApril 23, 2013 at 8:11 am #37124David Chu
ParticipantHi Hannah,
That's the most skillfully and thoughtfully worded question I've seen here, I think. 🙂One thing is pretty easy to set up. Your code is actually great, it just got overridden by another similar line that had #content in front of it. I have a snippet that "gets inside" all that.
.slide-image { background-color: #DED9C2; }
I even zeroed in on the centering thing. I didn't test it, but I think this will work:
.slide-image img { margin: 0 auto; }
I tend to advise having all slider photos being the same size and orientation, but obviously in today's DIY world, without a pro photographer always at the ready, that's not always going to happen. Editing photos and saving them with compression will certainly help.
The site's looking great!
Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
April 23, 2013 at 8:22 am #37133Brad Dalton
ParticipantHannah
No need to edit the plugin files which will be lost when you update the plugin.
Add the modified code to your child themes style.css file:
#genesis-responsive-slider img { background-color: black; border: 10px solid #eee; margin: 0 auto; padding: 10px; position: relative; }
You may want to start another thread for your second question as that will give you more exposure. Its a big question.
April 23, 2013 at 8:43 am #37144Hannah P
MemberHi Dave & Brad
Thanks so much for taking the time to answer, I'll have a go tomorrow at sorting it out.
Dave - I think you're my new personal hero for liking the question wording! I dislike it when people ask me questions but don't give any of the relevant info, so tried to give everything - but in all honesty have only just got the tiniest clue what I'm doing. Thx
Brad does that mean that any changes or new code I put into the child-theme stylesheet will override anything in the plugin css? So when I try Dave's coding on alignment that I can just put that also in child-theme stylesheet (found at Appearance - Editor)?
I'll copy the other question into a new thread.
Thanks.
April 23, 2013 at 9:48 am #37157Brad Dalton
ParticipantIts better to add custom coding for themes and plugins in your child themes files so they aren't lost when the parent theme or plugin is updated.
Yes, the plugin classes you use the the child themes style.css will normally override the plugins CSS.
Otherwise you can use:
Example:
selector { property: value !important; }
Yes. place the code in the child themes style.css file but its better to use a text editor like Notepad++ and add the code directly to the file rather than use the WordPredd editor as itsometimes changes the Apostrophes (Qoutes) especially when copying and pasting PHP code.
April 23, 2013 at 9:55 am #37160David Chu
Participant🙂 Thanks.
Brad's got a great point, which I didn't address. Generally you are safest leaving a plugin's CSS completely alone, and just making changes, like the ones I suggested, in your theme's style.css.
So a quick(-ish) answer would be to restore the original code in plugin's CSS and only make CSS modifications in style.css. Yes, the changes in style.css will override a plugin's CSS, generally speaking. In fact, I think it's safe to say that whenever you get CSS suggestions here, they will refer to style.css unless specified otherwise.
And yes, some issues you mentioned are fairly large. 🙂
Best,
Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
April 23, 2013 at 10:23 am #37171Brad Dalton
ParticipantGenerally, plugins hook into the wp_head hook and your child themes style sheet loads after this so thats why your plugins CSS mods placed in your child themes css are displayed rather than the plugins CSS.
April 24, 2013 at 3:58 pm #37471Hannah P
MemberHi
Am not sure if this post will be picked up now, but wanted to feed back - especially in case anyone else googles and wants to know if it worked.
Thx - I appreciate understanding how the CSS loads etc.
By adding the following code into the child theme css (into the Responsive Slider section already there) I managed to get it working:
1. The following changed the background colour to one of my choice
.slide-image {
background-color: #ded9c2; }
2. The following centralised the image. I had to add padding to allow for the excerpt section.
.slide-image img {
margin: 0 auto;
padding-right:352px; }
I now just need to figure out where the white line above is coming from. And I suddenly realised that when I add in my side widgets that will probably throw all my measurements - but at least I know where I'm looking for things now.
If anyone does pick this up - is there any way to upload a single .png to my child theme's image folder (in order to replace the default one on the slider)? Or do I have to save the .png in the zip file of the child theme and re-upload (and I'm guessing lose my edits at this point)? Or, can I upload an image to the normal media library and reference that in the CSS? The current reference is to: url(images/slider-excerpt.png)
Thanks so much
Hannah
April 24, 2013 at 9:45 pm #37517David Chu
ParticipantHi,
I think I see what you're referring to... the white line is coming from here. The box-shadow line. You could comment that line out or delete it. I'll admit I sort of like it.#inner { background-color: #FFFFFF; box-shadow: 0 0 0 1px #FFFFFF; clear: both; margin: 0 auto; overflow: hidden; }
To pick these CSS things up quickly, you'll want to get to know Firebug, an add-on to Firefox, if you use that browser. Chrome has a built-in code inspector that works quite well, too.
You could indeed upload a file to replace the child theme's one. That brings up a point about updating. Since you're using a commercial Genesis theme, if she offers an update, it could over-write your changes and possibly your new PNG. So that's a good reason to keep a copy of your changes, by downloading the style.css and also keeping a handy copy of your new image, for instance.
I don't have to worry about that because almost all my Genesis child themes are custom... since I build them, I know where all the bones are buried, and I'm not going to do an update that blasts my code. 🙂 Luxury!!!! as a Monty Python guy once said.
Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
April 25, 2013 at 3:24 am #37564Hannah P
MemberThx Dave.
I'll look at that box-shadow line - that really helps. At the moment nothing's finalised (still need to sort out the navigation etc!), just being a bit of a control freak with random white lines. I'll get Firebug too.
I had thought updates might overwrite everything. Yesterday I reset everything, and then wrote out details of any change I made just in case. I have backups going automatically to DropBox so that should help.
However I still haven't figured out how to download/export just the css file to make changes and save. Brad mentioned doing the editting in external software, but I'm guessing there's a better way to do that than copy & paste!!! (Would Firebug?) Is this something behind the scenes that would be complicated to explain? Perhaps somewhere else in BlueHost? The only export I can find currently is under tools and that is for the .xml of posts/pages. Similarly with the uploading an image to replace a default one in the CT. I can find uploading of posts, of full child-themes in zip and of individual images in the media library - but not to the child theme image folder. How would I go about doing this?
Sorry for so many issues!
Do I manually mark this as resolved?
Thanks
ps - Luxury indeed! Hey, I'm from Yorkshire so I know all about luxury!
April 25, 2013 at 8:41 am #37657David Chu
ParticipantHannah,
Another way to back things up is FTP, so you could investigate that. Bluehost is good, they have a pretty decent admin system, and they have file management in there, which can take the place of FTP if needed.Your dropbox method sounds great, especially if it backs up both files and database. I know there is some plugin that does all that. The XML export is good for database data, not files.
Glad to help - I wrote more than usual because you're pleasant and have made the effort to include details needed. That's certainly not true of all people who post on this forum. 😉
Ah, Yorkshire, I must have sensed that. 🙂 I'm chuffed that you got my Yorkshire Gentlemen reference, one of the funniest bits ever!
Cheers, Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
April 25, 2013 at 10:06 am #37668Hannah P
MemberThx Dave- have discovered the file management system you mentioned and got my new images uploaded - perfect.
ps - the yorkshireman is great - but nothing can beat the argument sketch! well yes it can. but no it can't. yes....
April 25, 2013 at 10:44 am #37672David Chu
ParticipantThis reply has been marked as private. -
AuthorPosts
- The topic ‘Changing background colour of the Genesis Responsive Slider’ is closed to new replies.