The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Coding Forum Backgrounds Separately

4 posters

Go down

Solved Coding Forum Backgrounds Separately

Post by Flame Melody August 19th 2017, 03:42

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!


Last edited by Flame Melody on August 31st 2017, 08:05; edited 1 time in total
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Draxion August 19th 2017, 06:48

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

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 19th 2017, 08:02

Draxion wrote:Hi there, please provide your forum's URL.
Here it is!
http://winxclubrp.forumotion.com/
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 20th 2017, 10:12

Bump.
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by _Twisted_Mods_ August 21st 2017, 16:38

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

Coding Forum Backgrounds Separately ZifXrL5jS0ySe5gRxwjvkQ
_Twisted_Mods_
_Twisted_Mods_
Helper
Helper

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 22nd 2017, 10:35

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

Coding Forum Backgrounds Separately ZifXrL5jS0ySe5gRxwjvkQ

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.
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by _Twisted_Mods_ August 22nd 2017, 21:15

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_
_Twisted_Mods_
Helper
Helper

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 23rd 2017, 07:02

_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.
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by SLGray August 23rd 2017, 08:47

Code:
.postbody


Coding Forum Backgrounds Separately Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 23rd 2017, 09:36

SLGray wrote:
Code:
.postbody
EDIT: Nvm, I figured it out!


Last edited by Flame Melody on August 23rd 2017, 17:05; edited 1 time in total
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 23rd 2017, 14:49

Uhm.. The profile turns out to be like this:
Coding Forum Backgrounds Separately K9bD7sV
Isn't there a way to cover the entire thing with the desired color/image? The image from the coding of forumline row1 is still visible.
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by _Twisted_Mods_ August 23rd 2017, 17:46

maybe this will help

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

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 23rd 2017, 18:14

_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');
}

Coding Forum Backgrounds Separately Vadf3oW
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?
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by _Twisted_Mods_ August 23rd 2017, 18:58

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_
_Twisted_Mods_
Helper
Helper

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 23rd 2017, 19:04

_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? 

Coding Forum Backgrounds Separately 7eDNOqn
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by _Twisted_Mods_ August 23rd 2017, 20:16

Code:

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

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 23rd 2017, 22:05

_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?

Coding Forum Backgrounds Separately Lpd5gnF
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by _Twisted_Mods_ August 23rd 2017, 22:54

try this

Code:

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

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 23rd 2017, 23:16

_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?
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by SLGray August 23rd 2017, 23:44

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


Coding Forum Backgrounds Separately Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 24th 2017, 12:50

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.
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by _Twisted_Mods_ August 25th 2017, 05:09

Code:

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

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 27th 2017, 15:50

_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?

Coding Forum Backgrounds Separately 2Qu2mQz
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 28th 2017, 20:48

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?

Coding Forum Backgrounds Separately 2Qu2mQz

Bump.
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody August 31st 2017, 08:05

This is solved now. Thank you everyone, I figured it out!
avatar
Flame Melody
Forumember

Female Posts : 118
Reputation : 3
Language : English
Location : 1313 Webfoot Walk, Duckberg

http://believixwinx.forum-motion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Draxion August 31st 2017, 10:58

Problem solved & topic archived.
Please read our forum rules: ESF General Rules
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum