Changing colours

[toetapping]

No experience at all just started learning.



Could you please help me how to alter the size of the background with the little cats in it and how to put another picture in. What is that section called?

The background if I change that to other colours/patterns I lose the above part. How do I over come that.

This is my first theme I have attempted so I know these are the basic questions.

Thank you so much.

testingsssss.proboards.com/

[Tumbleweed]

May 26, 2015 16:40:55 GMT -8 toetapping said:

No experience at all just started learning.



Could you please help me how to alter the size of the background with the little cats in it and how to put another picture in. What is that section called?

The background if I change that to other colours/patterns I lose the above part. How do I over come that.

This is my first theme I have attempted so I know these are the basic questions.

Thank you so much.

testingsssss.proboards.com/

Hi there Toetapping,

I can't view that theme since it seems to not be default but that is your banner area. Since you are posting in the graphics board, are you asking how to resize it in a graphics program?  Or you just want to know if there is a fix to make it larger/smaller?

And I'm not sure what you mean you "lose the above part". When you add a banner via your banner area you are adding a background so changing that would make it go away, provided you are changing it:  Admin > Themes> Advanced Styles & CSS> Visual Editor>Header (Top)>Forum Banner>Banner Image>background image.

If you want to change the background behind your forum then that is the first option in the Visual Editor. But maybe you mean the background color behind the banner?

That has to be a color (or can be transparent). Now that I've tried to figure out what you mean I'll just give you a code that you can try. This would go at the bottom of your style sheet. The above instructions but the Style sheet tab:

#banner {
background-repeat:no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}

Sorry, I'm not quite getting what your asking but never fear, I am happy to help you work out any problems because I know what it is like to try something like this for the first time.

 

[toetapping]

Hi Tumbleweed I have made it default now. I will try to explain it better.

The parts I am asking about are the sides like here

The cats at the side. How do I make the width of them small and change the picture or colour.

See the other background with the kittens paws with purple background. How do I change just that. If I use Admin/Themes/Advanced and then background I seem to lose the cats at the side.

I hope I have explained this better. Thank you.

[Tumbleweed]

toetapping,

I still am not seeing the cat theme. I'm seeing the theme that has a background with a bunny with clothing on. But you can't change the color of an image unless you stick it in a graphics program and even then the results may not be great unless the image has a transparent background and I kind of doubt that is the case.

You can resize the whole image but not elements on the image, like the paw prints, unless the paw prints have a transparent background. I can't say for sure but it looks like the paw prints may be the background color to the forum and then the cats are a border around the forum with both being opaque images.

So the bottom line, I think, (unless I can see the theme/actual images), is you need someone to make you new images in the color you want and the size of paw prints you want.

[toetapping]

Hi Tumbleweed, thank you once again. You worded it much better than me the bunny with the clothing on it. You are right the paw prints are the background colour. Seeing the cats are a border around the forum how can I change it e.g. with just a colour with borders.

I have a graphics programme and enjoy it. Have fun doing banners etc with it.

[Tumbleweed]

May 27, 2015 13:49:33 GMT -8 toetapping said:

Hi Tumbleweed, thank you once again. You worded it much better than me the bunny with the clothing on it. You are right the paw prints are the background colour. Seeing the cats are a border around the forum how can I change it e.g. with just a colour with borders.

I have a graphics programme and enjoy it. Have fun doing banners etc with it.

Sorry for taking so long to get back to you. I seem to rely on someone tagging me so thanks for the gentle "like" reminder but please don't hesitate to bump your thread if we don't get back to you in 24 hours.

Now I can see the right theme! The first thing I want to mention is if this is someone else's theme you downloaded then you need to make sure you can change things on that theme. That said, the paw prints, the cats and the purple lines are all on one image. When I went to where it was hosted I could see there was also a background of the paw prints included so that is probably why it appeared to only make part of it disappear when you added a new background texture/image. 

The only way you can change anything about it is sticking it in your graphics program to try to change the colors (again, you'd probably have very limited success unless you have the original pdf file) AND you'd need permission from whoever made it. It's impossible to do anything to it other than in a graphics program.

The only thing I can really suggest is you could use that image as a guide line as to how to make your own with the colors you want and images you want. And I'll warn you, it is kind of tricky because you can't really be off by one pixel. But again, before you do anything, you need make sure you can change things on the theme you are using.

[toetapping]

No apologies needed Tumbleweed.

It is someone elses theme I downloaded.

Sounds like my ambitions are a bit too much.

I would really love a theme where you have your forum, them a border and then a background.

I am trying to find something that can teach me all these trick for proboards forums. Any suggestions?

[Tumbleweed]

toetapping

If you want a border around your forum all you need to do is add the bold to the bottom of your style sheet and to get to your style sheet go to: Admin>Themes>Advanced Styles & CSS>Style Sheet>

/* border around forum */
#wrapper{
background-image:url('yourimage.png');
background-repeat:repeat;
padding:20px;
}

and just replace the blue with your direct link to your image and then you can add the body background image or color via the same as above but in the visual editor where it says background.

For example, lets say you want to replicate that cat image with your own images but with out having to make it all in one piece like that person did.

For your first image that is around the forum you could use the above but add the lines like the cat theme had like so below in bold: (Go ahead and try this on a new theme if you want and I put an image in there so you can get a feel for how to do it. The image I happen to have in there is transparent any background behind it will show )

/* border around forum */

#wrapper{
background-image:url(http://i657./uu300/EliteList/Trans/1x1tex/tex5/Flwr9Sobelsmlss_zps49c88258.png);
background-repeat:repeat;
border-right: 2px solid blue;

border-left: 2px solid blue;
}

If you wanted a secondary image like the paw prints on that cat theme you could add this to your style sheet: (here you'd set the width wider than what you have your forum width set to. Again I added a image so you can see the affects)

#second_wrapper{
width:1280px;
background-image:url("http://i657./uu300/EliteList/100x100/th_bkgA4.jpg");
background-repeat:repeat;
border-right: 4px solid #aaaaaa;
border-left: 4px solid #aaaaaa;
margin:auto;
}

And then to add that second wrapper to your template you'd go to: Admin> Themes> Layout Templates>Forum Wrapper and then find the red and add the blue right above it:

<div id="second_wrapper">
<div id="wrapper">

and then we have to close that new div so scroll to the bottom of the template and find the last </div>(example of what to look for in red) and add another closing div  like so in blue:

$[footer]
</div>

</div>

 So doing the above will give you a background (border around the forum) immediately around the forum, then a second one that is wider and you still have the body background showing too.

Hope that helps and post back if you have an questions.

[toetapping]

Brilliant tumbleweed.  I have just done what you said so have plenty to play with to get it how I would like now. Very much appreciate what you have done for me.

testingsssss.proboards.com/

[Tumbleweed]

Jun 1, 2015 20:16:28 GMT -8 toetapping said:

Brilliant tumbleweed.  I have just done what you said so have plenty to play with to get it how I would like now. Very much appreciate what you have done for me.

testingsssss.proboards.com/

Yep, looks like you got everything right. And if you want to pm me your end results (or you can post here since it is just a test site) after you get done putting your own creative ideas to work on it, I'd love that. Have fun!

[toetapping]

Been playing today and put other colours in and thought that might explain my questions better plus give me a bit of practice.

1. I am not that keen on how it shows up pink in between the categories. How would you over come that.

2. If you go to the top of the forum. See the red behind the add is it possible to make it the green back ground (second wrapper one)

Thank you for your patience.

[Tumbleweed]

Jun 2, 2015 21:35:01 GMT -8 toetapping said:

Been playing today and put other colours in and thought that might explain my questions better plus give me a bit of practice.

1. I am not that keen on how it shows up pink in between the categories. How would you over come that.

2. If you go to the top of the forum. See the red behind the add is it possible to make it the green back ground (second wrapper one)

Thank you for your patience.

1.    It looks like you have some old ProBoards V4 css in your global headers (Admin> Structure> Headers & Footers>Global Header & Footer)>
so all this should be removed as all of it except the .secondBackground doesn't work with V5. It's that white semi-transparent background that is making the pink.

<style>
body {
text-align: center;
}
.secondBackground {
margin: 0 auto;
background-color: rgba(255,255,255,0.5);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width: 92%;
}
</style>
<div class="secondBackground">

<style>
.windowbg, .windowbg2 {
background-image: url(http://i27./c163/Smangii/proboards%20skin%20tutorial/windowgrad.png);
background-repeat: repeat-x;
background-position: bottom;
}
</style>
<style>
.titlebg { border-bottom: 2px solid #fd8865; border-top: 1px solid #dbe9f5; }
</style>
<style>
.menubg {
height: 30px;
}
.menubg a, .menubg a:visited {
background-image: url(http://i27./c163/Smangii/proboards%20skin%20tutorial/grad2.jpg);
padding: 5px;
border: 1px solid #FFFFFF;
color: #FFFFFF;
}
</style>

<style>
.menubg a:hover {
text-decoration: none;
border-bottom: 2px solid #fd8865;
color: #fd8865;
}
</style>

It also looks like you might have the html that goes with that css in your global header as well so remove this in the header:

<div class="secondBackground">
  

And then the closing div in the footer:

</div>  

2. If you go into your wrapper template and find this....    $[header]    ....  and put it between those two divs it should do what you want:

<div id="second_wrapper">
$[header]
<div id="wrapper">

But doing that may make the black line you have running along side the forum look odd just stopping there like that. Anyway, I'm here to help with any tweaks you want to make.
   

[toetapping]

testingsssss.proboards.com/

This is what I am up to now tumbleweed. Before I had the red coming out a bit but now it is in the width of the forum. Hope you can tell me where I went wrong as like the two borders.

Thank you for your time.

[Tumbleweed]

Jun 4, 2015 17:41:06 GMT -8 toetapping said:

testingsssss.proboards.com/

This is what I am up to now tumbleweed. Before I had the red coming out a bit but now it is in the width of the forum. Hope you can tell me where I went wrong as like the two borders.

Thank you for your time.

So let me kind of get where you want things. Do you want the ad at the top, but without the red background behind it, is the banner area supposed to be the width of the forum or do you want the banner that wide but the forum isn't the right size?

By the way, have you made other changes to the wrapper template aside from this border stuff? It actually might be easier if you copy your css (if you have it in your template) and save that css in a post on your test site and then set your wrapper template back to default, add the css back (if that's where you have it) and then put those div's back like I said in this post:

support.proboards.com/post/6341748

Looking at your template, things look messed up and maybe starting with a clean slate would be best and we can go from there. But don't do it if you have made other template changes to the wrapper template because we can fix it as is if you just give me an idea what width is wrong and do you still want the ad above your banner.

[toetapping]

I have started a clean slate. I put a plug in there to put the add up the top. testingsssss.proboards.com/

2.  When I did this.  If you go into your wrapper template and find this.... $[header] .... and put it between those two divs it should do what you want:


<div id="second_wrapper">
$[header]
<div id="wrapper">

 I went in there I found two $[header]. If I put it in the first header, I lose the forum to just a white back ground and writing.

This is what happens when I put it in the 2nd one.

I get rid of the red background behind the add which is what I want but as you can see forum not right.

1. I would like to get rid of red background behind add and make the red show a little bit around the forum so it looks like I have two different colours instead of the solid green.

Hope that makes sense.