Jump to content

Archived

This topic is now archived and is closed to further replies.

Lisa Haran

Can you style a page entry content different to a post entry content

Recommended Posts

Lisa Haran+    7
Lisa Haran

I need to style alll my post entry content backgrounds differently to my page post entry content backgrounds

Is this possible as they are both .entry_content

however i did notice that a class is different on a page as opposed to a post

 

class = "post-181 page type-page status-publish hentry fpost post-number-1 instock"

 

the page type is either post or page depending.

so tried using this in the css and didn't work.

just wondering if it's at all possible

 

 

article .page type-page .entry_content{
background-color: #FFF;
padding:10px;
line-height: normal; 
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.2); 
}

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

Each page, post, category etc.. are given a unique class in the body tag, this allows you to use that class to give that specific post, category, page etc.. unique styling.

Therefore, if you wish to give a specific post a pink background color, you would need to inspect the body tag so that you get the correct class and ID and then use that in your custom CSS, The <article> tag also has the post id class and ID which you can use for example:

 

.post-369 {
background: #FFC0CB;
}

 

Will give a post that has an ID of 369 a pink background.

 

http://d.pr/i/TS3g


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Lisa Haran+    7
Lisa Haran

Hi Danny,

Thanks for that but don't want to style a specific post, I want to style all post (content post loop)  but I want to style them different to a page (content post loop)

Currently I have this style which applies a white background with a box shadow to all post loop content on pages and posts.

 

 

.hentry-pad{
background-color: #FFF;
line-height: normal;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.2);
margin-left: 4%;
padding: 15px;
}
 
When I was using pagelines framework I could apply a different style to global page (content post loop) and to global post  (content post loop) by using this style but it doesn't work for DMS
 
body.single-post section#postloop {
background-color: #fff;
box-shadow: 0px 0px 3px #cccccc, inset 0 0 5px rgba(0, 0, 0, 0.05);
min-height: 150px;
border: 1px solid #FFF;
padding-top: 0px;
padding-right: 35px;
padding-bottom: 10px;
padding-left: 35px;
}
 

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

Try the following

 

.single-post article {
background: blue;
}
 


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Lisa Haran+    7
Lisa Haran

Hi James.

Tried that but it applies a blue background to all page and post content loop area.

I was able to do this no problem in pagelines framework, I really hope there is a solution.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Use the following to prefix your custom CSS for each.

 

Post = .type-post { background-color: red; }

Page = .type-page { background-color: blue; }


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Lisa Haran+    7
Lisa Haran

Danny,

Can't thank you enough, spent a good few hours trying to work this out and should have gone right back to basics.

Sincere thanks

Share this post


Link to post
Share on other sites
Rob    547
Rob

He taught me a new one with that too!

 

Glad he was able to help.  He's great!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×