Change color of image frames
-
Well – one last thing today; the frames around images – and possibly videos? – are (bright) white. Not very suitable to Collections theme as I see it. Possible code for changing this color?
The blog I need help with is: (visible only to logged in users)
-
Add this and edit my obnoxious red demo color.
.default-wrapper img, .default-wrapper div.wp-caption { background-color: #cc0000; }Videos have a sort of film strip top and bottom edge with a dark frame from looking at the demo site, not the white background that is showing on images.
-
Thank you, again….
(I wish I had a head that took more things in consideration when asking for help, not to bother you repeatedly…..!)
Frames/borders are now changed, but I think it would be nicer if the width could be in less pixels + a subtle shadow.
Inspecting element – both in FF and IE doesn’t really make me much wiser.
I find it difficult to recognize what I am looking for – there are lines covering up stuff. It seems to me that one has to apply a direct order in to the css of the template- and I don’t have enough knowledge to do that. I have been trying out different things, but I haven’t had any result, really. -
Frames/borders are now changed, but I think it would be nicer if the width could be in less pixels + a subtle shadow.
Chiming in and adding to the code @thesacredpath gave. The following should reduce the border width, adjusted shadow as well. Replace the code above by this:
.default-wrapper img, .default-wrapper div.wp-caption { background-color: #932500; padding: 0.2rem; -webkit-box-shadow: 8px 8px 3px #867272; -moz-box-shadow: 8px 8px 3px #867272; box-shadow: 8px 8px 3px #867272; }All the values can be adjusted as per liking.
-
…..and how nice it is!
Thank you very much.
I understand it when I see the code, but coming up
with the right code….that’s where I fall short.
Thanks again. -
You’re welcome! :)
And it’s not a problem at all, we all initially started from somewhere! I’d recommend reading this guide on CSS basics, and this one on finding your theme’s CSS.
As you grow in confidence, you can try reading more advanced tutorials.
-
One last question, at least for a while.
I wonder why my template doesn’t seem to allow inserting an image
when using the Home template. If I do not use that template- but “standard” – the image will stick, but then the menu disappears.
I realize this will have to do with how the template is written.
There’s always some kind of workaround things I have learned during years of videoing….
I guess one way around it is to set up links back and forth, but I really don’t want to go there.
But maybe, just maybe…..a workaround could be telling the css to let an image display on the Home template? -
I don’t really know about Collection Theme’s templates, but it may be possible to display an image on your current home page via CSS.
If you upload an image to your media library and post its direct link here, we can try placing it somewhere on your home page. Either behind or below the text “Work Collections”.
-
Wow…..
Well, I made 2 editions of the png image, hoping it would sort of blend in with transparency on the home page.
The one with text (a title if you will) on it is the main image I was hoping to insert: https://workcollections.files.wordpress.com/2015/09/ressurser-e1443366350273.png
and the smaller one : https://workcollections.files.wordpress.com/2015/09/ressurser_small.png -
-
Try this:
@media screen and (min-width: 1200px) { .logo-wrapper { background: url('https://workcollections.files.wordpress.com/2015/09/ressurser-e1443366350273.png') no-repeat bottom; height: 700px; width: 600px; right: 30px; position: relative; } }Behaves a bit odd on mobile, so image to appear on desktop size screens.
-
-
Eventually it shows up! – BUT, not at a good position I’m afraid –
leaving the right side of the page black. I have put in position; left;
– but that doesn’t alter position.
Thank you for taking the time to try. -
-
Okay, let’s see. If you want it left positioned, give a try to this, remove the previous that I sent for image:
.container { background:url('https://workcollections.files.wordpress.com/2015/09/ressurser-e1443366350273.png') no-repeat top; background-position: -50px 100px; } @media screen and (min-width: 1200px) { .logo-wrapper { margin-right: -200px; height: 420px; } }Notice the code background-position: -50px 100px;.
Here, -50px is horizontal position and 100px is vertical. Adjust both of these values to position the image wherever you want.If desired, change transparency of the image in an editor and replace the link in background: url.
-
It’s getting there!
If one is on a laptop…the image gets cut in the bottom?
I’m working on a 26″ monitor. If I change size of “the page” in the monitor, then the image gets cut and “blog on…..” pops up.
I tried alter the wrapper height a bit – up to 500px, and I guess it helped a bit. Many now – also at my work – are down to Ipads (for some reason
I really don’t get).
Maybe I should simply try to downscale the image further? -
-
I apologize for my rather hasty thoughts, which are a bit dim at the moment….it’s very late :)
I assume the above happens because the image isn’t floating….
You have gone a long way for helping me out.
Thank you.
I guess this is the best to be done, – and initially it could not be done at all according to template css. -
No problem at all! :) It was quite late in my time zone as well, so I slept.
The image was being cut from the bottom most probably because of the media query & device width restriction I had put in. Give a try to this:
.home .container { background:url('https://workcollections.files.wordpress.com/2015/09/ressurser-e1443366350273.png') no-repeat top; background-position: -50px 100px; } .logo-wrapper { margin-right: -0px; height: 440px; }Text (‘work collections’) position can be adjusted via margin-right. Good luck!
-
ethis; you have been a true helper!
This is going to work very well. I checked my mobile – fine!
I changed the title to the Norwegian for Library. Title and menu float so adjusting the title may not seem necessary.
I’ll continue working with the site in happy spirits.
I’ll be back if something arises which I can’t solve myself.Thank you!!
- The topic ‘Change color of image frames’ is closed to new replies.
WordPress.com Forums 