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.
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 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. :)
I have designed this website http://faitmaisoncuisine.com. On the index page there is subscribe to newsletter. The go button is not clickable while it works when you press enter on keyboard. It is something to do with css. I spent 2 days on it and can't find the solution.
Can you please suggest what I am missing here.
You have this part of the code:
<div class="grid-12">
<p class="h1">Our Offerings</p>
<p class="homeOffering">Fait Maison is a creative catering concept based in Dubai that also offers innovative tailor made plans to suit the bio-individuality of each person.</p>
</div>
CSS for these elements:
.h1 {
font-family: 'Titillium Web', sans-serif;
font-size: 1.6em;
color: #946c60;
margin-top: -80px;
padding-left: 10px;
height: 1px;
}
.homeOffering {
padding: 50px 421px 10px 10px;
font-size: 1.25em;
line-height: 1.3em;
}
The problem is caused by the following: You gave a -80px margin to the .h1 paragraph, and that causes the newsletter box to be overlapped by the .h1 paragraph.
What you need to do (without redoing the entire layout) is:
Change the div class from grid-12 to grid-8
Change the right margin of the .homeOffering paragraph from 421px to something around 50px, so you can get the original paragraph layout back.
I am having some trouble with a font size with CSS. Below you see I have .post I have < pre > tags that are nested inside of the post class so should the css I have for the pre tags work below? It is not working but I can't figure out why? The text inside my pre tags end up being 15px instead of 12px
.post {
width: 100%;
clear: both;
padding: 10px 0;
border-bottom: #CBCBCB 1px solid;
background: url(images/post_element.gif) no-repeat 126px 21px;
font-family: arial;
font-size: 15px;
}
.post pre{
font-size: 12px;
}
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
.post pre{
font-size: 12px !important;
}
Should work, but to answer your questing we need to view all html + css because it really depends...
In a vacuum, that code should work. However, base tag styling can vary browser-to-browser and <pre> tends to be a bit of an odd one. My first thought is that some other style is overriding it.
Have you used Firebug (or some other developer console) to take a look at the styles being applied and the computed style for the element? That should put you on the right track.
This was a weird issue, I had to end up changing the class and font size for all the other text, everything except the pre tags to get it to finally quit resizing after page load from my JS syntax highlighter
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.