Need Help on Changing Banner to Image

  • Would it be possible for you to squeeze your code into the default code? The default code is:


    /* Hardcoded Colors */


    $mainMenuButtonsBackground: #000;


    /* Base */


    Media only screen and (min-width: 1025px) {


    #pageHeaderPanel {

    position: relative;

    z-index: 299;

    }


    #pageHeaderUserPanel > .layoutBoundary {

    justify-content: flex-end;

    }


    .pageHeaderFacade > .layoutBoundary {

    padding-bottom: 40px;

    padding-top: 0px;

    }


    #pageHeaderUserPanel {

    background-color: rgba(0,0,0,0);

    position: absolute;

    }


    .pageContainer {

    min-width: $wcfLayoutMinWidth + 40;

    max-width: $wcfLayoutMaxWidth;

    margin: 0 auto 40px auto;

    padding-right: 20px;

    padding-left: 20px;

    }


    .pageHeaderFacade > .layoutBoundary {

    padding-left: 0px;

    padding-right: 0px;

    }


    html,

    body {

    height: inherit;

    }


    #pageHeaderUserPanel > .layoutBoundary,

    #pageHeaderPanel > .layoutBoundary {

    padding: 0;

    position: relative;

    }


    }


    body {

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

    background-color: #000;

    background-size: cover;

    background-attachment: fixed;

    }


    #main {

    background-color: $wcfContentBackground;

    }



    Media (min-width: 1025px) {


    .pageHeaderContainer {

    background-color: rgba(0, 0, 0, 0);

    position: relative;

    margin-top: 40px;

    padding-top: 0px;

    }


    .pageHeaderLogo > a {

    display: inline-block;

    padding: 0;

    min-height: 50px;

    }


    }


    /* Userpanel */


    #pageHeaderUserPanel {

    left: inherit;

    min-width: 0;

    }


    #pageHeaderUserPanel > .layoutBoundary {

    min-width: 0;

    }


    .userPanel > ul > li > a {

    padding: 0 10px;

    }


    .userPanelItems {

    background-color: $wcfHeaderMenuBackground;

    }


    .userPanelItems .loginLink {

    padding-left: 15px;

    padding-right: 15px;

    }


    .interactiveDropdown {

    position: absolute;

    top: 90px !important;

    }


    Media (max-width: 1024px) {


    .customSearch {

    display:none;

    }


    }


    .customSearch #userPanelSearchButton span:not(.icon) {

    display:none;

    }


    .customSearch a {

    height: 50px;

    width: 50px;

    display: inline-block;

    text-align: center;

    line-height: 50px;

    }


    Media (min-width: 1025px) {


    #pageHeaderSearch {

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    background-color: $wcfHeaderSearchBoxBackground;

    }


    .pageHeaderSearch {

    position: absolute;

    }


    .pageHeaderSearchInputContainer .pageHeaderSearchType {

    display: flex;

    height: 50px;

    }


    .pageHeaderSearchInputContainer .pageHeaderSearchInput {

    margin-left: 0;

    padding-left: 20px;

    flex-grow: 1;

    background-color: $wcfHeaderSearchBoxBackgroundActive;

    }


    .pageHeaderSearchInputContainer .pageHeaderSearchType > .button {

    max-width: 240px;

    min-width: 240px;

    padding: 4px 24px 4px 20px;

    width: 240px;

    box-sizing: border-box;

    }


    .pageHeaderSearchInputContainer .pageHeaderSearchType > .button:hover {

    background-color: $wcfHeaderSearchBoxBackgroundActive;

    }


    .pageHeaderSearchInputButton.button {

    width: 50px;

    }


    }


    Media (min-width: 1025px) {


    .pageHeaderSearchInputButton.button {

    width: 50px;

    }


    .pageHeaderSearchInputButton.button > .icon {

    font-size: 28px;

    height: 32px;

    line-height: 32px;

    width: 32px;

    vertical-align: -5px;

    }


    .pageHeaderSearchInputContainer .pageHeaderSearchInputButton {

    padding: 4px 0;

    }


    .customSearch a:hover {

    background-color: $wcfHeaderMenuLinkBackgroundActive;

    }


    }


    Media (max-width: 1024px) {


    .searchBarOpen .pageHeaderSearch {

    background-color: $wcfHeaderSearchBoxBackground;

    }


    }


    Media (min-width: 1025px) {


    #pageHeaderPanel {

    min-width: 0;

    border-bottom: 5px solid $wcfHeaderMenuLinkBackgroundActive;

    }


    }


    .tabularBoxTitle > header {

    padding-left: 0;

    padding-right: 0;

    padding-bottom: 0;

    border-bottom-width: 2px;

    width: 100%;

    }


    .wbbCategory.wbbCollapsibleCategory > header > h2 {

    flex-direction: row-reverse;

    justify-content: space-between;

    width: 100%;

    }


    .wbbCategory.wbbCollapsibleCategory > header > h2 > a {

    flex: none;

    background-color: $wcfTabularBoxHeadline;

    padding: 5px 10px;

    color: $wcfContentBackground;

    font-size: 16px;

    }


    .wbbCategory.wbbCollapsibleCategory > header > h2 + small {

    background-color: $wcfTabularBoxHeadline;

    padding: 1px 10px;

    color: $wcfContentBackground;

    margin-left: 0;

    }


    .wbbCategory.wbbCollapsibleCategory > header > h2 > .collapsibleButton {

    margin-right: 0px;

    }


    /* Second */


    Media (min-width: 1025px) {


    .wbbBoardList .wbbDepth2.wbbCategory:not(.wbbCollapsibleCategory) > header {

    padding-left: 16px;

    }


    }


    .wbbCategory.wbbDepth2:not(.wbbCollapsibleCategory) > header > h2 > a {

    background-color: $wcfTabularBoxHeadline;

    padding: 5px 10px;

    color: $wcfContentBackground;

    font-size: 16px;

    flex: none;

    }


    .wbbCategory.wbbDepth2:not(.wbbCollapsibleCategory) > header > h2 + small {

    background-color: $wcfTabularBoxHeadline;

    padding: 1px 10px;

    color: $wcfContentBackground;

    margin-left: 0;

    }


    /* Borderradius */


    Media (min-width: 1025px) {



    .pageHeaderSearchInputButton.button {

    border-radius: 0 2px 0 0;

    }


    #pageHeaderSearch {

    border-radius: 2px 2px 0 0;

    }


    .pageFooterCopyright {

    border-radius: 0 0 2px 2px;

    }


    .pageHeaderPanel {

    border-radius: 2px 2px 0 0;

    }


    .mainMenu .boxMenu > li:first-child,

    .mainMenu .boxMenu > li:first-child > a {

    border-radius: 2px 0 0 0;

    }


    .userPanelItems {

    border-radius: 2px;

    }


    .userPanel > ul > li:first-child.dropdownOpen > a,

    .userPanel > ul > li:first-child.open > a,

    .userPanel > ul > li:first-child:hover > a,

    .userPanel > ul > li:first-child > a:hover {

    border-top-left-radius: 2px;

    border-bottom-left-radius: 2px;

    }


    .userPanel > ul > li:last-child.dropdownOpen > a,

    .userPanel > ul > li:last-child.open > a,

    .userPanel > ul > li:last-child:hover > a,

    .userPanel > ul > li:last-child > a:hover {

    border-top-right-radius: 2px;

    border-bottom-right-radius: 2px;

    }


    .customSearch a:hover {

    border-top-right-radius: 2px;

    }


    }


    /* Mobile Menu */


    Media (max-width: 1024px) {


    .mainMenu::before,

    .userPanel::before {

    background-color: $wcfButtonPrimaryBackground;

    }


    #pageHeaderPanel {

    right: 50px;

    }


    #pageHeaderPanel,

    #pageHeaderUserPanel {

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

    background-color: #000;

    background-size: cover;

    background-attachment: fixed;

    }


    .mainMenu.pageMenuMobileButtonHasContent::after,

    .userPanel.pageMenuMobileButtonHasContent::after {

    border: 2px solid $mainMenuButtonsBackground;

    }


    .mainMenu::before,

    .userPanel::before {

    background-color: rgba(0,0,0,0);

    }


    #pageHeaderUserPanel > .layoutBoundary,

    #pageHeaderPanel > .layoutBoundary {

    background-color: $wcfHeaderMenuBackground;

    }


    .menuOverlayItemLinkIcon,

    .menuOverlayItemLink {

    background-color: rgba(0, 0, 0, 1);

    }


    }


    /* Boardlist Icons */


    Media (min-width: 769px) {


    .wbbBoardList .wbbCategory .wbbDepth2.wbbBoardContainer > .wbbBoard > .icon {

    margin-left: 16px;

    }


    }


    .wbbBoard .icon::before {

    color: $wcfContentLink;

    }


    .wbbBoard .fa-folder-open-o::before {

    content: "\f0e6";

    }


    .wbbBoard .fa-folder-open::before {

    content: "\f086";

    }


    .wbbBoard .fa-folder-o::before {

    content: "\f0e5";

    }


    .wbbBoard .fa-folder::before {

    content: "\f075";

    }


    /* Mainmenu Dropdown */


    .mainMenu .boxMenu .boxMenuDepth1 {

    min-width: 120px;

    box-shadow: 0 3px 5px transparentize($wcfHeaderMenuDropdownBackground, 0.85);

    }


    /* Buttons */


    button,

    input[type="button"],

    input[type="reset"],

    input[type="submit"],

    .button,

    a.button {

    &:not(.inputPrefix) {

    text-transform: none;

    }

    }


    /* Tabs */


    .tabMenu > ul > li > a {

    font-size: 16px;

    }


    .tabMenu > ul > li::before,

    .menu > ul > li::before {

    border-top-width: 2px;

    }


    woltlab-quote,

    .quoteBox {

    box-shadow:

    5px 0 0 $wcfContentBorder inset,

    -1px 0 0 $wcfContentBorderInner inset,

    0 1px 0 $wcfContentBorderInner inset,

    0 -1px 0 0 $wcfContentBorderInner inset;

    }


    /* Experimental stuff */


    .mainMenu .boxMenu > li > a,

    .mainMenu .boxMenu .boxMenuDepth1 > li a,

    .wbbBoardList .wbbCollapsibleCategory h2 > a,

    .wbbBoardList .wbbCollapsibleCategory h2 > a,

    .userPanel > ul > li > a {

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    font-weight: bold;

    }


    Media only screen and (min-width: 769px) and (max-width: 1024px) {


    .pageHeaderContainer {

    background-color: $wcfFooterCopyrightBackground;

    }


    }


    /* Mainmenu */


    .mainMenu .boxMenu > li > a {

    padding: 0 20px;

    text-shadow: 0 1px 1px rgba(0,0,0,0.15);

    }


    .mainMenu .boxMenu .boxMenuDepth1 {

    display: none;

    }


    .mainMenu .boxMenu li.boxMenuHasChildren:hover .boxMenuDepth1 {

    display: block;

    }


    Media only screen and (min-width: 1025px) {


    .mainMenu {

    flex-basis: calc(100% - 70px);

    max-width: calc(100% - 70px);

    }


    }


    .mainMenu .mainMenuShowPrevious > .icon,

    .mainMenu .mainMenuShowNext > .icon {

    background-color: $wcfHeaderMenuLinkBackgroundActive;

    color: $wcfHeaderMenuLink;

    border-radius: 30px;

    font-size: 18px;

    height: 20px;

    line-height: 20px;

    width: 20px;

    box-shadow:

    0 0 5px $wcfHeaderMenuBackground,

    0 0 15px $wcfHeaderMenuBackground;

    }


    .mainMenu .mainMenuShowPrevious > .icon {

    margin-left: 10px;

    }


    .mainMenu .mainMenuShowNext > .icon {

    margin-right: 10px;

    }


    .mainMenuShowPrevious {

    background: linear-gradient(to left, transparent 0%, $mainMenuButtonsBackground 75%) !important;

    }


    .mainMenuShowNext {

    background: linear-gradient(to right, transparent 0%, $mainMenuButtonsBackground 75%) !important;

    }


    /* Sidebar */


    Media only screen and (min-width: 769px) {


    .messageSidebar {

    flex: 0 0 220px;

    }


    .messageSidebar + .messageContent {

    flex-basis: calc(100% - 250px);

    max-width: calc(100% - 250px);

    }


    }


    #pageHeaderUserPanel {

    background-color: rgba(0,0,0,0);

    }


    /* Content / Sidebar right collapsed */


    .sidebar.boxesSidebarRight.sidebarRightCollapsed {

    display: none;

    }


    .layoutBoundary > .content.sidebarRightCollapsed:not(:last-child) {

    flex-basis: calc(100%);

    max-width: calc(100%);

    }


    /* Fix broken Menu-Nav */


    .mainMenu .mainMenuShowPrevious.active,

    .mainMenu .mainMenuShowNext.active {

    z-index: 100;

    }

  • I'm really sorry to ask so much from you its just I tried five times (having to start over with the style) and I seem to be running into the same error each time due to my lack of knowledge regarding CSS :(


    If you're unable to do it, don't worry at all I'll just wait for my friend that knows what he is doing to wake up tomorrow

  • Probably would've helped if I didn't disable the protection haha! As the final question, no more after this as I have no more questions I promise! Is there any way of me moving this:

    [Blocked Image: https://gyazo.com/21cc071bdcc58a1754833738a814328e.png]

    https://gyazo.com/21cc071bdcc58a1754833738a814328e


    to the top right or resting just above the search bar here:

    [Blocked Image: https://gyazo.com/2892dd9ec8e4f2c276dd49975ea567da.png]

    https://gyazo.com/2892dd9ec8e4f2c276dd49975ea567da


    The only reason I ask is because it looks a little bit weird having it be over the corner

  • The easiest way is to hide it with CSS :

    Code
    1. #footerNoteItem {
    2. display: none;
    3. }

    But i would not do that, as it's a respect for they work on this free theme, but you could edit it and add for example "Customized by ..." :)




  • Out of respect for CLS I'll let people know where I got it from. But most importantly I'll let them know the saviour of the website and God of Woltlabs is! You have been an absolutely massive help and I greatly appreciate it!!! Have a wonderful Christmas!