Tesseract Theme by Tyler Moore – header color customizer problem

Add these two rules using a custom CSS plugin:

.home .textwidget h1 {
    margin-top: 0;
}

.home #pg-5-0 {
    margin-bottom: 0;
}

The first rule will take place of the white bar on top, the second will take care of the white bar on bottom.

Thanks @crouchingbruin I’ll give it a shot.

@crouchingbruin where do I input this? I don’t see anywhere I can input a custom CSS plugin.

You will need to install a custom CSS plugin, like Custom CSS Manager or Simple CSS. You can install a plugin from the admin dashboard by going to Plugins → Add New. In the Search Plugins field on the right, enter the name of the plugin you want to install, hit the Enter key, and when the plugin appears, click the Install Now button.

right on…thx.

OK, so I have that installed, but I still see no place where I can use the custom CSS. Not sure where I install the HTML above. Please advise. Thank You

Which plugin did you install?

If you installed Custom CSS Manager, then go to Appearance → Custom CSS Manager. Copy & paste the rules from above into the CSS Code field. Click the Save Changes field at the bottom.

If you installed Simple CSS, then go to Appearance → Simple CSS. If the dropdown on the right shows Dark, I would recommend changing it to Light; I think the code shows up better that way. Then copy & paste the rules into the big input field and click the Save CSS button.

Unfortunately, that didn’t make any difference. I installed simple custom CSS, followed your directions and I see no change. It did say that it uploaded the custom CSS successfully. Just didn’t so anything.

Try clearing your browser cache. Or refresh by hitting Ctrl-F5. The white lines are missing when I look at the site.

@crouching Bruin, they’re gone on the home page, but not on all pages. There’s still a few with the white lines. Shouldn’t it apply to all pages? I really appreciate your help…we’re getting there!

Unfortunately, the way the pages have been created, there isn’t a lot of consistency with the way the elements get named, so you will need to replace the above rules with these two:

#pg-5-0 .textwidget h1,
#pg-52-0 .textwidget h2,
#pg-69-0 .textwidget h1,
#pg-11-0 .textwidget h1,
#pg-13-0 .textwidget h1,
#pg-9-0 .textwidget h1,
#pgc-9-1-0 .textwidget h2,
#pg-7-0 .textwidget h1
{
   margin-top: 0;
}

.page-id-5 #pg-5-0,
.page-id-52 #pg-52-0,
.page-id-69 #pg-69-0,
.page-id-11 #pg-11-0,
.page-id-13 #pg-13-0,
.page-id-9 #pg-9-0,
.page-id-7 #pg-7-0
{
   margin-bottom: 0;
}

Each selector targets the element on a specific page according to the page ID. For example, your home page has an ID of 5, the Group Travel page has an ID of 52, etc.

I don’t see that this is working.

Clear your browser cache, I see the lines gone from the other pages.

the issue I think is that simple custom css doesn’t work with that theme, I am also having trouble getting custom css to work with that theme…did you ever get it fixed?

@semperaye I followed @crouchingbruin’s advice and it did work. I had to clear the cashe in order to see it, but it did work. Thanks @crouchingbruin!