How can I set a standard font size and padding to an entire wordpress post?
For example, currently I use p style="padding-right: 30px;padding-left: 60px;font-size: large" for every single paragraph except for title tags.
Is there a better way to do this?
It sounds like you want to use CSS (Cascading Style Sheets) (tutorial).
For your current example, you can apply the styles to every <p> element on the page using:
<style type="text/css">
p {
padding-right: 30px;
padding-left: 60px;
font-size: large;
}
</style>
You can also put the contents (excluding <style> tag) into an external file (.css), then address the file using <link rel="stylesheet" href="PATH_TO_STYLESHEET" />. Stick the <link> element in the <head> of your theme.
Since you are working within Wordpress...
You can open up your theme's style.css (or edit it within Wordpress by going to Appearance > Editor in the dashboard). Just place the content from above (again, without the style tag) near the bottom of your stylesheet. If you only want to style <p> elements within the post body, you can use the selector div.post p {.... rather than simply p {.... WordPress uses the "post" class, among others, for each post that is displayed.
If you use something like this it will apply it to all the paragraphs
.post-class p {
padding-right: 30px;
padding-left: 60px;
font-size: large;
}
You might have to adjust .post-class to whatever the theme is using.
Related
On my website, I added the following code which I had only intended to apply to my posts, like this.
#media screen and (min-width: 767px) {
p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
}
Obviously, it was applied to all the pages on the website. It's fine on some pages, but the homepage/frontpage is messed up on computers. If you scroll down, the excerpts (descriptions) below the posts have these margins applied to them.
How can I make the change above only apply to posts and not to the frontpage/homepage? To be clear, I want to remove these paddings from the homepage/frontpage. I want to keep them on my posts.
This is one of the suggestions people gave me that didn't work. If I decreased the number from 20%, nothing happened. The margins got bigger if I increased the padding, as if the minimum is set to 20%.
.home .posts-loop .entry-summary{
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
Welcome Ahmed.
The suggestion that people gave you that didn't work, is related to class names (note the point before the names: .home | .ports-loop | .entry-summary . This indicates that are classes).
In your first sample you only use p . This affect to all p html elements.
So, your solution is to add a class to the paragraphs where you want to aply the css rules:
<p id="xxxx" name="xxxx" class="SomeClass">
And then, in your css code, use .SomeClass {...} to set the rules to apply.
This rules should be applied only in the elements set as class="SomeClass", and not to other elements.
For home page/front page just give another custom class name and just give padding to 0 or else you want and write " !important ".For e.g .cstm_home { padding: 0 !important; } . I hope it will solve your issue.
An easy way I see around this is to create a different stylesheet for the homepage. I'm not sure if you're using a global stylesheet, if you are, you should remove the line that links the CSS to this page.
A more prudent approach would be to use another type of selector instead of your paragraph tag, put an id in all the paragraphs you would like to style the aforementioned way and use this id or any other selector in your CSS.
Cheers!
I hope this helps....
What I would suggest is to add a class to the p tag on home page. The HTML should be like
<p class="homepagepara">blah blah blah.....</p>
And the css will be like.
p.homepagepara {
margin: 0;
padding:0;
}
After you have created the class you can style those pages any way you want. And it will target the home page paragraphs only. Hope this helps. Let me know if you have more questions
I wish you had shared your HTML as well. But a general answer is that you are selecting all the p elements in the html document to have the mentioned paddings. So of course it's applied everywhere on the page.
Solution 1: If they're separate html pages you can link separate stylesheets and include the paddings only in the desired pages.
Solution 2: Be more specific with the css selector. For example if the wrapper div for the posts has the class of .posts, write your css as following:
.posts p {
font-size: 21px;
padding-right: 20%;
padding-bottom: 10px;
padding-left: 20%;
}
I'm using Bootstrap 4 and I'm trying to set padding for nav links inside navbar in my custom CSS file:
.nav-link {
padding: 0.15rem;
}
And the style that is used is this:
As you can see, the custom.css is nowhere to be seen. The css file where the current style is from is inside bootstrap.css.map.
Why is it reading the style from bootstrap.css.map and not from my custom CSS file? I bundled all styles together, the bootstrap.css is loaded first and my custom CSS is loaded last.
You need to understand how specificity is calculated in css, it is an easy topic.
If you want a quick solution, you can use !important next to your css styling like so :
td { height: 50px !important; }
Sorry, my original answer I looked at the debugger output.
If you need an overwrite. In one of my projects I gave the surrounding tag an id.
<ul id="myNavBar">
Then the following CSS worked for me
#myNavBar .link-item {
padding: 0.15rem;
}
I wanna change my CSS for a specific page, and I can not get the ID of that page.
I wonder how I can change my CSS for a specific page when I don't have a ID of that page?
This is the ID of my page: forum=forum-framtidsjouren
If I change the code below I'm changing other pages too...
.home #content, .single #content, .page #content
{
background: none repeat scroll 0 0 transparent;
box-shadow: none;
width: 100% !important; // I want to change width to 100% !important
}
Open up the inspector in your browser and navigate to the <body> tag and you will see something like this:
<body class="... postid-123 ...">
or
<body class="... page-id-123 ...">
See the documentation of the body_class() function in WordPress, which is responsible for generating these classes:
http://codex.wordpress.org/Function_Reference/body_class
You could also use a plugin which allows you to load specific css files for some specific pages.
This one for instance: https://wordpress.org/plugins/this-page-needs-files/
I have some CSS for a Wordpress blog. I want paragraphs to indent, but blocks of code to align left to the margin. This is the code that I have---all of these elements appear with a <div class="postContent" tag, and Wordpress automatically wraps post text blocks in <p> tags.
First, I've set all paragraphs within the div tags to indent:
.postContent p {
font-size: 1.2em;
text-indent: 2.5em;
text-align: justify;
line-height: 1.6em;
margin: 1em;
}
Then, Wordpress sets aside the first paragraph as a .lead paragraph. I want that to indent, provided it's not code:
.postContent p.lead code {
margin: 0;
text-indent: 0;
}
That works just fine. However, all the other code paragraphs are still indenting, so I added this to the stylesheet:
.postContent p code {
text-indent: 0;
padding: 0;
padding-top: 2em;
padding-bottom: 2em;
}
No dice. The code blocks are still indenting according to the .postContent p rule.
Setting text-indent on a code element inside a p element does not affect the indentation of the p element. It does not affect anything, really, since text-indent applies to block containers only.
If the markup is <p><code>...</code></p> so that the p contains nothing but the code, you can add
.postContent p code { display: block; }
and then consider what to do with vertical spacing, which may be a bit excessive after the addition (namely margins of p plus padding of code).
It's really hard to say without seeing both the source for the html and the actual css code, but I'm guessing your styles are being overridden by a more specific style.
The best thing for you to do is install Firebug in Firefox (really, the best development tools for a browser, IMHO) and inspect the targeted elements. The inspector should display all the styles being applied to the element. The overridden styles will have a strikethrough it. If you see they are being overridden, make your styles more specific. Otherwise, if you don't see your style listed, then you're not correctly targeting it.
Hope that helps. Good luck.
My first post here and unfortunately it won't be that exciting and I need an answer that includes IE6.
To get space between paragraphs, I'm styling my <p> tags like this:
div.content_cms p {
margin-top: 0px;
margin-bottom: 15px;
padding: 0px 15px 0px 0px;
}
The margin bottom to space the paragraphs. This of course works fine. But then I also need to style a link with html is this:
<p>Text </p>
When there is a link as in the example above, I don't want the margin-bottom to be applied. I tried to fix it with this:
div.content_cms p a {
margin-bottom: 0px !important;
}
Which of course doesn't work.
I'm adding a class to the <a> tags with jQuery so I can automatically add an icon to links. I tried adding
margin-bottom: 0px !important;
to the class I'm adding with jQuery but that didn't work either.
What's the best way to style spacing between <p>paragraphs</p> with text but not paragraphs with links?
Thank you.
You can easily do this with jQuery:
$('p').has('a').css('margin-bottom', 0);
Live demo: http://jsfiddle.net/NyjvT/
If you need to set multiple styles, then consider this:
$('p').has('a').addClass('whatever');
CSS:
p.whatever { margin-botttom:0; font-size:20px; ... }
I don't think you can.
Your best bet is to add a class to those particular <p> elements, and override the margin on those:
div.content_cms p.nomargin {
margin-bottom: 0px;
}
<p class="nomargin">Text</p>
If this is not possible on the server side, you could do some jQuery hackery to take care of it.
Maybe there's some CSS3 magic that could be used, but I'm not sure of that; and since you want IE6 support, it's out of the question anyway.
This is not possible using only CSS.
CSS (Cascading Style Sheets) works only down the document tree.
The reason for this is performance.
For more info read this:
http://snook.ca/archives/html_and_css/css-parent-selectors
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3940
You need to use javascript for that to work.