Velux Theme Background Colour preventing me from seeing some content clearly

[jayezza]

Hi! I have a small issue with my velux theme. I've got a pretty dark background colour selected (which I don't want to change). As a result, I am unable to see the menu panel on my blog page clearly, and I can't figure out how to change the colour. No settings in page builder or customize on wordpress are currently working. Here's an image

Please help! I hope there are some fixes to solve this issue :)

[EvanHerman]

Hi @jayezza

Do you have a link to that page specifically? If there are no options in the customizer that will change the color, a minor CSS addition should do the trick. I'd be more than happy to help out with that, I'll just need a link to reference for your site.

Evan

[jayezza]

https://www.collegesandcareers.net/welcome-to-colleges-and-careers/

on the prior page here https://www.collegesandcareers.net/news/ its showing just fine but on the page above it's weird. Thank you so much! @EvanHerman

[EvanHerman]

Hey @jayezza

Thanks for providing those links - that's super helpful! Try and give the following CSS snippet a try:

.single .entry-meta {
   color: inherit;
}

.single .entry-meta a {
   color: #51748e;
}

You can add that to the customizer 'Additional CSS' section. Once added there, that section on the single template should look similar to the page at https://www.collegesandcareers.net/news/.

We'll have to take a look and see why the change on the single template, and update the theme accordingly.

Let us know if that helps or if I can help in any other way.

Evan

[jayezza]

Hi Evan! Thank you! That worked but I'm still missing something! There are two "section break lines" one above the title and the other below the date, admin, comment portion that just got fixed. I would like to see those lines as well but they are so faint atm (because the colour won't change) @EvanHerman

https://wpnux.godaddy.com/hello-world/?theme=velux&header_image=https%3A%2F%2Fisteam.wsimg.com%2Fstock%2F4dff49d09518e2acf4187d6de866912a2b8c6c9726a0a8e23efebb89315760a5

In the example above the lines are coming up as grey, so I know the colours can be changed but not sure how. would be good to make them the same colour as the panel we just changed. Thank you

[EvanHerman]

Hi @jayezza

You should also be able to change those by using the following bit of CSS: (This will change those lines on the single template pages, such as the blog posting template you've linked to there)

.single .entry-header {
   border-top: 1px solid rgba( 34, 34, 34, 0.5 );
   border-bottom: 1px solid rgba( 34, 34, 34, 0.5 );
}

That should make them a bit darker. Here is an example of how the above snippet will effect the site:

[jayezza]

AWESOME! Thank you @EvanHerman

[jayezza]

Last thing (so sorry) @EvanHerman - is there any way to reduce the space between the bottom line we just darkened and the text on the page?

https://www.collegesandcareers.net/welcome-to-colleges-and-careers/

Also on that page, theres something under the social network icons that just says 'loading' . What is that?

[EvanHerman]

Hi @jayezza

Adding to the other CSS we previously added, you can do:

.single .entry-header {
   margin-bottom: 0;
}

So combined with the other CSS, that would look like:

.single .entry-header {
   border-top: 1px solid rgba( 34, 34, 34, 0.5 );
   border-bottom: 1px solid rgba( 34, 34, 34, 0.5 );
   margin-bottom: 0;
}

If you wanted to decrease it even further, you'd have to adjust the top margin on the .entry-content element.

.single .entry-content {
   margin-top: 0;
}

As for the "Loading..." text down there, it looks like that's coming from the Jetpack 'sharedaddy' module. You can confirm this by temporarily deactivating that module within Jetpack - and rechecking that page to see if the text is gone.

If it is, and the issue is with that module, I'd recommend reaching out to the Jetpack team for some assistance.