how to change background opacity?

Tagged: font

This topic has 23 replies, 6 voices, and was last updated 8 years, 7 months ago by Sakin.

Viewing 20 posts - 1 through 20 (of 24 total)

1 2 →

Author

Posts
April 10, 2013 at 3:36 pm #6726

standardman
Member

Can you please help me on making transparent background. Like this example :

http://WWW.HAJZEE.COM

Thanks

April 11, 2013 at 1:00 am #6753

Sakin
Keymaster

@standardman: You can add background from Appearance => Background.

April 12, 2013 at 11:11 am #6876

standardman
Member

dear ,

I am speakin about the opacity (transparency) of the box which contains the body ..

hope this makes it clear bhaai

April 12, 2013 at 6:22 pm #6897

Sakin
Keymaster

@standardman: No I don’t get it. Can you just show me by uploading the image of what you want. Them paste the image link here.

April 12, 2013 at 6:52 pm #6900

standardman
Member

look at this site

http://buture.blogspot.com/

April 12, 2013 at 7:05 pm #6902

Sakin
Keymaster

@standardman: I understand but that is not the opacity. they uploaded the transparent background in .png format

You can also add like that by adding following css in your “Custom CSS” box in Theme Options pane.
#page { background-color: transparent; } #main { background: url("//www.blogblog.com/1kt/transparent/white80.png") repeat scroll left top transparent; }

But upload the image in your own site and add in.

April 12, 2013 at 8:41 pm #6905

standardman
Member

ok it works , thanks for the great theme and great support . I have some questions please

1-can you please advise how can I modify header and footer as well ..

2- I need in the header to put My logo on the left , and write some text next to it . the text now appears below the logo and in small size.

3- how do I hide tags of all posts (making them white for example), and hide the title of page which page id = 43 .

I wish you the success and I will recommend this theme ..

April 13, 2013 at 1:02 am #6921

Sakin
Keymaster

You can do same for header and footer.
#branding, #site-generator { background: url("http://www.hajzee.com/wp-content/uploads/white80.png") repeat scroll left top transparent; }

Yes in Catch Box text appears below the logo. Why don’t you just make the logo with the text and problem solved.

Hide the post meta like tags and categories.
footer.entry-meta { display: none; }

April 13, 2013 at 11:03 am #6932

standardman
Member

thank u .. shukriyaa bhaayyaaa

November 30, 2013 at 12:42 am #17748

rbrt_bene
Member

Hy Sakin,

I have a similar question, Is there a way to make the content background, header and footer to have opacity of 0.8 for example? But doing that without uploading any picture, with CSS code?

I would need that for this website: http://www.biorg.ro/wordpress

I need basically the black background to be slightly transparent.

Thank you in advance,

Robert

November 30, 2013 at 11:08 am #17763
Sakin
Keymaster
@rbrt_bene: You can add the following CSS in “Appearance => Theme Options => Custom CSS” box.
```
.site { background-color: transparent; }
/* For Header */
#masthead { background: rgba(0, 0, 0, 0.7); }
/* For Main */
#main { background: rgba(0, 0, 0, 0.7); }
/* For Footer */
#site-generator { background: rgba(0, 0, 0, 0.7); }
```
November 30, 2013 at 12:19 pm #17764

rbrt_bene
Member

Dear Sakin,

Thanks for your feedback. It works fine for header and footer area but for the main area you gave me the same code as for the header. Can you make an update please?

Thanks,

Robert

December 1, 2013 at 12:09 am #17791

Sakin
Keymaster

@rbrt_bene: I have just correct the code. Please check in.

December 1, 2013 at 1:36 pm #17815

rbrt_bene
Member

It works perfectly.

Thank you for your support.

Robert

May 18, 2014 at 12:33 am #31175

Ryan415
Member

Sakin

I am using this custom css for transparency on my site:

http://rockymountainbrushcompany.com/

.site { background-color: transparent; }
/* For Main */
#main { background: rgba(0, 0, 0, 0.7); }

Its working fine for the most part but I would like it so only the “featured content” area is transparent.

Currently, the featured content is transparent but the small area below the menu and above the homepage headline is only showing the background image, and I would like that small area to be dark brown like the far right and let sides of the webpage.

I am also wondering why the logo becomes slightly transparent when hovering the mouse over it.

One more question:

How can I go about changing the font type and color for the featured content section?

Thanks

Ryan

May 18, 2014 at 12:39 am #31176

Ryan415
Member

One more question:

The featured content images, they are not evenly placed on the featured content.
The image on the left is very close to the edge while the image on the right is further from the edge. How can I adjust the location of the featured content images so that they all are placed evenly on the page?

Thanks

Ryan

May 18, 2014 at 6:46 pm #31232
Sakin
Keymaster
@Ryan415: You can add the following css.
```
/* For Transparent Background */
.home #main { background-color: transparent; }
/* For Center Image */
#featured-post .wp-post-image { margin: 0 auto; }
```
May 18, 2014 at 9:59 pm #31244

Ryan415
Member

Hi Sakin

The “center image” custom css works well however the transparent css didnt.
I would like the area pointed to with the green arrows in the image to be the same “non transparent” brown as the sites logo. I want the main featured content area to remain transparent as it currently is.

Also, for the centered images in the featured content area, when I hover my mouse over the area next to each image, I can click the actual image, do you know how I can make it so the image is only clickable when the mouse is placed directly over the image?

Thanks

Ryan

May 19, 2014 at 10:00 am #31283

Sakin
Keymaster

Hi Ryan,

For transparent then try the following css.
.home #main { background: none transparent; }

The one with the arrow cannot be made made brown if you want to make other transparent. As this is margin top of Homepage Message. You can remove that by adding the following css.
#homepage-message { margin-top: 0; }

October 13, 2014 at 6:46 pm #45721

valenza79
Member

Hi,
I have the same issue regarding the sidebar opacity by using :

background-color: transparent;
opacity: 0.2;filter:alpha(opacity=20);

But it is the contents in the sidebar which are in alpha 20%
Is anyone could help me please? Thank you very much for your support.

Here is the CSS code :

#sidebar {
float: right;
width: 360px;
overflow:hidden;
padding-top: 0px;
margin-left:-1px;
background-color: transparent;
opacity: 0.2;filter:alpha(opacity=20);
}

#sidebar .widget {
margin:0 0 2px;
padding:0 15px 15px;
}

#sidebar div:last-child {
/*border-bottom:0 none;*/
}

.widget h3.title {
color: #3f4247;
margin: 0;
font-family: Lato;
margin:0 0 15px;
font-size: 18px;
font-weight: lighter;
}

.widget ul { clear: both; line-height: 1.7; }
.widget ul li { list-style-type: none; }
.widget ul ul { border-top: none; margin: 0; padding: 0; }
.widget ul ul li { border: none; }
.widget select {width:100%; }
.widget #cat, .widget select {
/*border: 1px solid #cdcfd4; */
color: #333333;
display: inline;
float: left;
line-height: 1.5;
padding: 3px;
width: 100%;
margin:0 0 14px;
font-size:12px;
}
.widget_tag_cloud a {line-height:1.3em; font-weight:normal; font-weight:normal; margin-right:7px; }
.side_ad { margin: 10px; }
Author

Posts