The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Coding Forum Backgrounds Separately

View previous topic View next topic Go down

Solved Coding Forum Backgrounds Separately

Post by Flame Melody on August 19th 2017, 2:42 am

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, 7:05 am; edited 1 time in total

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 on August 19th 2017, 5:48 am

Hi there, please provide your forum's URL.


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1809
Reputation : 227
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 19th 2017, 7:02 am

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

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 on August 20th 2017, 9:12 am

Bump.

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_ on August 21st 2017, 3:38 pm

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

avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 22nd 2017, 9:35 am

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

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_ on August 22nd 2017, 8:15 pm

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

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 23rd 2017, 6:02 am

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

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 on August 23rd 2017, 7:47 am

Code:
.postbody


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

avatar
SLGray
Administrator
Administrator

Male Posts : 40497
Reputation : 2732
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 23rd 2017, 8:36 am

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


Last edited by Flame Melody on August 23rd 2017, 4:05 pm; edited 1 time in total

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 on August 23rd 2017, 1:49 pm

Uhm.. The profile turns out to be like this:
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.

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_ on August 23rd 2017, 4:46 pm

maybe this will help

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

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 23rd 2017, 5:14 pm

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

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_ on August 23rd 2017, 5:58 pm

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

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 23rd 2017, 6:04 pm

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


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_ on August 23rd 2017, 7:16 pm

Code:

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

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 23rd 2017, 9:05 pm

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


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_ on August 23rd 2017, 9:54 pm

try this

Code:

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

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 23rd 2017, 10:16 pm

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

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 on August 23rd 2017, 10:44 pm

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


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

avatar
SLGray
Administrator
Administrator

Male Posts : 40497
Reputation : 2732
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 24th 2017, 11:50 am

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.

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_ on August 25th 2017, 4:09 am

Code:

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

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Coding Forum Backgrounds Separately

Post by Flame Melody on August 27th 2017, 2:50 pm

_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
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 on August 28th 2017, 7:48 pm

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.

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 on August 31st 2017, 7:05 am

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

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 on August 31st 2017, 9:58 am

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


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1809
Reputation : 227
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

View previous topic View next topic Back to top


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