Support » Fixing WordPress » Translucent content and widget

  • Hi!

    I am trying to make the content, header, widgets and footer on my website translucent, but all I am having luck with, is making EVERYTHING translucent.

    I tried installing a Custom CSS plugin, but I don’t seem to be able to put in the proper code…

    The website is http://en.julieherold.dk/ if that helps anything.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hi there,

    Go into your WordPress dashboard, click on “Appearance” -> “Editor” the style.css file should be opened within the window and locate the following;

    Locate:

    .site-header {
        background: #fff;
        border-bottom: 1px solid #f5f5f5;
        position: relative;
    }

    Add: so that the above ^^ line looks like this;

    .site-header {
        background: rgb(255, 255, 255) transparent;
        background: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid #f5f5f5;
        position: relative;
    }

    ^^^ — the above will make your header transparent background only, not text.

    Locate:

    .hentry {
        background: #fff;
        border: 1px solid #f2f2f2;
        margin-bottom: 50px;
        padding: 0 0 50px;
        position: relative;
    }

    Add: so the above line ^^ now looks like this;

    .hentry {
        background: rgb(255, 255, 255) transparent;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid #f2f2f2;
        margin-bottom: 50px;
        padding: 0 0 50px;
        position: relative;
    }

    Locate:

    .widget {
        background: #fff;
        border: 1px solid #f2f2f2;
        margin-bottom: 30px;
        padding: 30px;
        width: 100%;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    Add: add so the ^^ looks like below;

    .widget {
        background: rgb(255, 255, 255) transparent;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid #f2f2f2;
        margin-bottom: 30px;
        padding: 30px;
        width: 100%;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    Locate: (last one is footer)

    .site-info {
        background: #f07677;
        color: #fff;
        font-size: 13px;
        padding: 120px 0;
        text-align: center;
    }

    Add: make the above line to look like below;

    .site-info {
        background: rgb(240,118,119) transparent;
        background: rgba(240,118,119,0.8);
        color: #fff;
        font-size: 13px;
        padding: 120px 0;
        text-align: center;
    }

    That should work, just make sure you save the style.css after you update it. The ‘0.8’ in all lines of ‘rgba(240,118,119,0.8)’ is how much transparency you want.. ‘1.0’ = none … ‘0.9’ or lower more transparency to ‘0.0’ meaning clear no background. 🙂

    Hope the above helps.

    Thank you.

    Thread Starter Julie Herold

    (@julie-herold)

    Yes, that works! Thank you! 😀

    You are welcome 🙂

    Thread Starter Julie Herold

    (@julie-herold)

    How do I find out what they are called?

    (Now I have a problem with the comment-field, and I will probably have more in the future…)

    You are referring to the class or ID name of your element. You’d have to right click on your document and click on source code, find the comments or any other element within the page and its either going to have ‘id=”SOMETHING HERE”, or’ class=”SOMETHING HERE”

    Let me know if that works.

    Thread Starter Julie Herold

    (@julie-herold)

    Thanks for your help. It is difficult to find the right one, but through trial and error I seem to have found what I was looking for.

    And then i put it like

    .SOMETHING {
    code
    }

    ?

    Thread Starter Julie Herold

    (@julie-herold)

    And this is maybee a bit off-topic. But I would like my links to be a certain color, so I have in my CSS written:

    a:link{
    color: #FFB200;
    }
    a:visited{
    color: #FFB200;
    }
    a:hover{
    color: #FFB200;
    }
    a:active{
    color: #FFFFFF;
    }
    a:hover{
    color: #FFB200;
    }

    but when they have been visited they turn black. What am I doing wrong there?

    Thread Starter Julie Herold

    (@julie-herold)

    Well, trial and error doesn’t seem to take me all the way. The comment-fields are quite frustrating to me. I managed to fix the write a comment part (although I would lige the textarea to be translucent as well). But then there are the comments itself, that are just frustrating.

    Here’s a link to a page: http://julieherold.dk/blog/2016/01/10/stop-med-at-skrabe/

    Thread Starter Julie Herold

    (@julie-herold)

    And how do I edit the previous and next buttont?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Translucent content and widget’ is closed to new replies.