Hello, today I was assisted by the developer Kevin who kindly helped me get a transparent theme going! Being transparent there are a lot of things that became too dark or too light. The thing is, I'm new to mybb and need some major help with instructions on how to do things.
- The text color is obviously hard to see and that would be the first thing needed to be edited
. It needs to stand out and grab people's attention!
- Also the NTNGaming above the first forum board is way too dark.
I included a picture to explain further. I'm welcome to any other suggestions! Just make sure to explain how to do it.
- Browsing the forum is a little eye straining. Also the transparency continues into posting and even past bodies.
Link to website is: www.ntngaming.net/mybb
[b]Please not that this is my testing website and the reason I made this post is to make this look better so I can make it my official site. The look of the site is neat, but functionally it's not so good at the moment.
I would recommend you to use a .PNG semi-transparent image instead of the css opacity tag.
That tag makes the whole div opaque, and what it contains. the image will solve the problem of the links that aren't seen in a good way.
(2012-09-04, 01:00 PM)Trinit Wrote: [ -> ]I would recommend you to use a .PNG semi-transparent image instead of the css opacity tag.
That tag makes the whole div opaque, and what it contains. the image will solve the problem of the links that aren't seen in a good way.
Trinit, the whole div is not opaque. Only the background is set to rgba() (CSS3), so the text and etc remains unchanged. Opacity was not used.
(2012-09-04, 07:19 PM)KevinVR Wrote: [ -> ] (2012-09-04, 01:00 PM)Trinit Wrote: [ -> ]I would recommend you to use a .PNG semi-transparent image instead of the css opacity tag.
That tag makes the whole div opaque, and what it contains. the image will solve the problem of the links that aren't seen in a good way.
Trinit, the whole div is not opaque. Only the background is set to rgba() (CSS3), so the text and etc remains unchanged. Opacity was not used.
See how the picture I included below has a color scheme that is interested yet not hard on the eyes? I really need to change some colors to make it appealing and easy on the eyes like that website did with their theme.
I also used CSS3 to make the container opaque, and it made everything inside opaque. Just test it on your containers and you'll see the forumbits become opaque too. Anyway, in the image you attached is simpler because the background is pretty clean, aware of many distracting elements - bright blue and white are easy to read on dark blue/black (like the attachment)
(2012-09-04, 10:45 PM)Trinit Wrote: [ -> ]I also used CSS3 to make the container opaque, and it made everything inside opaque. Just test it on your containers and you'll see the forumbits become opaque too. Anyway, in the image you attached is simpler because the background is pretty clean, aware of many distracting elements - bright blue and white are easy to read on dark blue/black (like the attachment)
How can I easily change test color?
Change the a:link color from #555555 to something darker (like #050505). Same with a:visited. Those will be in the global.css.
The breadcrumb (or navigation) at the top can be changed by finding .navigation and changing the color. Right now it's at #000000. Make it lighter. Example: #f1f1f1
Alright it said it saved. I've also changed the background too. I'm not sure how long it will take the a:link colors and such to change, for some reason it never saves when I do it. Sometimes it does but it takes a while.
Thanks for the reply Trinit. I have changed the background image. I'm not exactly sure how to do what you said. I remember the last time Kevin tried editing the containers and nothing changed since the theme I'm using doesn't work with containers. I'm not sure though, could you explain more?
At the moment I have to take the car and go to my uncle's house so I'll try to explain briefly, but when I will be back I'll be more clear.
A simple way is to open a 10px x 10px photoshop file - white background - opacity (as an instance 70%) and save it as .png
Then go to your global.css in the #container change background:url(images/yourfolder/yourpngfile.png);
(2012-09-05, 07:11 AM)Trinit Wrote: [ -> ]At the moment I have to take the car and go to my uncle's house so I'll try to explain briefly, but when I will be back I'll be more clear.
A simple way is to open a 10px x 10px photoshop file - white background - opacity (as an instance 70%) and save it as .png
Then go to your global.css in the #container change background:url(images/yourfolder/yourpngfile.png);
That would be the exact same thing as putting
#container
background-color: rgba(255, 255, 255, 0.3);