Topbar and W3C CSS Validator results

[detech]

W3C CSS Validator results for http://digerati-experts.com (CSS level 3 + SVG)

W3C CSS Validator is reporting a bunch of errors, is there any way you guys can suggest which ones are fixable and which ones are requiring the dev of a wp plugin or theme.co?

Also my Topbar is enabled but it doesn’t show

here is the content of the topbar

<style>
.topbar-content {
    background-color: #333; /* Dark background */
    color: #fff; /* White text color */
    padding: 10px 20px;
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.social-links a {
    color: #fff;
    margin-right: 15px;
    text-decoration: none;
}

.social-links a:hover {
    color: #27caf2; /* Highlight color on hover */
}

.contact-info {
    display: flex;
    gap: 15px;
}

.contact-info span {
    display: flex;
    align-items: center;
}

.contact-info a {
    color: #27caf2;
    text-decoration: none;
    margin-left: 5px;
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-info i {
    margin-right: 5px;
    color: #27caf2;
}

</style>

<div class="topbar-content">
    <div class="social-links">
        <a href="https://twitter.com/YourTwitterHandle" target="_blank"><i class="fab fa-twitter"></i></a>
        <a href="https://facebook.com/YourFacebookPage" target="_blank"><i class="fab fa-facebook-f"></i></a>
        <a href="https://linkedin.com/in/YourLinkedInProfile" target="_blank"><i class="fab fa-linkedin-in"></i></a>
    </div>
    <div class="contact-info">
        <span><i class="fas fa-envelope"></i><a href="mailto:sales@digerati-experts.com">sales@digerati-experts.com</a></span>
        <span><i class="fas fa-phone-alt"></i><a href="tel:3254809870">325-480-9870</a></span>
        <span><i class="fas fa-phone-alt"></i><a href="tel:4802152973">480-215-2973</a></span>
        <span><i class="fas fa-headset"></i>Support</span>
    </div>
</div>

[ruenel]

Hello @detech,

Thanks for writing in!

The Topbar Content is meant for a plain texts. Only HTML tags that are paragraph friendly is accepted like span, break, strong, em, etc. Inserting style or div tags will cause an error with the validator because you cannot insert these tags inside a <p> tag. You may need to modify your HTML code and insert the CSS styling in Cornerstone > Theme Options > Code > Global CSS.

You must remove these from the topbar content:

<style>
.topbar-content {
    background-color: #333; /* Dark background */
    color: #fff; /* White text color */
    padding: 10px 20px;
    font-family: 'Arial', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.social-links a {
    color: #fff;
    margin-right: 15px;
    text-decoration: none;
}

.social-links a:hover {
    color: #27caf2; /* Highlight color on hover */
}

.contact-info {
    display: flex;
    gap: 15px;
}

.contact-info span {
    display: flex;
    align-items: center;
}

.contact-info a {
    color: #27caf2;
    text-decoration: none;
    margin-left: 5px;
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-info i {
    margin-right: 5px;
    color: #27caf2;
}

</style>

Best Regards.

[detech]

Can you assist in looking over my site? I am having trouble with the background not changing color both with CSS and the theme global setting it just happened out of no where.

Lastly how do I get the carousel posts to show as well?

[ruenel]

Hello @detech,

I have replied your other thread.

To enable the Carousel, it should be in Cornerstone > Theme Options > Blog Options.

The category IDs “blog” is incorrect. It would be best if you disabled the “Filterable Index” option. If you want to specifically exclude categories on your blog index, you might want to check this out how to find the category ID:

• How to Locate Category IDs | Themeco Docs

Best Regards.