Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Ilkharnos on December 01, 2017, 06:58:56 AM

Title: Adding CSS Backgrounds (windowbg)
Post by: Ilkharnos on December 01, 2017, 06:58:56 AM
Hello,

I would like to add a few more CSS background styles to the windowbg family, like windowbg4 or windowbg5 for example. I created their image files but I don't know how to integrate them to the codes.

What I really need is to make Simple Portal to recognise them as a body class style when I create (or modify) a block. There are currently windowbg1, 2 and 3 in the list.

I would be grateful if you can assist.
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: AllanD on December 01, 2017, 09:39:04 PM
not much a coder but have you tried something like





.windowbg2 {

    color: #fff;
    background: url(../images/theme/backdrop.png);
}



Just change the number to the window bg you want to change and the image url.
and change it in the style sheet
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: Deaks on December 02, 2017, 02:37:06 AM
Quote from: Ilkharnos on December 01, 2017, 06:58:56 AM
What I really need is to make Simple Portal to recognise them as a body class style when I create (or modify) a block. There are currently windowbg1, 2 and 3 in the list.

Allans suggestion is pretty much what you need to do create them in the index.css with a background set as the images like in his suggestion, as for making SP pick them up may be better asking at simpleportal.net for that one.
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: Ilkharnos on December 02, 2017, 02:49:14 AM
I tried AllanD's suggestion but I had no luck with SP. Maybe I should discuss this further in SP section.

Thank you very much for the assistance.
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: Deaks on December 02, 2017, 02:52:28 AM
what have you tried fully besides adding the background to the css?
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: Ilkharnos on December 02, 2017, 04:32:52 AM
I tried creating new lines for windowbg4 and windowbg5 in index.css, linking them to new png images, just like how AllanD suggested. I didn't try anything further. When I checked them in SP's add/modify block screen, I didn't see any changes. Windowbg4 or 5 wasn't there so I couldn't use them.
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: AllanD on December 02, 2017, 09:30:15 AM
Trying to remember where windowbg 4 and 5 are used so I can look at the css.
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: Gwenwyfar on December 02, 2017, 10:30:05 AM
Quote from: AllanD on December 02, 2017, 09:30:15 AM
Trying to remember where windowbg 4 and 5 are used so I can look at the css.
They are not used anywhere, he's adding new classes. The html also needs to have them for it to work. CSS "recognizes" HTML, not the other way around, so you need to add these new classes to the portal HTML code (or wherever you wish to use it).
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: AllanD on December 02, 2017, 10:42:58 AM
That's why I don't remember them I thought SMF only used up to windowbg3. Thanks for posting.
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: Ilkharnos on December 02, 2017, 12:18:51 PM
Quote from: Gwenwyfar on December 02, 2017, 10:30:05 AM
They are not used anywhere, he's adding new classes. The html also needs to have them for it to work. CSS "recognizes" HTML, not the other way around, so you need to add these new classes to the portal HTML code (or wherever you wish to use it).

Like I guessed, but I don't know how to do it. Can you give any assistance? I would be grateful.
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: Gwenwyfar on December 02, 2017, 12:22:04 PM
I'm not familiar with Simple Portal. If it has a selection of windowbg types, maybe you can see where that is and add the 4 and 5 (along anything that may be linked to that selection).
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: Ilkharnos on December 03, 2017, 03:25:35 AM
Thank you. I will examine related portal files.
Title: Re: Adding CSS Backgrounds (windowbg)
Post by: Ilkharnos on December 04, 2017, 05:14:58 AM
I was able to solve it by adding necessary lines to index.css, naming them windowbg4 and windowbg5, than typing these exact names to SP's "Custom Body Class" input box in modify/edit block section.

The solution was in front of my eyes, but somehow I missed it.