I made a Contact Form 7 on my Wordpress website: http://ppcdigitalblack.com/contact/
I want it to include: full name*, email address*, message*, and budget dropdown list (not required)
I want full name and email address in centered field boxes that each take up half the space. I also want the font to be Lato and blue... For some reason "your full name" is gray!!
I tried all the tricks from this blog post but no luck:
https://deliciousthemes.com/contact-form-7-fields-columns/
So I'm wondering if there's a CSS trick for these two things, or if you guys have a trusted plug-in to format Contact Form 7 that works well with Uncode.
This is the code I have for the contact form, attempting to manipulate the font:
.contactform {
text-align: center;
font-family: 'Lato';
color: #777777;
}
This is the code I have for the width of the form, which actually gave me a more prefered form width. I'd just love to center the form fields at least, but ideally get Email and Name on the same line!
.wpcf7-form {
max-width: 800px;
margin: 0 auto;
}
Appreciate any thoughts or advice!
I think this will help you.
(For some reason "your full name" is grey!!) - This is because other labels are raped inside <p> and this label is not if you can apple the same to this then its ok. or you can just use this style.
form .contactform>label{
color: #007ec7;
}
For using font-family: 'Lato'; you better do the following -
Attach a font family URL in the <head>if you don't have yet -
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
and you can apply as following below -
form .contactform {
text-align: center;
color: #777777;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
For centre align the <input> you can use -
form .contactform input[type="text"],form .contactform input[type="email"]{
margin: 9px auto 0 !important;
}
Hope this was helpful. IF there is anything else feel free to ask. :)
Related
I have seen conflicting information about how to use a master style sheet and have experienced some bugs when testing methods. Just want to get clarification on the proper way to do this.
I would like to store cross website branding styles in a master global.css sheet and make page specific adjustments on a second .css file.
For example, this code would live on the master sheet:
#headline1{
font-family: 'Roboto', sans-serif;
font-size: 96px;
letter-spacing: -1.5px;
}
and this code would be page specific:
.headline {
color: #FFFFFF;
text-align: center;
}
I have recently read something that said you should not use ID in this manner. I've also run into issues when using it multiple times in the same grouping. I initially tried doing this using just classes instead of the ID, but it never worked. Not sure why.
Is this method considered proper? If not what is the proper way to do this?
If you create a master.css with:
.headline {
font-family: 'Roboto', sans-serif;
font-size: 96px;
color:#000
letter-spacing: -1.5px;
}
You can build upon/replace it per page as long as your custom css comes after the master.css
.headline {
font-size: 45px;
color: #FFFFFF;
text-align: center;
}
Quick example of a page:
<link rel="stylesheet" type="text/css" href="master.css"/>
<style>
.headline { //
font-size: 120px; // size overides master
color: #FF0000; // color overides master
text-align: right; // added alignment, which is overiding the browsers base css
}
</style>
I'm not sure if this is quite what you are looking for, but I hope it helps
In the example you provided a can only assume you have something along the lines of:
<div id="headline1"><span class="headline">Title</span></div>
This would basically mean any style applied to the div, the span would inherit unless told otherwise.
To further expand on this, you can also use inline styles <span style="color:#FFF"> which will dominate any other styling UNLESS an !important; has been added to a style element.
I have a Wordpress website with posts using <p> for text, with a custom style:
p {
font-family: 'Roboto', sans-serif;
color: #555;
display: inline;
line-height: 1.2em !important;
letter-spacing: -.01em !important;
font-size: 17px !important;
font-weight: 400 !important;
}
I need it to be inline, the problem is doing so it removes completely the new lines given through Wordpress visual editor (or even html editor).
How to have both working? is there a way?
Since the posts are managed by another user, a writer for these articles, I'd need to avoid making him write div snippets or </br> every time.
I'm trying to use WP Web Scraper plugin with WP in my site www.eastwickpark.co.uk to get online ratings of the practice from another site
https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice
I used this code snippet
<img src="http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/iwantgreatcarelogo.png" />
<div>
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
</div>
Then I used custom CSS in the themes stylesheet editor
.btn.blue,
div .btn.blue {
font-size: 16px;
padding: 8px 16px;
}
/*** Stars ***/
.sprite-icons.star-blue-outline {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-outline.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-fill {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue.png');
width: 19px;
height: 17px;
}
.sprite-icons.star-blue-half {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/star-blue-half.png');
width: 19px;
height: 17px;
}
.sprite-icons.caret-white {
background-image: url('http://www.eastwickpark.co.uk/wp/wp-content/uploads/2015/11/caret-white.png');
width: 10px;
height: 14px;
}
I've got a problem with my CSS in that the button "wraps".
Tried to just get the star rating targeting the class "raty-rating-wrapper-readonly" part but then I get a whole load of vertical stars.
i.e. if i use
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".raty-rating-wrapper-readonly" basehref="1" ]
I get a whole vertical list of 5 * images?
If I use image-middle div like this
[wpws url="https://www.iwantgreatcare.org/gpsurgeries/eastwick-park-medical-practice" query=".image-middle" basehref="1" ]
I get a weird wrap on the button.
Can't figure this out, and have to admit I'm not a CSS guru. Any insight would be gratefully received.
I've got a problem with my CSS in that the button "wraps"
The cause of the wrapping behaviour is due to <br> tag dynamically generated by WordPress. You can either fix it by following the guideline here: Stop WordPress automatically adding <br> tags to post content
The above post is a plus for you because it also removes the <p> tags that are dynamically generated. I just browsed through your code and found a lot of unwanted p tags.
Can't figure this out, and have to admit I'm not a CSS guru. Any
insight would be gratefully received.
Since you hinted for a CSS solution, a simple fix is to hide the br tags using #widgets .textwidget br { display: none; }. Alternatively #widgets .textwidget a { display: inline-flex; align-items: center } fixes the space and aligns the arrow image as the br tag is ignored inside and initial direction of flex is row.
Unwrapped button:
I've been seeing one strange thing which I can't solve and it is related to the fact that in my site the drop down portion of the combo box and/or drop down list overlaps/hides the text entry. Is there anyone who faced the same issue and if yes how it was solved ?
<UPDATE>
Link of the repro page showing the overlapping can be found here kendotest.azurewebsites.com
</UPDATE>
Illustration of the problem in 3 pictures...
Here's how it looks on a KendoUI demo web site - proper behavior
And here's the behavior on my site - faulty overlapping
I found an answer
Default MVC 4 template has in site.css next entry for body:
body
{
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
enter code here
When I remove the border-top line the dropdown starts working as it should
I'm trying to create a newsletter standard for our org and having problems with Outlook rendering the text too large.
Here is the css section of the page
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
background: url(http://www.blah.com/stuff.gif);
}
a {
color: #f24c22 !important;
}
a:visited {
color: #f24c22 !important;
}
a:hover {
color: #3d7ac5 !important;
}
table {
background: #ffffff;
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.2em;
color: #494949;
padding-top: 0 !important;
margin-top: 0 !important;
}
h3 {
font-size: 1.1em;
color: #12377c;
}
p {
padding-top: 0 !important;
margin-top: 0 !important;
color:#333333;
}
.style1 {color: #333333}
.style2 {color: #12377c}
.style3 {
font-size: smaller;
color: #666666;
}
Any suggestions why this might be caused?
Have you tryed using main *{font-size: 12pt;} ?
Outlook by default uses Trident, IE's engine for incoming mail, and Word HTML rendering engine for outgoing mail... Until Office 2007, and people hate it.
Now, it uses Word 2007's rendering, wich is rather lacking. On microsoft's page you can see that de body element doesn't support the style attribute.
If you want to set a specific size for you fonts, then you should probably use a fixed size type like pt. Rather than a variable one like em/%
See here for what I mean.
Many mail readers strip the "body" tag from any email received, or disregard styles applied to this element. Try applying the font size to an enclosing div.
abstracted the font size to smaller, which I found at standard viewing to be the equivalent size. Rewrite page in div's considering it's a basic template, refered to the ID's of the divs in order to render, worked fine. Tested it on various email accounts including gmail, hotmail and rendered through outlook. Outlook was the only problematic one, where the same page refferencial links fail.
Add these metatags and you will find that Word / Outlook "magically" renders the page (including images) the correct size:
<meta name="ProgId" content="Word.Document" />
<meta name="Generator" content="Microsoft Word 12" />
<meta name="Originator" content="Microsoft Word 12" />
I have no idea why Outlook does this, most corporate emails I get look terrible in Outlook - however, with these tags, the ones I send look pristine.