Post Styling

[Basstimg]

Hi thanks for your support in advance. Mine should hopefully be an easy question.

I have my main site build now at www.elasticlounge.com and the next stage it to create a blog. The current site only has pages and I am happy with the styling of these. For the blog I plan to create a page and use essential grid to link to the posts.

My issue is that I am unable to style the posts isn the way I would like. It is important that they have different styling than my main pages. Would like the page to be something like this :https://eightraymusic.com/news/eight-ray-uk-blog-finals/

Basically just a nice clean white background under my current navbar. Can I do this and have different styling for posts (than pages) I am using integrity black for the main site.

If so can you direct me to where I can make this change.

Thanks

[basanta]

Hi There,

Thanks for writing in!
There is no such setting to make post page different than the regular page. You have to do it through custom CSS.
Can you please point us to a post page of your site so that we can suggest you the CSS ?

Thanks

[Basstimg]

Thanks for our response I have been trying to style the post and cannot get anything like what I want. I think to keep things simple and hopefully find a system that makes creating posts easier can I just request advice on how to make

1. My blog page like the Integrity example (http://theme.co/x/demo/integrity/1/blog/ including

I would like the same background colour and layout but would like to keep my normal black navbar and footer.

2. Can I also have post pages styled like the integrity demo example here : http://demo.theme.co/integrity-1/5-reasons-you-need-the-x-theme/

With the side bar and same colour scheme and again with my navbar and footer using my global page colours (black).

Can both of the above be styled in this way ? and not change my main page settings ?any advice appreciated I am finding this challenging to set up.

My Blog page is : https://www.elasticlounge.com/blog

Here is the post page I tried to edit is (deleted all content as it looked awful) https://www.elasticlounge.com/10-reasons-need-silent-disco-wedding

Thanks

Tim

[christian]

Hey Tim,

You’re using the Integrity’s Dark design and a lot of CSS would be needed to make the content part of it to the Light design while leaving parts like your header and footer to the Dark design.

To follow most of Integrity 1’s setup, I would suggest that you import it to your site. You can then add this code in Theme Options > CSS to make your Navbar and Footer black.

.x-navbar {
    border-bottom: 1px solid #000;
    background-color: #121212;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.475);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.x-colophon.bottom {
    border-top: 1px solid #000;
    background-color: #121212;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.075);
}

You can then set your Navbar Links color to white.

Hope that helps.

[Basstimg]

@christian_y

You’re using the Integrity’s Dark design and a lot of CSS would be needed to make the content part of it to the Light design while leaving parts like your header and footer to the Dark design.

To follow most of Integrity 1’s setup, I would suggest that you import it to your site. You can then add this code in Theme Options > CSS to make your Navbar and Footer black.

Hi

Thanks for your response. Can I just clarify that I made it clear

1. I want all my main site pages and home page etc to have the same integrity black and current styling.

2. I want to change only the posts and blog to have the light background like the links I sent.

If your suggestion can achieve close to this can you let me know how to import it to my site like you suggest ? if I do that how can I add it without altering the PAGES and only changing the posts ?

Thanks I appreciate the support sorry not an expert at this kind of changes

Thanks

Tim

[paul.r]

Hi,

To achieve that, you can add this in Theme Options > CSS

.blog,
.single-post {
       background: #f2f2f2;
}

.blog .x-navbar,
.single-post .x-navbar {
    border-bottom: 0;
    background-color: #fff;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.1);
}


.blog  .x-colophon,
.single-post  .x-colophon {
    border-top: 0;
    background-color: #fff;
}

.blog  .entry-wrap,
.single-post  .entry-wrap {
    background-color: #fff;
    box-shadow:none;
}

.blog  .x-colophon.top .h-widget, 
.blog .x-colophon .widget ul li a,
.single-post  .x-colophon.top .h-widget, 
.single-post .x-colophon .widget ul li a {
    color: #000;
    text-shadow:none;
}

.blog .widget,
.single-post .widget {
    color: #000;
    text-shadow:none;
}

Hope that helps

[Basstimg]

@paul.r

}

.blog .x-navbar,
.single-post .x-navbar {
border-bottom: 0;
background-color: #fff;
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.1);
}

HI

Thanks for the response and the code. I added the code and like the general style you have achieved. However there were several areas which need more code.

I removed this code to change the nabber to its original colour of black

.blog .x-navbar,
.single-post .x-navbar {
border-bottom: 0;
background-color: #fff;
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.1);

However I couldn’t find a way to change the footer back to the setting I have on the main pages of my site. I would like this to also be black and like the main pages of the site.

The code also didn’t change the sidebar widget area to white and the text to black or change the main post title.

Also the title of the contact form to leave. comment should be black and it would be great if the text are where you write could be. plain white.

Would you mind helping me resolve this please and advising of code to achieve this.

Thanks really pleased with the look and looking forward to finessing the page

Tim

[nabeel]

Hi Tim,

Please remove the following code provided previously to keep the original footer color and text color of the widgets:

.blog  .x-colophon,
.single-post  .x-colophon {
    border-top: 0;
    background-color: #fff;
}

.blog  .entry-wrap,
.single-post  .entry-wrap {
    background-color: #fff;
    box-shadow:none;
}

.blog  .x-colophon.top .h-widget, 
.blog .x-colophon .widget ul li a,
.single-post  .x-colophon.top .h-widget, 
.single-post .x-colophon .widget ul li a {
    color: #000;
    text-shadow:none;
}

.blog .widget,
.single-post .widget {
    color: #000;
    text-shadow:none;
}

To change the blog title color, add the following code:

.blog .h-landmark {
    color: #000;
}

For the sidebar background color, add this as well:

.single-post .x-sidebar {
    padding: 10px;
    background: white;
}
.single-post .h-widget, .single-post .tco-subscribe-form-6149 label {
    color: #000 !important;
}
.single-post .subscribe-form select, .single-post .tco-subscribe-form input[type="text"], .single-post .tco-subscribe-form input[type="email"] {
    color: #fff !important;
}

Hope this helps!

[Basstimg]

Hi Sorry I may not have read things right but I have been through your advised process several times (5) and the code you provided ended up changing the main post area to black again and it wasn’t close to what I was looking for. Also some of the code didn’t change anything.

This code you sent to change title colour did nothing:

}
.blog .h-landmark {
color: #000;

I have played around by adding and removing a combination of codes from above in this thread and this is the closest I am able to achieve to what I want

I am currently using this code :

}

.blog,
.single-post {
background: #f2f2f2;

}

.blog .entry-wrap,
.single-post .entry-wrap {
background-color: #fff;
box-shadow:none;

This gets close to what I am looking for but I still need:

1. The post title to be black and to scale to fit the different screen sizes for different devices

2. The shadow to be removed from the sidebar titles and to be plain black

3. The Leave a reply title to be back at the bottom of the post and the box to leave comments in to be plain white like the background of the post

Could you help me achieve this please ? any help is gratefully appreciated and I appreciate the help I am getting from support.

Kindest Regards

Tim

[nabeel]

Hi again,

Please add the following code in your Child Theme’s style.css file this time:

.blog .entry-title a {
    color: #000;
}

.single-post .entry-title, .single-post #reply-title, .single-post .comment-form label {
    color: #000 !important;
}

.single-post .h-widget, .single-post .tco-subscribe-form-6149 label {
    color: #000 !important;
    text-shadow:none;
}

.single-post .x-colophon.top .h-widget, .single-post .x-colophon .widget ul li a {
    color: #f9f9f9 !important;
}

.single-post .comment-form-form select, .single-post .comment-form input:not(.submit), .single-post .comment-form textarea {
    background-color: #fff !important;
    box-shadow: none;
    text-shadow: none;
}

.single-post .subscribe-form select, .single-post .tco-subscribe-form input[type="text"], .single-post .tco-subscribe-form input[type="email"] {
    color: #fff !important;
}

@media screen and (max-width: 767px) {
    .single-post .entry-title {
        font-size: 5vw;
    }
}

Let us know how this goes!

[Basstimg]

@Nabeel

.blog .entry-title a {
color: #000;
}

.single-post .entry-title, .single-post #reply-title, .single-post .comment-form label {
color: #000 !important;
}

.single-post .h-widget, .single-post .tco-subscribe-form-6149 label {
color: #000 !important;
text-shadow:none;
}

.single-post .x-colophon.top .h-widget, .single-post .x-colophon .widget ul li a {
color: #f9f9f9 !important;
}

.single-post .comment-form-form select, .single-post .comment-form input:not(.submit), .single-post .comment-form textarea {
background-color: #fff !important;
box-shadow: none;
text-shadow: none;
}

.single-post .subscribe-form select, .single-post .tco-subscribe-form input[type=“text”], .single-post .tco-subscribe-form input[type=“email”] {
color: #fff !important;
}

@media screen and (max-width: 767px) {
.single-post .entry-title {
font-size: 5vw;
}
}

Hi Thanks

I am not sure if its me or the code and if it is my error apologises. I added the code in the appearance section to the style.css file it didn’t;t make any changes to the post page. I also then removed the code I had in the customiser incase that was effecting it but it also made no difference.

I have reset everything as it was before. Could you advise further or offer any support to achieve this ?

Apologises again if its me and I appreciate your great support

Tim

[nabeel]

Hey Tim,

I just re-tested the code and it works fine. The reason it’s not working on your end is that you’re using Cloudflare and the content you see is a cached. So clearing the Cloudflare’s cache will fix the issue, Make sure you keep the above code in your Child Theme’s style.css file. Right now I don’t see any code in there. Always purge the cache after making any change.

Let us know how this goes!

[Basstimg]

@Basstimg

.blog .entry-title a {
color: #000;
}
.single-post .entry-title, .single-post #reply-title, .single-post .comment-form label {
color: #000 !important;
}
.single-post .h-widget, .single-post .tco-subscribe-form-6149 label {
color: #000 !important;
text-shadow:none;
}
.single-post .x-colophon.top .h-widget, .single-post .x-colophon .widget ul li a {
color: #f9f9f9 !important;
}
.single-post .comment-form-form select, .single-post .comment-form input:not(.submit), .single-post .comment-form textarea {
background-color: #fff !important;
box-shadow: none;
text-shadow: none;
}
.single-post .subscribe-form select, .single-post .tco-subscribe-form input[type=“text”], .single-post .tco-subscribe-form input[type=“email”] {
color: #fff !important;
}
@media screen and (max-width: 767px) {
.single-post .entry-title {
font-size: 5vw;
}
}

Hi I added the code back again and purged the cloud false cache and my computer cache and purged my WB cache and I still couldn’t;t see any changes.

I have removed the code again. I am putting the code in appearance - Editor - child theme style sheet

Is that correct ?

Can you give me any other advice ? sorry not sure why I can’t make it work. I appreciate your helpful support

Tim

[paul.r]

Hi Tim,

Sorry I am quite confused.

Do you mind taking off all the custom codes that were provided on this thread.

Then enumerate again what you are trying to achieve.

And please provide wordpress admin login in Secure Note so we can test the code in your installation.

Thanks

[Basstimg]

Hi Paul

Thanks for your message I am sorry if I have confused you I can assure you you’re not as confused as me ! ha ha

Right lets start again and I will try to keep this as simple as possible. I will also upload images to help with the process.

Basically I want integrity 1 white demo style Blog page and Post page. BUT I would like to keep the back navbar and footer I have throughout my site.(I use integrity black through the rest of the site) Thats about it really. You can see the examples in these links

http://demo.theme.co/integrity-1/blog/

http://demo.theme.co/integrity-1/5-reasons-you-need-the-x-theme/

The only other thing I wanted was Le Blog title to just be Blog.

Below I listed all the instructions from images of how the code added looked so far. Now I re looked at the demos it seems very drawn out instructions but does highlight that the code added wasn’t showing some titles and also removing shadowing etc so would be worth reading. Hopefully the images help.

I am trying to style:

1. My Blog page
2. My Post Pages

Blog Page -

For the blog page I would like the blog page to look like the uploaded image below with

1. Black Navabar (like the rest of my website pages)
2. Grey (off white) background
3. Posts listed to have white background

You can see this here in an uploaded image:

I would also like a black footer (like the rest of my website. you can see an image of this below:

The uploaded images show how I would like the page to look. There are only 2 other things I need not shown on theses images. These are

1. I would like the Blog page title to just be “Blog” not Le Blog and I wold like the title to be black text.
2. I would like the posts on the page to have the tile (under post image) in black text so it can be seen.

Thats all I require for the blog page.

Posts :

Basically for the posts I want the same as integrity 1 demo again with my black navbar and footer. This is the demo link

For the posts I would like them to look like the uploaded image below with

1. Black Navabar (like the rest of my website pages)
2. Grey (off white) background
3. Posts content to have white background

You can see this here in an uploaded image:

You can also see the colours for background and post area clearly here (off white/grey background and white post content area)

I would also like a black footer (like the rest of my website. you can see an image of this below:

There are only several things I need to make this page example look correct

1. I would like the contact form for leaving comments to have a white background for all of the sections which are black. The text colourr when people write in the form should be black so they can see what they are writing.

You can see it how it looked before in black here :

And I want it like the integrity 1 post form like this

I would also like the main title and text above the form to be in black is it can be seen as above

2. I would like the side bar to have the colours and text style as the main integrity 1 blog - post you can see an example here :

http://demo.theme.co/integrity-1/5-reasons-you-need-the-x-theme/

Basically with a nice background and the areas in great and white background (mine were showing as black blocks)

Hope this makes sense. Basically I want integrity 1 style Blog and demo page styling with my black navbar and footer.

I have now removed the code and added a secure note with log in details

Thanks for your assistance

Tim

[christopher]

Hi there,

Thank you for the detailed request. I am sure you will understand that the request is a huge amount of customization and it is indeed outside of our support scope. And honestly, the request will be continued as the devil is in details and it is like recreating the whole integrity light inside the integrity dark. I did my best and come up with the CSS code below:

body.blog,
body.single-post {
    color: #848484;
    background: #f3f3f3 url(//demo.theme.co/integrity-1/wp-content/uploads/sites/23/2016/06/bg-integrity-1.png) center top repeat;
}

.blog .h-landmark span:before, .blog .h-landmark span:after,
.single-post .h-landmark span:before, .single-post .h-landmark span:after {
        background-color: rgba(0,0,0,0.1);
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.795);
}

.blog h1, .blog h2, .blog h3, .blog h4, .blog h5, .blog h6, .blog .h1, .blog .h2, .blog .h3, .blog .h4, .blog .h5, .blog .h6, .blog h1 a, .blog h2 a, .blog h3 a, .blog h4 a, .blog h5 a, .blog h6 a, .blog .h1 a, .blog .h2 a, .blog .h3 a, .blog .h4 a, .blog .h5 a, .blog .h6 a, .blog blockquote,
.single-post h1, .single-post h2, .single-post h3, .single-post h4, .single-post h5, .single-post h6, .single-post .h1, .single-post .h2, .single-post .h3, .single-post .h4, .single-post .h5, .single-post .h6, .single-post h1 a, .single-post h2 a, .single-post h3 a, .single-post h4 a, .single-post h5 a, .single-post h6 a, .single-post .h1 a, .single-post .h2 a, .single-post .h3 a, .single-post .h4 a, .single-post .h5 a, .single-post .h6 a, .single-post blockquote,
.single-post .comment-form-author label, .single-post .comment-form-email label, .single-post .comment-form-url label, .single-post .comment-form-rating label, .single-post .comment-form-comment label, .single-post .widget_calendar #wp-calendar th, .single-post .p-landmark-sub strong, .single-post .widget_tag_cloud .tagcloud a:hover, .single-post .widget_tag_cloud .tagcloud a:active, .single-post .entry-footer a:hover, .single-post .entry-footer a:active, .single-post .x-breadcrumbs .current, .single-post .x-comment-author, .single-post .x-comment-author a {
    color: #272727 !important;
}

.blog .entry-wrap,
.single-post .entry-wrap {
    background-color: white;
    box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

.single-post .x-entry-share {
     border-color: #848484;
}

.single-post select, .single-post textarea, .single-post input[type="text"], .single-post input[type="password"], .single-post input[type="datetime"], .single-post input[type="datetime-local"], .single-post input[type="date"], .single-post input[type="month"], .single-post input[type="time"], .single-post input[type="week"], .single-post input[type="number"], .single-post input[type="email"], .single-post input[type="url"], .single-post input[type="search"], .single-post input[type="tel"], .single-post input[type="color"], .single-post .uneditable-input {
        color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}

.single-post .widget_nav_menu ul li a, .single-post .widget_meta ul li a, .widget_pages ul li a {
    border-bottom: 1px solid #ddd;
    background-color:  white;
}

.single-post .widget {
    text-shadow: none;
}

.single-post .widget ul, .single-post .widget ol {
    border: 1px solid #ddd;
    box-shadow:  none;
}

.single-post .widget ul li, .single-post .widget ol li {
    border:  none;
    background-color:  white;
    box-shadow:  none;
}

I am afraid for the rest you will need to do it yourself using the Google Chrome Developer toolbar:

And CSS code: https://www.w3schools.com/css/

Regarding the Title of the blog you need to go to X > Theme Options > Integrity and change the blog title from there.

Thank you for your understanding.

[Basstimg]

HI Chris

Thanks for your hard work it is very close and certainly not many more minor tweaks needed.

All I need now is:

1. Footer on Blog page titles to be white ( the titles are subscribe, What we do, About us and Contact Us)

Thats all for the Blog page

2. Same as 1, for posts (post pages) PLUS the footer widgets to be standard integrity black rather than being white. I do need the side bar to be white though so would need the widget colours to be different in footer and side bar on this page.

I am sure you saw this yourself and maybe the changes you said I would need to do. The issue is I have tried and it is now so so close literally a couple of minor changes. Could you help please I would really appreciate it !

I did try using your advice and google Crome tool but couldn’t make the changes. If you could help that would be it for this I can get on and start blogging

Thanks

Tim

[lely]

Hi Tim,

1.) Please use this custom CSS instead:

.blog footer.x-colophon.top h4.h-widget {
    color: white !important;
}

That CSS will override the declaration that is setting those title as black to white.

For posts pages, in case you also want those titles to be white, please adjust css on #1 to this:

.blog footer.x-colophon.top h4.h-widget,
.single-post footer.x-colophon.top h4.h-widget {
    color: white !important;
}

For the content link of the widget to be black, use this:

.single-post .widget_nav_menu ul li a, .single-post .widget_meta ul li a, .widget_pages ul li a {
    color: black !important;
}

Hope this helps.

[Basstimg]

@Lely

.single-post .widget_nav_menu ul li a, .single-post .widget_meta ul li a, .widget_pages ul li a {
color: black !important;
}

Thank you that changed the title colours perfectly.

It has’t changed the widget colour in the footer though. This is how the footer looks on all the pages of my site and how I would like to to look on posts

This is how it looks after your code

Is it possible to make it look like the first image without changing the side bar widget colour which are white background?

[paul.r]

Hi,

To achieve that, please add this code at the bottom of your Global CSS

.single-post .x-colophon.top .widget_nav_menu ul li a {
   color:#fff !important;
   background-color:trnasparent;
   border-bottom:1px solid rgba(0,0,0,0.95);
}

.single-post .x-colophon.top .widget ul li {
   background-color:trnasparent;
}

.single-post .x-colophon.top .widget ul {
    border: 1px solid rgba(0,0,0,0.95);
    box-shadow: inset 0 0 0.35em 0 rgba(0,0,0,0.85), 0 3px 2px -2px rgba(255,255,255,0.075);
}

.single-post .x-colophon.top input[type="text"] {
    border:1px solid #0d0d0d;
    background-color:#242424;
}

Hope this helps