HowTo - Change Background with BBLog - Better Battlelog Forums #1849

Sitemap
Post edited 6 x times, last by
Topicstarter
With BBLog 2.0 you can change the Background Image and Color of Battlelog like you want. For this you have to go to BBLog Center -> Minor Improvement -> Change Battlelog Background.

Many BBLog user asked, how they have to include the CSS Code, so i will write here a tutorial based on my german version.

There are 2 different ways how you can use it, a simple and a more complicated way.

1.) Simple way:

Just include ONLY the URL of you Graph into the Text Area and Save it.
This is easy but have one problem. Yout Background Image will be repeated ongoing.

Check for an Example: (Just include following line into text area)
http://battlelog-cdn.battlefield.com/public/comcenter/unread.gif

2.) Customizable, complicated way:

On this way you can customize your background more than on the first way, but you have to do more things. You have to include a correct CSS Code, otherwise it won't work like you want. i have written here a description wich is the easiest way to generate this code.

Most important point: the " and ' signs you just need by the Image URL, nowhere else.

2.1.) Background Color:

next we will define the background color. for this you should use the HEX Code. For Example
#ffffff
for white,
#ff0000
for red or
#000000
for black and else. Photoshop, GIMP and other graphic/photo editors can help you to find the right HEX Code. You can use the names for colors too, for example
red, green, blue
and else. if you want to learn more about this topic please read:
http://en.wikipedia.org/wiki/Web_colors


2.2.) Background position:

by the next step you have to define the position of your background image. here you should following the Rule
HORIZONTAL VERTICAL
because if you use only dates in pixel for the position, it will ALWAYS follow this rule!

for example: if you write 200px 100px, the left top corner of the image will be positioned 200px on the RIGHT SIDE and 100px UNDER the TOP of the left top corner of the browser window.
Example:
http://temp.elchalarm.net/bblog-background/position/200px_100px/


if you write 0px 0px it will exactly begin in the left top corner of the browser.
Example:
http://temp.elchalarm.net/bblog-background/position/0px_0px/


if you write -300px -200px it will begin 300px on the LEFT SIDE and 200px OVER the TOP of the left top corner of the browser window.
Example:
http://temp.elchalarm.net/bblog-background/position/-300px_-200px/


you can use words
left
,
center
or
right
for horizontal position and
top
,
center
or
bottom
for vertical position too. but dont forget the Rule, first horizontal position, secound vertical. The last option is the command
fixed
. This command let the background image fixed on the left top corner of the browser, so if you have a long page and you're scrolling, the background image will follow the window.

2.3.) Background Repeat:

Last topic before we arrive to the image itself, is repeating of the image. generally all browsers repeating the image in the X and Y direction. if you dont want this, you have to use the commands
repeat-x
,
repeat-y
or
no-repeat
. the command
repeat
is the generall setting of the most browsers, so its not important.

repeat-x only repeat the background image in the X Direction, repeat-y only in the verticality.

here few examples for you:
Repeat:
http://temp.elchalarm.net/bblog-background/repeat/repeat/

No Repeat:
http://temp.elchalarm.net/bblog-background/repeat/no-repeat/

Repeat in X:
http://temp.elchalarm.net/bblog-background/repeat/repeat-x/

Repeat in Y:
http://temp.elchalarm.net/bblog-background/repeat/repeat-y/


2.4.) Background Image:

Now the Background Image. You have different ways to include it but you have alway to write the full path to the graphic. so you have to use one of these commands, adress is a space holder for the path:
url("ADRESS")
url('ADRESS')
url(ADRESS)


Full Examples how it could work:

i have created for you some examples so you can test it how it could work.
for this i took the background from bf3stats.com

#ffffff -200px 400px no-repeat url("http://files.bf3stats.com/img/bf3/sitebg.jpg")
#ffffff fixed no-repeat url("http://files.bf3stats.com/img/bf3/sitebg.jpg")
#ffffff center top no-repeat url("http://files.bf3stats.com/img/bf3/sitebg.jpg")
#ffffff center top repeat url("http://battlelog-cdn.battlefield.com/public/comcenter/unread.gif")

Hope i could help you. have fun by using the background function from BBLog.
If you want to learn more, please read:
http://www.w3schools.com/cssref/css3_pr_background.asp
Nice Tut. Please move it to other section. Its not a request.
Forget it. It's an announcement :-) All is ok.
Topicstarter
updated - codes and tutorial are working again.
Can someone make a YouTube tut?
Topicstarter
did you already read my tutorial? that should help and answer all you questions. i won't make a tutorial video because it has to many possibilities which i won't reflect.