Multiple images in banner . . .

[Forever Sunshine]

Forum URL: crapthenameescapesme.proboards.com/



So, I'm wondering if there is a way to add multiple images to a banner in any given theme? Right now we can add only one. Also, I'm wondering if it is possible to position it wherever we want?

And to be able to do the same with images in category or board titles as well.


Right now, in Themes> Advanced Styles & CSS> Visual Editor> Header > Forum Banner > Banner Image, there is an area "Background Position". It holds a multitude of positions in which to place the image uploaded. It would be cool if it included a few more like to position it twice or more in the banner such as Upper left for one image and right corner for the other image, or lower left and right corners, etc.



But, it would be nice if we could add more than one image.

Possible?





Thanks

[Tumbleweed]

Mar 6, 2014 13:30:21 GMT -8 Forever Sunshine said:

Forum URL: crapthenameescapesme.proboards.com/



So, I'm wondering if there is a way to add multiple images to a banner in any given theme? Right now we can add only one. Also, I'm wondering if it is possible to position it wherever we want?

And to be able to do the same with images in category or board titles as well.


Right now, in Themes> Advanced Styles & CSS> Visual Editor> Header > Forum Banner > Banner Image, there is an area "Background Position". It holds a multitude of positions in which to place the image uploaded. It would be cool if it included a few more like to position it twice or more in the banner such as Upper left for one image and right corner for the other image, or lower left and right corners, etc.



But, it would be nice if we could add more than one image.

Possible?





Thanks

You can add an image in your logos spot as well as your banner area.

Logo: Admin> Themes> Theme Settings>Images
Banner: Admin> Themes> Advanced Styles & CSS> Visual Editor>Header(top)>Forum Banner>Banner Image



But also, you could find this area in your wrapper template and add the blue:



<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
<div class="myimage1"></div>
</h2>
</div>


And then add some css for that image like so: (If you look on my Test Site I added a star on top of my banner. I still have the logo text there as well.)

<style>
.myimage1{
background-image:url(http://i50.tinypic.com/2qi7i2p.jpg);
background-repeat:no-repeat;
position:relative;
left: 100px;
width:30px;
height:25px;
z-index:1000;
}
</style>

[Forever Sunshine]

Tumbleweed. Thanks for replying. I know you can add an image through the visual editor. All my themes have a background for the banner included there. What I'd like is to use all the options the visual editor has to offer AND add more images to the banner that would lay on top of a background image added through the Visual Editor. I'd also like to position the image(s) individually wherever I want them such as in a specific corner, side, center, bottom center, etc just like can be done in the Visual Editor. Sometimes I have an image I'd like to use in two corners or four corners.

Will the codes above allow for this type of extensive options in placing the image? If so, do I add the first part in blue and then the second part at the bottom of the wrapper template? I'm really clueless when it comes to this stuff. LOL I haven't a clue how to judge how many px it takes to get it to the position I want within the banner. And what is z-index? Sometimes I need things explained in detail before I grasp it. I was hoping for more of an option like the visual editor provides in the Background Position area where I could just select the position I want for each individual image.

Sorry if I rambled; didn't have my coffee yet.

[Tumbleweed]

Mar 7, 2014 4:45:20 GMT -8 Forever Sunshine said:

Tumbleweed. Thanks for replying. I know you can add an image through the visual editor. All my themes have a background for the banner included there. What I'd like is to use all the options the visual editor has to offer AND add more images to the banner that would lay on top of a background image added through the Visual Editor. I'd also like to position the image(s) individually wherever I want them such as in a specific corner, side, center, bottom center, etc just like can be done in the Visual Editor. Sometimes I have an image I'd like to use in two corners or four corners.

Will the codes above allow for this type of extensive options in placing the image? If so, do I add the first part in blue and then the second part at the bottom of the wrapper template? I'm really clueless when it comes to this stuff. LOL I haven't a clue how to judge how many px it takes to get it to the position I want within the banner. And what is z-index? Sometimes I need things explained in detail before I grasp it. I was hoping for more of an option like the visual editor provides in the Background Position area where I could just select the position I want for each individual image.

Sorry if I rambled; didn't have my coffee yet.

I only posted the logo/banner options because some members use the logo area and don't know about the banner area and visa-versa and I couldn't view your site to see what you are using.

On that test site, I just had the css right in the wrapper template while I played with it so I could see where I was moving things but then you should put it at the bottom of your style sheet. 

You can position it however you want. On my test site (posted in prev. post) i switched out the stars for some corner decorative things each in one corner.

So my template is this:
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
<div class="myimage1"></div><div class="myimage2"></div>
</h2>
</div>

And css this:
.myimage1{
background-image:url(http://i58.tinypic.com/34ypmqh.jpg);
background-repeat:no-repeat;
position:relative;
top:-82px;
left: -19px;
width:86px;
height:78px;
z-index:1000;
}
.myimage2{
background-image:url(http://i59.tinypic.com/24v5qh2.jpg);
background-repeat:no-repeat;
position:relative;
top: -160px;
left:796px!important;
width:86px;
height:78px;
z-index:1001;
}

[Forever Sunshine]

That looks perfect Tumbleweed! Thanks so much. I think I get how I could add more now. I can open the site up for you if you need to see it but the default skin / theme doesn't have any effects in the banner.

I'll be playing with this now! Awesome!

Thanks again!

[Tumbleweed]

Mar 7, 2014 20:37:45 GMT -8 Forever Sunshine said:

That looks perfect Tumbleweed! Thanks so much. I think I get how I could add more now. I can open the site up for you if you need to see it but the default skin / theme doesn't have any effects in the banner.

I'll be playing with this now! Awesome!

Thanks again!

You're welcome and no need to open your site up for guests since I think you can work things out now. 

[♥ ℒʊ√ ♥]

Forever Sunshine, I like this idea.

And btw, I love your copy on your closed board requesting guests to join in. Very warm and inviting!

[Forever Sunshine]

LOL Hey ♥ ℒʊ√ ♥! This code isn't quite what I was looking for but it's a workaround. Like I said, I'd just like to be able to add multiple images to the banner in positions I want.

Awww! Thanks! Don't want to scare anyone off, ya know! LOL

Have a good night!

[♥ ℒʊ√ ♥]

Forever Sunshine, your copy does anything but scare people off. It sets a very welcoming tone.


Good night to you, too.

[Forever Sunshine]

Hiya Tumbleweed! Hope you've been well.

I've finally gotten around to using the code above for the multiple images in the banner. I've managed to get both images in and where I want them placed within the banner container. I've run into two small problems, however. It seems no matter where in the left position I adjust the images, a small portion of the right side of the image is cut off, like it's behind something.

Also, the insertion of the images has pushed the forum name to the top of the container. Again, it doesn't matter in which position I place the image(s), the forum name remains at the top instead of centered vertically and horizontally.

The board is not viewable to guests and the images were not inserted on the default theme so if you need access, please let me know. I'm grateful for whatever assistance you can provide.

Thanks

ETA:  I figured out the whole left thing and it's no longer hiding the right side. LOL Now, I can't seem to adjust the banner height to accommodate the images. No matter what I make the height, it begins to cover up the images, again, like it's in front of the images. *facepalm* Hopefully we can get it figured out before my need to run out and buy a pack of cigarettes takes over, even though I've recently quit, and I find myself running to Sheetz in my PJs!   

Thanks

[Tumbleweed]

Can you post the css you are using and also can you post what you have between the two blue tags (include the blue tags) in your template so I can test it out on my site. 

<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
<div class="myimage1"></div>
</h2>
</div>

I won't need access to your site just yet.

[Forever Sunshine]

Ha, Tumbleweed, I was editing my last post to you while you were posting.

Here's the CSS:

.myimage1{

background-image:url(http://i.imgur.com/yxBxqFG.gif);

background-repeat:no-repeat;

position:relative;

top: -60px;

left: -10px;

width:110px;

height:50px;

z-index:1000;

}

.myimage2{

background-image:url(http://i.imgur.com/yxBxqFG.gif);

background-repeat:no-repeat;

position:relative;

top: -110px;

left:950px!important;

width:110px;

height:50px;

z-index:1001;

}
And here's the templete:


<div id="banner-container" role="banner">

<h2 id="banner">

$[forum.title]

<div class="myimage1"></div><div class="myimage2"></div>

</h2>

</div>
Thanks

[Tumbleweed]

You don't have the height set right. The image is a lot bigger than 50px when it moves. Try 110 in height and see how that works.  

[Forever Sunshine]

I had them set to 110 at one point. I had the height set to about everything I could think of and the the height of the container grew to like three inches! But, I'll try it again.

[Forever Sunshine]

Tumbleweed, OK I've input 110 for the height of both and as expected, the container grew to about three or four inches in height. Also, when I input it for the right side (bottom code), the image moved down to about the middle when the container grew. If I shorten the height for the right one (bottom code), the image gets cut off and doesn't return to the top position.

The left image (top code) didn't budge. It stayed where it was in the position I want it.

Also, the forum name stays at the top, with a small bit of the top being cut off, rather than the name being centered vertically.