Css help for news page (post)

I have tried updating the css for my posts (NEWS) on my website.,

first I tried getting rid of the text shadow. that worked
Can’t figure out how to change the background color to something lighter. Added css but it didn’t work.
I’m also trying to add padding to the top of the page so it isn’t cut off (see attached screen shot).

Thanks so much!

Jane . [credentials to follow in secure note]

Hi @janequade

You can simply change the background color from (Theme Options > Layout and Design) settings as in this screenshot:

Regarding the page header margin issue, you can add this CSS code to (Theme Options > CSS):

.x-header-landmark {
    margin-top: 100px;
}

Thanks.

i made the changes you said to make and nothing worked.
Header not fixed
background not fixed.

and i deleted all the other css i added.
the shadows are back on the text.

Hi There,

I did some changes on your site and now it should render properly.

I have added the following CSS to remove the shadow.

.widget {
    text-shadow: none;
}

Also set navbar height

Hope that helps.

Thanks so much.

  1. the background on NEWS page (post) is still dark gray,.
  2. there needs to be more padding on top of news page. I still don’t know how to fix it.
  3. Changing the navbar height did not work. now the navbar links are up to high but the NEWS post page onlyl is still cut off. i changed navbar height back but it’s still way to wide (height).

Hi There,

  1. Please use this custom CSS to change the background color of the News page only.
body.blog,
body.blog .site:before {
	background-color: red;
}

2 & 3. Please navigate to Theme Options > Header and adjust the NAVBAR TOP HEIGHT to 139, it needs to be that tall to cover the height of your logo.

Then adjust the NAVBAR TOP LINK ALIGNMENT to adjust the vertical position of your menu.

Hope it helps,
Cheers!

  1. i entered CSS as provided but it did not work.

  2. I resized the logo instead.

Hi again,

I tested the above code via Chrome’s developer tools and it works fine. Please add the following code in your child theme’s style.css file instead:

body.blog,
body.blog .site:before {
	background-color: #005476;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

I was able to change the NEWS page to a lighter gray but tried again to change it to #DCDCDC and it won’t change.
individual posts are still dark background.

I was able to change the NEWS page to a lighter gray but tried again to change it to #DCDCDC and it won’t change.
individual posts are still dark background.

Hi there,

If you are adding the changes in the style.css file and the changes do not take effect, the site might still be loading the previous version of the CSS file.

Try clearing your browser cache after editing the style.css file and check the site again.

Please also make sure that there is no CSS syntax error in your codes. You can check it from here:

http://csslint.net/

by copying all the CSS codes in the style.css to the textbox to check it.

Hope this helps.

I did clear the caches
no syntax errors in css code

NEWS page is good.
but individual post pages still have dark background

Hi there,

Please update this code:

body.blog, body.blog .site:before {
    background-color: #DCDCDC;
}

to

body.blog, body.blog .site:before,
.single-post.blog, .single-post .site:before {
    background-color: #DCDCDC;
}

Hope this helps.

Yes. It worked!!! Thanks so much

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.