CSS help for an image on contact info for my site
-
“Hi there! I’d like to add some things to my footer if possible; I know it’s possible to add text for my company name, but I was hoping to also add this image in as well. Is this possible? If so, could someone help me create the code that says “Contact Me” and includes a picture I have of me
The blog I need help with is: (visible only to logged in users)
-
Hi there, this is possible although we can’t add linked text (like to a contact page. If you can upload your image to your Media Library and then post the URL of that image, I can see what I can do for you. Where exactly in the footer do you want it?
-
thank you for the response, I’m looking to put it anywhere in the footer so long as it gets in there to be compliant within the real estate industry
Here’s the image url: https://semperfindmyhome.files.wordpress.com/2016/12/equal-housing-and-realtor-logo-small.png
I’m also looking at putting the following on every page to be compliant with my broker: Cooper Premier Properites
Thanks so much for getting back with me
Alex
-
Sorry I read my orginial message, I needed the above done first, then was trying to add an image of me that says contact me in the header on top somewhere
-
Thanks for the clarification. Let’s add this as a first draft, just to get your thoughts on placement and such and then go from there. Things go awry at about 1000px in width when things start to overlap, so I’ll end up having to use some Media Queries to restyle things to keep it all clean with no collisions.
#site-info .container { position: relative; } #site-info .container:before { content: "Cooper Premier Properties"; color: #fff; padding-left: 15px; padding-bottom: 70px; background-image: url('https://semperfindmyhome.files.wordpress.com/2016/12/equal-housing-and-realtor-logo-small.png'); background-repeat: no-repeat; background-position: right bottom; text-align: right; position: absolute; right: 0 } -
Ok this looks great, so where exactly do you want me to cut and paste this code into? I.e. under what tab?
-
Sorry, go to Customize > CSS, delete all the informational text in that window, and paste it in there.
-
Ok it pasted in the bottom right corner and covers some of the contact tab that’s blue in color
-
-
-
the old code that was in there got rid of some writing that was on the left hand side. Is there anyway to put text there and a picture of me? I.e Call now in bold (with my phone number) and head shot of me?
-
Hi there, first off, add the following to your custom CSS which adjusts the image and text we put in on the right on smaller screens so things don’t overlap.
@media screen and (max-width: 991px) { #site-info .container:before { padding-top: 44px; padding-left: 0; margin-right: 20px; font-size: 80% } #site-info #copyright_text p { font-size: 80% } } @media screen and (max-width: 408px) { #site-info .container:before { padding-top: 70px; } }Adding additional stuff to the footer, such as another image and the phone number is going to be tricky and make things really crowded. Can you upload the image to your media library, or if you already have, give the URL of that image and I’ll take a look at things.
-
Hi,
Here’s the link to my image, https://semperfindmyhome.files.wordpress.com/2016/12/alex-popovic-realtor.jpg
I understand what youre saying, take a look and let me know, even if it just had my phone number under or above or by the pic that would be great
-
Copy out all of your custom CSS and save it in a plain text file and then replace it with this. I’ve worked on this for a good bit of time, and things simply start to go awry below 600px in width since there is just too much stuff in the footer. Make sure and use the phone preview at Customize CSS to see what I mean. I can stack everything, but then the footer becomes very long.
.site-footer { position:relative } #site-info .container:before { content:"Cooper Premier Properties"; color:#fff; padding-bottom:70px; background-image:url('https://semperfindmyhome.files.wordpress.com/2016/12/equal-housing-and-realtor-logo-small.png'); background-repeat:no-repeat; background-position:right bottom; text-align:right; position:absolute; right:20px; max-width: 250px; bottom: 10px; } button { padding:5px; background-color:#dcdcdc; border:1px solid #666; color:#000; text-decoration:none } aside.entry-meta ul { display:none } @media screen and (max-width: 991px) { #site-info .container:before { padding-top: 44px; padding-left: 0; font-size: 80%; } #site-info #copyright_text p { font-size: 80%; } } @media screen and (max-width: 600px) { #site-info .container:before { padding-top: 80px; max-width: 100%; width: 100%; text-align: center; margin-right: 0; background-position: center bottom; } #site-info #copyright_text p { margin-bottom: 60px; } } #site-info .xs-col-6 { margin-left: auto; margin-right: auto; float: none; text-align: center; width: 100%; } #site-info .container:after { background-image: url('https://semperfindmyhome.files.wordpress.com/2016/12/alex-popovic-realtor.jpg'); display: block; background-repeat: no-repeat; background-size: auto 100px; content: "Call Me at: xxx-xxx-xxxx"; color: #fff; height: 100px; background-position: left 30px; position: absolute; bottom:0; left: 20px; padding-bottom: 70px; }What about adding your image and “call me” to the footer widget area and we can restyle that so that it stands out and is more noticeable?
-
Ok I see what happens, everything looks great, the image on the home page is in the bottom left footer of the home page, any chance we can move that somewhere higher by say where the “check your VA benefits button is?” and push everything down. To free up room in the side bar on the right, we/I can remove the google map location, no one really needs to know where the office is located, thoughts/ideas?
From: “WordPress.com Support Forums” Reply-To: Date: Monday, December 19, 2016 at 10:28 PMTo: Alex Popovic Subject: [WordPress.com Forums] CSS help for an image on contact info for my site
.site-footer { position:relative } #site-info .container:before { content:"Cooper Premier Properties" color:#fff; padding-bottom:70px; background-image:url('https://semperfindmyhome.files.wordpress.com/2016/12/equal-housing-and-realtor-logo-small.png'); background-repeat:no-repeat; background-position:right bottom; text-align:right; position:absolute; right:20px; max-width: 250px; bottom: 10px; } button { padding:5px; background-color:#dcdcdc; border:1px solid #666; color:#000; text-decoration:none } aside.entry-meta ul { display:none } @media screen and (max-width: 991px) { #site-info .container:before { padding-top: 44px; padding-left: 0; font-size: 80%; } #site-info #copyright_text p { font-size: 80%; } } @media screen and (max-width: 600px) { #site-info .container:before { padding-top: 80px; max-width: 100%; width: 100%; text-align: center; margin-right: 0; background-position: center bottom; } #site-info #copyright_text p { margin-bottom: 60px; } } #site-info .xs-col-6 { margin-left: auto; margin-right: auto; float: none; text-align: center; width: 100%; } #site-info .container:after { background-image: url('https://semperfindmyhome.files.wordpress.com/2016/12/alex-popovic-realtor.jpg'); display: block; background-repeat: no-repeat; background-size: auto 100px; content: "Call Me at: xxx-xxx-xxxx" color: #fff; height: 100px; background-position: left 30px; position: absolute; bottom:0; left: 20px; padding-bottom: 70px; } -
You can easily add an image widget to your sidebar and put your picture in it and then add the “call me at…” there. I think that would be the better solution give how crowded the footer is with both there.
-
I can? Can you show me how to do that on the right sidebar with the code you provided or do I need to do something different?
-
That same picture I sent with Call me or contact me, would be great, I removed alot of the clutter that was there and would like to add it beneath the click here to qualify top button
-
This support page on the Image Widget should get you up and running. Let me know if you have any problems.
- The topic ‘CSS help for an image on contact info for my site’ is closed to new replies.
WordPress.com Forums 
