Need Help on Changing Banner to Image

  • Hello there, the title seems quite vague so I will make it considerably easier for you to understand briefly.


    https://ibb.co/cODBQR (I couldn't upload the image normally for some reason so sorry about that, to clarify it is a secure link hence the s so there's no need to be reluctant clicking it).


    In the image above, where the header is I would like to add an image however I can't seem to find out how to. I have checked the web left to right yet I cannot seem to find any tutorials on doing so. Any help would be greatly appreciated thanks!

  • Hello,


    Do you want to add a background image in the header ?

    If yes, can you tell me which image you want to add please ? I will provide you the full code to add in your website administration for this :)

  • If you could add this:

    https://orig00.deviantart.net/…_by_radojavor-d6eimzy.jpg


    That would be absolutely splendid and yeah I did mean add an image to the back, I couldn't seem to find anything anywhere regarding how to add it :(


    I know this is completely different to the topic, but i was wondering if you knew how to get this style layout:

    [Blocked Image: https://gyazo.com/143bedf075872c485930a9225d6f74f1.png]

    https://gyazo.com/143bedf075872c485930a9225d6f74f1


    Many clans that have websites on the same game that I play have this same layout and I was wondering if there's a style anywhere that they may use? It's the same version of woltlabs that I use (3.0.1 I believe). If you have no idea how to do this don't worry about it but once again thank you with the help with the banner! :D


  • Ok, so to add this image as header background, just add this CSS code in your style settings :


    Code
    .pageHeaderFacade {
    background: url(https://orig00.deviantart.net/816e/f/2013/202/4/0/legio_by_radojavor-d6eimzy.jpg) center no-repeat;
    background-size: cover;
    }

    I added the "center" parameter, because by default it's "top", try it, i think it's better in middle :)


    You are using the latest version of the WoltLab forum, and in the screenshot you show us, the website is using the 4.X version of the WoltLab forum, so you cannot have the same style.


    I can suggest you to go there to find the best style for your forum : https://www.cls-design.com/shop/index.php/Category/


    --------------------------------------------------------------------------------------


    I would like to make some suggestions to you :


    1. Delete this code in your CSS :


    Code
    .pageHeaderLogo {
    display: block; margin-left: 510px; margin-right: 400px; top: inherit; position: center;}

    Replace it by this one :

    Code
    .pageHeaderLogo {
    display: block; top: inherit; text-align: center;}



    Your logo will be perfectly centered :)

    position: center; doesn't exist in CSS, replace it by text-align:center;


    --------------------------------------------


    2. You have added anormal page size in your style, so if you are on a smaller screen or if you reduce the screen size, you can see th content is too wide and creates horizontal scrolling, see this image :




    To fix this, you must delete this code from you style :


    Code
    @media (min-width: 1025px) {
    .layoutBoundary {
    padding: 0 20px;
    min-width: 1500px;
    max-width: 1200px;
    }
    }

    and replace it by this one :

    Code
    @media (min-width: 1025px) {
    .layoutBoundary {
    padding: 0 20px;
    min-width: 1000px;
    max-width: 1400px;
    }
    }


    :)

  • I forgot to edit the class in my message containing the CSS code for your background image, so i edited my message with the correct code :)

  • I have added the element.style code to the CSS however I couldn't find the Media part in my CSS so I didn't mess with it, after adding the element.style, nothing has changed however my banner is centred!

  • I edited the code in my message, the correct one is :


    Code
    .pageHeaderFacade {
    background: url(https://orig00.deviantart.net/816e/f/2013/202/4/0/legio_by_radojavor-d6eimzy.jpg) center no-repeat;
    background-size: cover;
    }
  • Wow this is incredible thank you so much! Would it be possible to make the banner a bit bigger so you can see the image a bit better as a temporary style before I upload the new one?

  • Of course you can change the header size, just add this code in the CSS code i gave you : height: 400px;

    Change 400px by the height you want.


    So the result will be :


    Code
    .pageHeaderFacade {
    background: url(https://orig00.deviantart.net/816e/f/2013/202/4/0/legio_by_radojavor-d6eimzy.jpg) center no-repeat;
    background-size: cover;
    height: 400px;
    }


    With this code, your logo will not be centered vertically, so edit this code i give you earlier :

    Code
    .pageHeaderLogo {
    display: block;
    top: inherit;
    text-align: center;
    }

    Replace it by this one :

    Code
    .pageHeaderLogo {
    display: block;
    top: inherit;
    text-align: center;
    margin-top: 100px;
    }

    Adjust the "margin-top" with your own margin, depending on what you want. :)

  • Yes you can :)


    For the problem with the width of your page i mentionned you, you can adjust the size as as suggested in your style settings here :



  • So with this code:

    body {

    background-image: url('#{$style_image_path}background.jpg');

    background-color: #000;

    background-size: cover;

    background-attachment: fixed;

    }


    I replace it with the one you provided?

  • Yes, add the following CSS code in this new style, it should be fine :)


    CSS
    @media (min-width: 1025px) {
    .pageHeaderLogo .pageHeaderLogoLarge {
    width: 390px!important;
    height: 159px!important;
    }
    }
  • If im being honest, when I try to add that CSS I keep cocking up the website and making it come up with all those funky characters :/