Border/Background thing?

[Maiden]

At the moment on the V4 we have this:
solariaweyr.proboards.com

Where there's (on this skin) a brown background, and then a pattern surrounding the forum (excluding the ads)

On V5 I have managed the reverse:
solariatest.freemessageboards.com

Using this code I think:

/* border around forum */
#wrapper {background-color: #aca888; padding: 1.3em;}

I was trying to switch the background-color bit to using the repeating image but my attempts completely broke things, (Thank Faranth for the visual editor so I didn't click save!)

If anyone could help I'd really appreciate it.

[Shrike]

If you just want to add the background image, you can copy and paste that bit of CSS you used before. That would give you this:
#wrapper {background-color: #aca888; background-image: url('http://i1207./bb469/solariaweyr/Patternedbg2.png'); padding: 1.3em;}

[Maiden]

Oh awesome, fantastic thank you!

Three more (little) questions.

Do you know how I can but a border around it? (I'm trying to get a 1/2px black rounded corner border around everything for uniformity)

Do you know how to make the green pattern not start until after the ad?

Do you know how I can put like another line (probably totally the wrong phrase - but essentially a strip of brown) between the bottom of the green and the ad at the bottom?

[Shrike]

Nov 21, 2012 15:25:28 GMT -8 Maiden said:

Oh awesome, fantastic thank you!

Three more (little) questions.

Do you know how I can but a border around it? (I'm trying to get a 1/2px black rounded corner border around everything for uniformity)

Do you know how to make the green pattern not start until after the ad?

Do you know how I can put like another line (probably totally the wrong phrase - but essentially a strip of brown) between the bottom of the green and the ad at the bottom?

No problem, we can actually do the first and third questions in one. We'll add the red to the CSS:

#wrapper {background-color: #aca888; background-image: url('http://i1207./bb469/solariaweyr/Patternedbg2.png'); border: 2px solid #000; .rounded-corners(@a: 5px); padding: 1.3em; margin-bottom: 1.2em;}

For the first question, we added these two statements:
border: 2px solid #000;
This is adding the border. The values for it are pretty self-explanatory; width, style, colour.

.rounded-corners(@a: 5px);
This is utilising something new with V5's stylesheets which means that it will add all the code needed for rounded corners with this one statement, all you need to do is change the value to how big you want the rounded corners to be.

And for the third question, we added this:
margin-bottom: 1.2em;
This adds an invisible space to the bottom of the forum wrapper (the part we've added the background to) that is equal to 1.2em, or 1.2 times the default font size.

For question 2, we'll need to edit the Forum Wrapper template by going to Themes > Layout templates > Forum wrapper.
Once there, find this specific bit of code, it should be around line 54: $[header]
Cut and paste it from here to above this line of code (around line 14): <div id="wrapper">

If you need any clarification, feel free to ask.

[Maiden]

Hi Shrike

Thank you so much for the help, and the explaination! It's so useful with trying to learn how to code this stuff to have it explained. I feel like I learnt a lot! Initially I panicked when pasting the code bits in and it broke, but then I added each bit bit by bit to look at it compared to how you said and it turned out to the be rounded corners.

Those are defined(?) at the top (yes?) and I couldn't work out what was wrong as I have all these at the top

.rounded-corners(a, b, JASP!, d) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;
}

.rounded-corners(a, b, JASP!) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;
}

.rounded-corners(a, b) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;
}

.rounded-corners(a: 5px) {
border-radius: @arguments;
-moz-border-radius: @arguments;
-webkit-border-radius: @arguments;

And the code you gave me it looks like the bottom one; but searching through I found when something used it in the rest of the mass of code it used this: .rounded-corners(5px); So I put that in and it seems to work (but I now have no idea how it related to those four bits at the top?)

For question 2. That's way closer to what I wanted, but the navbar and things were now the whole page width and outside of the green. then I turned off the plugin for moving the ads above the welcome stuff and its just like how I wanted and the ads stayed above the welcome stuff, so that's magic. You're magic

[Shrike]

The difference between those is that the actual border-radius property can take up to 4 values to apply to different corners. If you feel up to learning more about the @variables, look up "Less CSS" (would link if wasn't using 3DS now) as that is what those use.

That plugin is actually doing (nearly) exactly what we did, just in a roundabout way.

Happy to help

[Maiden]

I will do thanks

Will that tell me how I know what sort of coding to put to get it to access the style thing? So when to use .rounded-corners(5px) over what you posted initially or is it always just a case of trial and error? Or is that because we only wanted to define one variable and leave the rest up to it? Is variable order important? say in the border bit of code you added could I put colour first? (And is the colour a hexcode? How come it only has 3 values?)

Sorry for more questions ^^

[Shrike]

Nov 21, 2012 18:13:07 GMT -8 Maiden said:

I will do thanks

Will that tell me how I know what sort of coding to put to get it to access the style thing? So when to use .rounded-corners(5px) over what you posted initially or is it always just a case of trial and error? Or is that because we only wanted to define one variable and leave the rest up to it? Is variable order important? say in the border bit of code you added could I put colour first? (And is the colour a hexcode? How come it only has 3 values?)

Sorry for more questions ^^

The style sheet itself uses CSS, and you can find lots of resources for learning it here[/url] (not W3Schools). The only time you'll really need to use those @variables is if you want to say grab a colour from the theme that you've already set.

If by what I posted initially you meant this: .rounded-corners(a: 5px) then actually, it didn't work because I copied the wrong part of it (luckily you found an example of how to use it properly) Sorry for the confusion there.

I've never actually checked if ordering the values inside something like border makes a difference, although I imagine browsers would work it out. For ordering the properties (like border, margin, width) the order doesn't matter, I personally list them alphabetically as it makes it easier to find things.

For color hexcodes you can use a sort of shortcut in that, if the 3 pairs of values (red,green,blue) are the same, then you can use 3 values. It simply repeats that value, so something like #4D5 would equal #44DD55.

[Maiden]

Oh great! (I was using W3Schools for my html as it was the first non-confusing looking link goggle threw my way.... so probably would have gone there) I shall have a look through that link.

Thank you for your help, got some positive comments on the look from the members