Jason-x Posted December 24, 2013 Share Posted December 24, 2013 (edited) I posted a screenshot of my layout a few days ago.. since then i had a few people message me asking how to make bars so this is how i do mine, their probably is a easier way but this works for me First make a folder called css inside that folder create a css file call it what you want. example.css add this code to the css file you just made You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. next open header.php find this You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. replace it with You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. The end result will be http://puu.sh/5XuPc.png if you want different color fills for your bars in the css file you made find You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. copy it then paste it under the } part change the .barcolor to something like .barred you will have You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. finally in header.php find the part like this You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. then change it to this You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. hope this helps you guys out with your css bars =) Edited December 25, 2013 by Jason-x Quote Link to comment Share on other sites More sharing options...
WarMad Posted December 25, 2013 Share Posted December 25, 2013 nice going to try it out later Quote Link to comment Share on other sites More sharing options...
WarMad Posted December 25, 2013 Share Posted December 25, 2013 added them it works nice thanks looks a lot better then what comes with mccodes Quote Link to comment Share on other sites More sharing options...
KyleMassacre Posted December 25, 2013 Share Posted December 25, 2013 added them it works nice thanks looks a lot better then what comes with mccodes Use your imagination with this too to make your own custom colors. There are sites that can style CSS colors for gradients and such. I think even jquery has some "progress bars" that you can even use too Quote Link to comment Share on other sites More sharing options...
Guest Posted December 25, 2013 Share Posted December 25, 2013 Use your imagination with this too to make your own custom colors. There are sites that can style CSS colors for gradients and such. I think even jquery has some "progress bars" that you can even use too jQuery UI does I believe. Some resources I use http://www.colorzilla.com/gradient-editor/ Quote Link to comment Share on other sites More sharing options...
Jason-x Posted December 25, 2013 Author Share Posted December 25, 2013 http://puu.sh/5YvCV.png what a little css to the codes above can do some good sites to use for font/text http://csstxt.com/ pretty much everything else http://css3generator.com/ Quote Link to comment Share on other sites More sharing options...
WarMad Posted December 25, 2013 Share Posted December 25, 2013 how would you add the rounded edges like that Quote Link to comment Share on other sites More sharing options...
Jason-x Posted December 25, 2013 Author Share Posted December 25, 2013 in the css file you made in .headbars where it says You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. below that add You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. then where it says You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. change that to You're unable to view this code. Viewing code within this forum requires registration, you can register here for free. in the .header change the 5s to say 8 then .headerbars span change the 5s to say a 6 (they will always have to be smaller number than the .header sicne its a smaller div Quote Link to comment Share on other sites More sharing options...
WarMad Posted December 26, 2013 Share Posted December 26, 2013 (edited) stopped working Edited May 4, 2016 by WarMad doesnt work anymore Quote Link to comment Share on other sites More sharing options...
WarMad Posted May 4, 2016 Share Posted May 4, 2016 hmmm all i can see is the black bar is there anything i can do to fix that? Quote Link to comment Share on other sites More sharing options...
WarMad Posted May 24, 2016 Share Posted May 24, 2016 Is there a way to make this where the bars done get longer if I have extra of anything say maxenergy is 30 and I have 50 I don't want it to go over Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.