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.

(CSS) How to change post background color to an image [+ some advanced options]?

View previous topic View next topic Go down

Solved (CSS) How to change post background color to an image [+ some advanced options]?

Post by Raziel21 on April 1st 2013, 2:39 am

Hello everyone Hello

I searched a lot of topics but couldn't find a proper solution for this.

The closest I got to a solution was in this particular topic where the user also asked for the same thing, but didn't get it to work.

I'd like to change forum rows but only for the written post. Not behind the avatar, name nor on the index front page of the forum. Just on written posts background.

I'd like to add some parchment type of a background image.
I'd like that this becomes the background for the posts (scaling doesn't matter, i'd change it afterward - I just need the css now or perhaps template editing, whichever fits better for this purpose)
Spoiler:

---

This one is rather optional out of curiosity
Next question is - If the background image works properly, just for the posts, is it possible to adjust the contrast of it (similar to color gradient, but just the image) with the code? If not, a simple solution would be to adjust the image alone in some image editing software, ofc.


Last edited by Raziel21 on April 1st 2013, 5:54 am; edited 1 time in total

Raziel21
Forumember

Male Posts : 86
Reputation : 0
Language : Serbian, English, Russian, Italiano, Espanol
Location : Belgrade, Serbia

http://mizuchi.forumotion.com/forum

Back to top Go down

Solved Re: (CSS) How to change post background color to an image [+ some advanced options]?

Post by Sir Chivas™ on April 1st 2013, 5:39 am

Hi,

Is this your forum?
http://mizuchi.forumotion.com/forum

Edit:

Try this,
Code:
.postbody {
font-size: 15px;
line-height: 18px;
background-image: url(http://lh5.ggpht.com/_jFM-Fd8NDFE/TB4uFLoG6sI/AAAAAAAAGrs/7boVDjRzwx8/s1600/Rolled-Parchment.jpg);
}



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: (CSS) How to change post background color to an image [+ some advanced options]?

Post by Raziel21 on April 1st 2013, 5:55 am

Worked like a charm. Thanks!

*** Edit

Can the image be fixed rather then to follow only the text?

***Edit 2

I got a workaround with the Javascript in similar topic
JavaScript
Spoiler:
Code:
$(function() {
 
  //Indicate here the version of your forum.
  var version = "phpBB3";
 
  if(version.toLowerCase() == "phpbb2"){ 
      $(".postdetails img[title='Male']").closest('.postdetails').parent('td').next('td').addClass("fa_postbody_xy");
      $(".postdetails img[title='Female']").closest('.postdetails').parent('td').next('td').addClass("fa_postbody_xx");
  }else if(version.toLowerCase() == "phpbb3"){ 
      $(".postprofile img[title='Male']").closest('.postprofile').prev('.postbody').addClass("fa_postbody_xy");
      $(".postprofile img[title='Female']").closest('.postprofile').prev('.postbody').addClass("fa_postbody_xx"); 
  }else if(version.toLowerCase() == "punbb"){ 
      $(".user-info img[title='Male']").closest('.postmain').addClass("fa_postbody_xy");
      $(".user-info img[title='Female']").closest('.postmain').addClass("fa_postbody_xx"); 
  }else if(version.toLowerCase() == "invision"){       
      $(".postprofile img[title='Male']").closest('.post-container').addClass("fa_postbody_xy");
      $(".postprofile img[title='Female']").closest('.post-container').addClass("fa_postbody_xx");
  }
});

And using this with the same image for both male and female members.
CSS
Spoiler:
Code:
.fa_postbody_xy{
  background: url("http://i224.photobucket.com/albums/dd74/mentis_01/43304-parchment.jpg");
min-height: 500px;
}
 
.fa_postbody_xx {
  background: url("http://i224.photobucket.com/albums/dd74/mentis_01/43304-parchment.jpg");
min-height: 500px;
}

It changed the whole body of a post, but I think I'll be finding some other picture or even adding different textures to entire forum. Once again, thanks.

Raziel21
Forumember

Male Posts : 86
Reputation : 0
Language : Serbian, English, Russian, Italiano, Espanol
Location : Belgrade, Serbia

http://mizuchi.forumotion.com/forum

Back to top Go down

Solved Re: (CSS) How to change post background color to an image [+ some advanced options]?

Post by SLGray on April 1st 2013, 6:35 am

Topic Solved & Locked


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


SLGray
Administrator
Administrator

Male Posts : 35613
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.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