How to make header and pages transparent?
-
I ve been using for sometime already your Nishita theme and I like its simplicity.
Some days ago, I tried to renew the look to make it even more simple.Id would like the header box, and all pages to be TRANSPARENT and change the TEXT COLOR TO BLACK. Basically I want to remove all black boxes and have the text placed directly on the GIF background… also… how can I “play” ramdomly several GIF files one after the other as background images… ?
How can I make this happen..? you can check my blog page here:
http://www.laurafongprosper.comHope my questions are clear enough and that you can help me solve these problems.
Thnx in advance
LauraThe blog I need help with is: (visible only to logged in users)
-
Hi Laura, this CSS should make the main black text box and comment box background transparent instead of black:
.main-inner, .main, #comments { background-color: transparent; }You might want to think about changing the text colour to black instead of grey, since that would make it not visible against the black part of your background image, like the parts I circled here:
To experiment with the text colour you could use this CSS, while varying the colour code:
.main-inner .hentry { color: #999999; }how can I “play” ramdomly several GIF files one after the other as background images… ?
Since you can only assign a single background image you could try creating a single animated GIF from your collection and then upload that one.
-
And this should take care of the black background behind the header and navigation bar:
#header { background: none; } #nav li.current_page_item > a, #nav li.current-menu-ancestor > a, #nav li.current-menu-item > a, #nav li.current-menu-parent > a, div.menu ul li.current_page_item > a, div.menu ul li.current-menu-ancestor > a, div.menu ul li.current-menu-item > a, div.menu ul li.current-menu-parent > a { background-color: transparent; } -
Thank you soooo much for your answer.
It worked.
Now the pages are transparent and
I made the GIF bigger to not have any black brackground visible…The only thing I couldnt do was to change all letters to black.
I tried the code you gave, but its not working
Do you know whats wrong…?
Thank you very much
L:)
-
-
It worked.
Great!
The only thing I couldnt do was to change all letters to black.
Looks like it’s working to me. The code I gave you was for a dark grey, since I didn’t think black would be legible on some very dark parts of your background image. If still you want black, the hex code is #000000:
.main-inner .hentry { color: #000000; }It’s going to be quite tricky to find a shade that’s easy to read against your multi-coloured background – you may find you want to add back a background colour for legibility, perhaps a transparent white. For example, you might want to try this, replacing the equivalent pieces of code I gave you earlier:
.main-inner, .main, #comments { background-color: rgba(255,255,255,0.2); } .main-inner .hentry { color: #000; }This still lets your background image through at 80%, while making the text on top much more readable.
-
Kathryn…!
You are so kind
THANK YOU VERY MUCH FOR ALL YOUR HELPAt the end I will go with the black text on transparent… I changed the colors of my background a bit so now the black text is more noticeable.
One last request,
How can i make ALL TEXT black..? The Title of the blog, the sub titles, the pages, sub pages EVERY TEXT !!! I want black, and as it is now its only the text on the pages… sorry for all these requests but I wasnt able to do it by myself. Hope you can help me this time… Thanx in advance.
Cheers,
Laura -
How can i make ALL TEXT black..? The Title of the blog, the sub titles, the pages, sub pages EVERY TEXT !!!
You’ll need to first find each element you want to target. A good way to do that is using a browser inspector, which is an extremely handy tool built into many browsers, including Firefox and Chrome. Here are some very helpful posts that will help you customize your site with CSS:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
For example, if you right-click (control-click on Mac) the page titles, you’ll see that they have the class page-title. That means you can target them in your CSS like this:
.page-title { color: #000000; }You can do this for each element you’d like to target.
-
Kathryn,
Your help was great thnx.
I managed to change the look of my site.
The problem now seems that I can’t save anything on my CSS.
do you know whats the problem.Ive been trying to remove the header on one of my pages, and I am doing everything possible but my CSS cannot save any changes.
What should I do to remove the header on an specific page…?
Thnx
Laura
-
There was a temporary problem with the Customizer earlier today but it should now be fixed, sorry about that!
What should I do to remove the header on an specific page…?
If you’re referring to the graphic header image itself, the format would be like this to remove it on specific pages:
.page-id-897 #header-image, .page-id-xxx #header-image, .page-id-xxx #header-image { display: none; }Replace the xxx with the specific page ID, which you can grab from the browser address bar when you’re editing the post, or by looking in the
<body>tag in the browser source on that page. -
you are the best…!!!
i was doing the same for over 10 hrs. last night
and couldnt make it
and now that you told me the exact same thing i was doing
it worked..!!!
great
THNXL
- The topic ‘How to make header and pages transparent?’ is closed to new replies.
WordPress.com Forums 