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/
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 am using the Redux theme and I added this:
If this “img” entry already exists, we’re going to add one simple
piece of code to it. Within the { } brackets following “img”, add this
code (in bold) just before the closing } bracket: height:auto;
in the style type="text/css" part of the code.
Since then, the photosets on the "Edit Theme" page show Tumblr error messages. This doesn't happen on single image posts.
I've installed new themes, reinstalled Redux but it stays the same. Here is what is on the inspect bit when I right click on the error on my photoset:
<p class="error-message-text" data-localization="message">
Whatever you were looking for doesn't currently exist at this address.
Unless you were looking for this error page, in
which case: Congrats! You totally found it.
</p>
How do I fix this?
We need to see the code blocks for your tumblr template. And also a link to the live tumblr would be helpful. Are there errors being thrown in the console?
Please find at requested.
</style>
<!--[if lt IE 7.]>
<style type="text/css">
#wrapper #sidebar #bottom {
background: transparent;
}
#wrapper #sidebar #top #avatar {
background: none;
}
#wrapper #sidebar #top #avatar img {
border: 5px solid #f1f1f1;
http://biscuitsarenice.tumblr.com/
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.
I have this simple fiddle
Here's a screenshot from Chrome Canary:
What am trying to do is adding the following code
.player .controls button.play {
width: 40px !important;
height: 40px !important;
border-radius: 100% !important;
background-color: rgba(23,35,34,.75) !important;
}
but that doesn't work for, any help will be thankful.
Cheers
It has border-radius and background-color. but you can change it. here is the class:
.player .rounded-box {
background: rgba(23,35,34,.75);
border-radius: .5em;
}
note: this is in iframe so, you need to have the style sheet file.
Well after searching I've found the following:
No it can’t.
The iframe in Page A is just a container element which links to the page in iframe B. Thus iframe B will only adhere to the CSS included within its page. There is no way to override this, unless of course they share the same stylesheet.
If we could override the CSS then we’d notice more customized Adsense Ads floating about on the web.
So no luck, thanks for your time.
I have a site that I'm trying to make a printable version and I'm using a new print stylesheet, but I'm having a problem. I have a DIV for star ratings that is just an empty DIV in the html file, but in the regular CSS I have background images for the actual stars.
The DIV in the html file looks like this:
<div class="example_rating"></div>
The code in the regular stylesheet looks like this:
.example_rating {
height:40px;
width:200px;
margin-left:20%;
background: url('../stars.png') no-repeat scroll 0 0 transparent;
}
My problem is that the star ratings aren't showing up at all in the printable format of the web page. I don't have the DIV hidden or anything, but I'm not sure what I can do to get it to show up in the printable format.
I realize the question may be a little vague, but I'm not sure how else to explain it. I can definitely give more details if need though. Thanks!
In your CSS, the stars are rendered as a background image, and when printing, backgrounds aren't usually displayed by default.
You'll either have to display the stars as an <img>, or tell your users to enable printing of backgrounds.
EDIT:
The easiest way to get round this would be to print the star rating as text as well as the background image, and then have the font inside the div transparent (and yellow in the print stylesheet). Example:
<div class="example_rating">
4/5 stars.
</div>
Stylesheet:
.example_rating {
color:Transparent;
/* Alternatively: text-indent: -9999px; */
height:40px;
width:200px;
margin-left:20%;
background: url('../stars.png') no-repeat scroll 0 0 transparent;
}
EDIT 2:
You could try putting this in your print stylesheet:
.example_rating {
background: none;
}
.example_rating:after {
content: '4/5 stars'
}
This puts some text inside the div using CSS, and if you put it in your print stylesheet only, it will only appear when you print!
Try making a new print only stylesheet... like this:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Or in you current stylesheet, put your printing styles in
#media print {
}