Translucent content and widget

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.

Yes, that works! Thank you! ??

You are welcome ??

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.

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
}

?

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?

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: https://julieherold.dk/blog/2016/01/10/stop-med-at-skrabe/

And how do I edit the previous and next buttont?