CSS help on Stay theme

andilena · Member · Apr 8, 2016 at 8:12 am
Copy link

Add topic to favorites
Hello,

I have been trying to do the following with CSS on the stay theme but I’m struggling

– Add a linkedin icon to the social links in the footer
– On the free quote page, create a contact form on 2 columns

Can anyone can help?

Thanks

The blog I need help with is: (visible only to logged in users)
carladoria · Member · Apr 8, 2016 at 3:24 pm
Copy link
Hi there,
I’m not able to see your blog since it’s marked as private. But you should be able to add the Linkedin icon without CSS. The option is available when creating a social menu. You could also use the social media icons widget in your footer if you don’t have a social menu. You can find more information in the following link: https://en.support.wordpress.com/widgets/social-media-icons-widget/

Also to create contact forms, you could use the Contact form shortcodes which have several options for the design of your contact form. You can find more information here: https://en.support.wordpress.com/contact-form/
thesacredpath · Member · Apr 9, 2016 at 12:09 am
Copy link
Hi @andilena, Stay does not natively support Linkedin. We could add the URL for your linkedin profile in one of the others and then we could see if we could change the icon, but this comes with an issue. Although we can do it, if you hover over the icon, what will show is the name of the service you put the link in. In other words, if you put in in the Vimeo field, and hovered over the new Linkedin icon, it would say Vimeo.

Can you explain a bit more on what you are wanting on the free quote page? Are you wanting to add something beside the contact form, or are you wanting to move the Request box up beside the other fields?
andilena · Member · Apr 9, 2016 at 10:39 am
Copy link
Hello,
Thanks for the quick reply.
Regarding the contact form, I would like to move the request box beside the other fields.

Thanks
andilena · Member · Apr 9, 2016 at 11:58 am
Copy link
I found another way to display the social media links, but I can’t manage to have the menu moved to the top right of the page and have it on one line with the languages.

Thank you
thesacredpath · Member · Apr 11, 2016 at 6:54 pm
Copy link
Give the following a try and see what you think.
```
.secondary-navigation {
    min-width: 100%;
    position: absolute;
    right: 0;
}
```
andilena · Member · Apr 12, 2016 at 9:25 am
Copy link
That worked, thank you very much!

How about the contact form, I would like to move the request box beside the other fields so I have 2 equals columns, is this possible?
thesacredpath · Member · Apr 12, 2016 at 7:30 pm
Copy link
On the contact form, we need to make a couple adjustments to the divs you added in that page. We are going to move the styling over to the CSS since that gives us much greater control. Switch to the Text tab and in the first opening div you added, change it to look like this.
<div id="my-contact">
and then change the second opening div to look like this
<div id="my-request">
Then add the following to your custom CSS, at the bottom below everything else.
```
@media screen and (min-width: 600px) {
  #contact-form-15 {
    width: 48%;
  }
  #my-request {
    position: absolute;
    right: 0;
    top: 0;
    width: 48%;
  }
  #my-contact {
    position: relative;
  }
}
```
The above CSS is a Media Query which limits this change to 600px and wider screens/windows since things become too narrow below that point if we keep things side-by-side.
andilena · Member · Apr 13, 2016 at 10:33 am
Copy link
Thanks for this. Ideally I would like to have it wider. Is it possible?
thesacredpath · Member · Apr 13, 2016 at 9:08 pm
Copy link
Hi, you haven’t removed the “style” inline CSS styling from within the divs in your contact form page. You need to do that as that is overriding the CSS we are trying to use.

Also, to make the request box wider, replace the CSS I gave before with this.
```
@media screen and (min-width: 600px) {
	#contact-form-15 {
		width:29%
	}
	#my-request {
		position:absolute;
		right:0;
		top:0;
		width:70%;
	}
	#my-contact {
		position:relative
	}
}
```
In the page editor in the text tab, remove this from the my-contact div
style="width:45%;padding:0 0 0 20pt;float:left;"
and remove this from the my-request div
style="width:45%;padding:0 0 0 20pt;float:right;"
Also, do not use points (pt) when working on the web as that is for print media. Use pixels (px), em units or a percentage (%) for dimensional units.
andilena · Member · Apr 14, 2016 at 8:01 am
Copy link
That worked. Thank you very much!
thesacredpath · Member · Apr 14, 2016 at 4:52 pm
Copy link
You are welcome.

No items found.