MyBB Community Forums - Help on changing my background.

Pages: 1 2

I tried to put an image of shirts on chairs, as the background of all of my forum pages.

Instead, that background only appeared during the page after I submit a post. It wasn't in the background of my main board page.

What I mean is that the white area on the main board page, or the white space at the top and bottom of a thread when viewing a thread, I wanted that image to appear in the background.

Kind of like a wallpaper.

Also, adding the image the way I did, it also interfered with the way ShoutBox looked. See below, you couldn't read the Shout messages clearly.

[Image: x3hEZee.png]

So, I commented it out.


body {
/*    background: #fff;*/
    /*background-image: url(images/lunarYearShirt.jpg);*/
    color: #333;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    overflow-y: scroll;
}

How can I change my global.css so that it looks like the way I want?

Thank you.

background: url(images/lunarYearShirt.jpg) no-repeat center fixed;
background-size: 100% 100%;

For the background of the chat, you need to search the class of the box that contains the text of the chat, and give background color to it.

(2016-06-27, 01:23 PM)eNvy Wrote: [ -> ]
background: url(images/lunarYearShirt.jpg) no-repeat center fixed;
background-size: 100% 100%;
For the background of the chat, you need to search the class of the box that contains the text of the chat, and give background color to it.

Thanks.

That puts it on the top of the page for the main page,, and a little bit on the bottom, but it doesn't really change the other pages (such as when I'm in a sub forum, or reading a thread).

There is still a white background on those pages.

I'm not sure if what I need is a theme, or a template?

Just to be clear, see how this has a gray background?

[Image: preview_84715_1414952278_6c3be428dd89d85...28a5c5.png]

[Image: preview_84715_1414952278_6c3be428dd89d85...28a5c5.png]

Or this one has the sky and grass in the background?

[Image: preview_88592_1459326144_86ba48086fe22d0...b4700a.png]

That's what I'm trying to do, with my shirt image.

Do I need a whole template change, or are these 1 - 2 line changes in the global.css going to achieve this?

I also think you're right, once I can get the rest of the page to look how I'm thinking of, I will have to go to the background of the chat and change the color. Right now, it's just the background of the image, and that makes it hard to read the shout chats.

Thanks again for your time.

Give me your forum url so I can check, the code that I give you put the background exactly as the 2nd image.

(2016-06-27, 11:48 PM)eNvy Wrote: [ -> ]Give me your forum url so I can check, the code that I give you put the background exactly as the 2nd image.

http://sacramentokingsforum.net/

Can I also PM you a login with supermod credentials? I see your signature also says " I don't give support on PM.", so that's why I'm asking in advance whether it's something you'll accept.

I commented out the code you gave for now, because it wasn't doing what I thought it would (it wasn't showing up on other pages), and also because the shout chat messages were not readable any longer, on top of that shirt background image.

I know you said I had to change the background color of the chat. I just thought if I could first get the background image appearing on all pages, I would then try to fix the background color of the chat.

Current global.css


body {
/*	background: #fff;*/
	/*background-image: url(images/lunarYearShirt.jpg);*/
        /*background: url(images/lunarYearShirt.jpg) no-repeat center fixed;
        background-size: 100% 100%;*/
	color: #333;
	text-align: center;
	line-height: 1.4;
	margin: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	overflow-y: scroll;
}

Thank you for your time and help. I appreciate it.

Hello nuraman00,
your forum using the regular mybb theme,
1st your shoutbox not in the right place,
i mean you can put it where you'd like to,
but im sure you didnt wannet to use it as header.
putting a background image is very easy,
go to global.css and add : background-image: url("xxxxx.jpg"); in the body.
then to change the DVZ Shoutbox background go to global.css
and add : background-color: xxxxx; in #shoutbox .window .

i wish you good luck Wink

(2016-06-28, 05:04 PM)tphe1234 Wrote: [ -> ]Hello nuraman00,
your forum using the regular mybb theme,
1st your shoutbox not in the right place,
i mean you can put it where you'd like to,
but im sure you didnt wannet to use it as header.
putting a background image is very easy,
go to global.css and add : background-image: url("xxxxx.jpg"); in the body.
then to change the DVZ Shoutbox background go to global.css
and add : background-color: xxxxx; in #shoutbox .window .

i wish you good luck

Thanks for observation.

I went back to my global.css file, and I noticed I actually had the shoutbox code twice, once at the bottom, and once in the middle.

I'm not sure how it got in the middle.

I removed all of it, and put it only in the body section.

It still didn't look right.

What's also strange is that even if I delete all of the shoutbox code from the CSS, it still appears on the forum. Only if I deactivate the plugin, does the shoutbox disappear from the forum.

So where exactly should I put the shoutbox code? Between what lines?

So in post # 3, the image of the grass and sky is in the background of everything.

But for me, even when I attempt to put the image in the background, it only appears on the bottom.

There's still whitespace above the footer.

[Image: hwBDCAu.png]

I want the forum to be translucient so it looks like the image above.

(2016-06-29, 12:14 AM)nuraman00 Wrote: [ -> ]
(2016-06-28, 05:04 PM)tphe1234 Wrote: [ -> ]Hello nuraman00,
your forum using the regular mybb theme,
1st your shoutbox not in the right place,
i mean you can put it where you'd like to,
but im sure you didnt wannet to use it as header.
putting a background image is very easy,
go to global.css and add : background-image: url("xxxxx.jpg"); in the body.
then to change the DVZ Shoutbox background go to global.css
and add : background-color: xxxxx; in #shoutbox .window .

i wish you good luck

Thanks for observation.

I went back to my global.css file, and I noticed I actually had the shoutbox code twice, once at the bottom, and once in the middle.

I'm not sure how it got in the middle.

I removed all of it, and put it only in the body section.

It still didn't look right.

What's also strange is that even if I delete all of the shoutbox code from the CSS, it still appears on the forum. Only if I deactivate the plugin, does the shoutbox disappear from the forum.

So where exactly should I put the shoutbox code? Between what lines?

So in post # 3, the image of the grass and sky is in the background of everything.

But for me, even when I attempt to put the image in the background, it only appears on the bottom.

There's still whitespace above the footer.

I want the forum to be translucient so it looks like the image above.

go to global.css file row 60 and remove 'background: #fff;' it's in #content.

(2016-06-29, 06:02 PM)tphe1234 Wrote: [ -> ]go to global.css file row 60 and remove 'background: #fff;' it's in #content.

Perfect! Thanks.

Now, about the shoutbox appearance.

Why does it automatically appear when I activate it, and disappear when I deactivate it?

Aren't I supposed to add the css code, from the plugin zip, to the global.css?

And how can I get it to appear not in the header, but in a normal place?

Like @Pride has on this site in this thread (the user figured out what was wrong)?

http://community.mybb.com/thread-194952.html

Also, if I had wanted the shirts on chairs image as my logo, is there a way to stretch out the image across?

Here's what I had in my header template, with the bold part uncommented instead of the regular logo:

<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div id="logo">
<div class="wrapper">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>

I think after I get the hang of how to change a few things, I'll be able to try experimenting on my own.

Thanks for the help during this initial period.

Ok, I think I got the shoutbox looking as good as it can be done, given my current background image.

Here's what helped:

1)

(2016-06-11, 07:58 AM).m. Wrote: [ -> ]admin panel >> Templates & Style >> Templates >> [your theme templates] >> Index Page Templates >> index
{$dvz_shoutbox} can be added above of {$forums} and the template should be saved

This helped.

As had been noted in this thread, my Shoutbox was in the header.

Putting the index properly above $forums made it below my header and main top navigation links. Much better.

2)

(2016-06-28, 05:04 PM)tphe1234 Wrote: [ -> ]then to change the DVZ Shoutbox background go to global.css
and add : background-color: xxxxx; in #shoutbox .window .

i wish you good luck

Now that my Shoutbox was at least in the proper place, I could go ahead and make the panels white.

Here's what I changed:

#shoutbox .head { padding: 8px; background-color: #FFFFFF }
#shoutbox .panel { border-top: solid 2px rgba(0,0,0,0.1); background-color: #FFFFFF }

#shoutbox .window { border-top: solid 2px rgba(0,0,0,0.1); overflow-y: scroll; background-color: #FFFFFF}

#shoutbox .entry { display: table-row !important; width: 100%; transition: background-color 0.2s; background-color: #FFFFFF }
/*#shoutbox .entry:nth-child(even) { background-color: rgba(0,0,0,0.01); }*/

(And I commented out the alternating colors).

So, now given my current background, I think this is about as good as I can do, right?

[Image: 0m1IUqa.png]

Archive page:

[Image: flMUqQr.png]

My last question is, how do I make my logo stretch across?

Also, if I had wanted the shirts on chairs image as my logo, is there a way to stretch out the image across?

Here's what I had in my header template, with the bold part uncommented instead of the regular logo:

<div id="container">
<a name="top" id="top"></a>
<div id="header">
<div id="logo">
<div class="wrapper">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>

Pages: 1 2