Coding Forum Backgrounds Separately

Hello, I've researched on how to apply a background for rows and the bodyline background using this coding:

Code:

.bodyline {
  background-image: url('http://i.imgur.com/BoaQGSW.png');
}

.forumline .row1 {
  background-image: url('http://i.imgur.com/LTIy7Gg.jpg');
}

.forumline .row2 {
  background-image: url('http://i.imgur.com/LTIy7Gg.jpg');
}

.forumline .row3, .forumline .row3Right {
  background-image: url('http://i.imgur.com/VeJm9Sk.png');
}


Which resulted in this. 

Spoiler:

However, the texture I've chosen for the yellow sides would also affect profile previews and the posts, like this: 

Spoiler:

So what I'm asking for is, is there a coding specific to add a images OR colors to the profile preview and posts, without being related to the rows? If so, it'd be appreciated if someone can give it to me!

Hi there, please provide your forum's URL.

Draxion wrote:Hi there, please provide your forum's URL.

Here it is!
http://winxclubrp.forumotion.com/

Bump.

so your wanting to style the rows on the profile page?

_Twisted_Mods_ wrote:so your wanting to style the rows on the profile page?

Oh, you know, I never thought of them as rows. But yes! I want to stylize them (AND the background for posts) with a code to add a specific color to them-- and if possible another code to stylize them with an image, just so I can have all my options open.

However, I don't want to alter the rows of the index.

here are all the id's for your profile rows going in order top to bottom

#field_id-7
#field_id-6
#field_id-12
#field_id-4
#field_id-5
#field_id-11
#field_id-9
#field_id-8

here is an example with font color,background color, and a background image

Code:


#field_id-6 {
    color: #ff0000;
    background-color: #000000;
    background-image: url(url/totheimage.jpg);
}


and im not sure what you mean by background for posts because it looks like your post already have a background image

_Twisted_Mods_ wrote:here are all the id's for your profile rows going in order top to bottom

#field_id-7
#field_id-6
#field_id-12
#field_id-4
#field_id-5
#field_id-11
#field_id-9
#field_id-8

here is an example with font color,background color, and a background image

Code:


#field_id-6 {
    color: #ff0000;
    background-color: #000000;
    background-image: url(url/totheimage.jpg);
}


and im not sure what you mean by background for posts because it looks like your post already have a background image

Thank you! I meant that the background of posts is tied with this code:

Code:

.forumline .row1 {  background-image: url('http://i.imgur.com/LTIy7Gg.jpg');}

That code not only implements itself on the index, but also the profile page and the background of the posts. The code you provided me helped maintain the results I need for the profile pages, but I also need another separate one for posts to set a background (or color) of my choice without having the code tied to the rows of the index.

SLGray wrote:

Code: .postbody

EDIT: Nvm, I figured it out!

Uhm.. The profile turns out to be like this:

maybe this will help

Code:

#profile-advanced-details dl {
    margin: 0px;
}
.separator {
    padding: 0px!important;
    border-bottom: 1px solid #4adf35!important;
}

_Twisted_Mods_ wrote:maybe this will help

Code:

#profile-advanced-details dl {
    margin: 0px;
}
.separator {
    padding: 0px!important;
    border-bottom: 1px solid #4adf35!important;
}

Mm thank you, but that actually shrinks the distance, and I don't want that. Appreciated, though. I would also like to point out that, when I used this code SL Gray helped me with I got this result:

Code:

.postbody {
  background-image: url('image url here');
}

Basically, I can still see the background embedded in the space where the username and post count and such are displayed.. and behind the polka dot background, too.

I would assume they're all tied to "forumline row 1 code", which is causing all of that. Is there a way to add a particular color/font in the profile page, the posts background while 100% covering the entire space, and the corner where a username and post count is displayed during posts, WITHOUT altering "forumline row 1 code" or shrinking the distance between rows in the profile page?

I know this is a handful, and I'm thankful for your help so far, but I just haven't yet had the exact thing I need, ya know?

for profile

Code:

div#profile-advanced-details {
    color: #42f46e;
    background-color: #42f46e;
    background-image: url(http://i.imgur.com/Lsmh7m3.png);
}

not sure about the post

_Twisted_Mods_ wrote:for profile

Code:

div#profile-advanced-details {
    color: #42f46e;
    background-color: #42f46e;
    background-image: url(http://i.imgur.com/Lsmh7m3.png);
}

not sure about the post

Wow! Thank you very much. That's a big improvement! However, I still see the image around the borders. Is there a way to overlap it with the yellow image? 

Code:


div#profile-advanced-details {
    color: #42f46e;
    background-color: #42f46e;
    background-image: url(http://i.imgur.com/Lsmh7m3.png);
    margin: -2px;
}


_Twisted_Mods_ wrote:

Code:


div#profile-advanced-details {
    color: #42f46e;
    background-color: #42f46e;
    background-image: url(http://i.imgur.com/Lsmh7m3.png);
    margin: -2px;
}


Perfection! Thank you so much for taking your time into helping me.

EDIT: I modified the code a little to fit the posts and it worked.

Code:

.postbody {
    color: #42f46e;
    background-color: #42f46e;
    background-image: url(http://i.imgur.com/Lsmh7m3.png);
    margin: -2px;
}

However, that fixes the issue horizontally, any way I can do it vertically as well? Furthermore, do you perhaps know the coding line I can use to substitute ".postbody {" to achieve the same effect on the left side of posts, where the avatar and such are located?

try this

Code:


.post > .row1:nth-child(1) {
    background-image: url(http://i.imgur.com/BoaQGSW.png);
}


_Twisted_Mods_ wrote:try this

Code:


.post > .row1:nth-child(1) {
    background-image: url(http://i.imgur.com/BoaQGSW.png);
}


Perfect! Thank you VERY much!

Do you possibly know how can I edit the coding to vertically cover the texture? The code I use:

Code:

.postbody {
    color: #42f46e;
    background-color: #42f46e;
    background-image: url(http://i.imgur.com/Lsmh7m3.png);
    margin: -3px;

It does the job well, but the texture on the top side is still visible... and for some reason it overlays the borders at the bottom. How can I fix those?

Clear your browser's history and cache and see if you still see the issue.

SLGray wrote:Clear your browser's history and cache and see if you still see the issue.

I would assume you mean the issue where the yellow image is overlapping the bottom part of the past, in which I did clear both (along with cookies) and I still see it as is, unfortunately.

Code:


.postbody {
    color: #42f46e;
    background-color: #42f46e;
    background-image: url(http://i.imgur.com/Lsmh7m3.png);
    margin: -2px -3px;
}


_Twisted_Mods_ wrote:

Code:


.postbody {
    color: #42f46e;
    background-color: #42f46e;
    background-image: url(http://i.imgur.com/Lsmh7m3.png);
    margin: -2px -3px;
}


Apologies for late reply, as I've had some things to do. But yes! That did work for the bottom part, thank you! However, it's still visible on top. What values can I input for that?

Flame Melody wrote:

_Twisted_Mods_ wrote:

Code:


.postbody {
    color: #42f46e;
    background-color: #42f46e;
    background-image: url(http://i.imgur.com/Lsmh7m3.png);
    margin: -2px -3px;
}


Apologies for late reply, as I've had some things to do. But yes! That did work for the bottom part, thank you! However, it's still visible on top. What values can I input for that?

Bump.

This is solved now. Thank you everyone, I figured it out!