• Resolved webblish

    (@webblish)


    On the pages of the categories, the name of the category is white on a semi-transparent background. I can’t find the correct CSS rules to change that. Who can help me out?

Viewing 6 replies - 1 through 6 (of 6 total)
  • hey webblish !

    I would be happy to help you but you need to help me too by providing a link to your categories pages. I checked https://www.webblish.nl/ and I can’t find more than 2 pages , the home page and contact page

    Cheers !

    Thread Starter webblish

    (@webblish)

    Hi, many thanks for your reply. Here’s one of my sites running this theme, I’m already pointing to a category page (all links in the navigation bar link to category pages): https://exotischevakantie.info/afrika/

    I would like to give it a semi-transparent white background like I have on the single posts: https://exotischevakantie.info/rondreis-kenia/

    To be complete, I’m already using this custom CSS:

    @media ( min-width: 500px ) {
    div.post{
    background: rgba(255,255,255,0.7);
    border-width: 0 !important;
    -webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25) !important;
    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25) !important;
    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.25) !important;
    }
    }

    .post-meta p {
    font-weight: 500;
    font-size: 0.7em;
    }

    div.srp-thumbnail-box {
    clear:both;
    }

    .srp-thumbnail-box img:hover {
    background:#000;
    opacity: 0.7;
    transition: opacity 0.2s 0.1s ease-in-out;
    }

    .srp-post-title {
    clear:both;
    margin:0.15em 0;
    font-size:150%;
    line-height:120%;
    }

    .srp-post-content {
    margin-bottom:2em;
    }

    .sidebar h3.widget-title {
    line-height:150%;
    }

    @media ( max-width: 1000px ) {

    .sidebar {
    display: inherit !important;
    float:left;
    width:100%;
    margin-top:1em;
    padding:2em 1em 1em 2em;
    background:#fff;
    border:solid 1px #ddd;
    font-size:110%;
    }

    .sidebar h3.widget-title {
    line-height:150%;
    font-size:120%;
    }

    div.srp-thumbnail-box {
    clear:none;
    }

    .tablepress td{
    font-size:95%;
    }

    }

    @media ( max-width: 500px ) {

    .sidebar {
    border-style:none;
    margin-bottom:1em;
    padding:1.25em;
    font-size:inherit;
    }

    .tablepress td{
    font-size:85%;
    }

    }

    .credits p{
    display:none;
    margin:0
    }

    h4.blog-tagline{
    color: #03B6CD;
    }

    li.with_image span a{color:#333}
    div.section-inner h4(background:#03B6CD}

    @media ( min-width: 1000px ) {

    .main-menu li{
    font-size:120%;}

    .main-menu li ul li{
    font-size:90%;}

    div.bg-image{
    height:444px;
    }

    }

    is that what you want ? https://imgur.com/hkOS0pO

    If that’s the case just add the following to your style.css file ??

    .page-title {
    background: rgba(255,255,255,0.7);
    }

    let me know if that’s what you wanted to do ??

    Thread Starter webblish

    (@webblish)

    Yes, that’s all. Seeing how easy it is, I must have overlooked it a dozen times, so thanks for waking me up! ??

    No problem man ! it happens to anyone :). Let me know when you need anything else ??

    Thread Starter webblish

    (@webblish)

    For anyone interested, here’s my final CSS for the category title:

    @media ( min-width: 500px ) {

    .page-title {
    background: rgba(255,255,255,0.7);
    }
    .page-title h4{
    color:#111;
    font-size: 1.25em;
    }

    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change BG category title’ is closed to new replies.