Home › Forums › WordPress Themes – Premium › Luminescence › Change Content Background Color to an image
- This topic has 15 replies, 26 voices, and was last updated 9 years, 11 months ago by
Sushil Adhikari.
-
AuthorPosts
-
January 9, 2014 at 2:04 am #14508
Ella Ivshin
MemberI would like to replace the “Content Background” color field with my own texture image. Looking around at examples for other wordpress sites it seems this is a simple css fix, but I can’t find the right place to do this in Luminescence.
Ideally, I’d like to set it up so that a user in the Theme Customizer GUI can choose whether to upload an image (logo/background upload style) or pick a color for this field. If this is too difficult, then only being able to do it manually in the code is ok too.
January 9, 2014 at 8:50 pm #18882Sushil Adhikari
ModeratorSorry for late reply…regarding your question, you will have to do some css for this one. If you look in the front-end source code, you will see this container:
The class lum-equal-wrap is more likely the one you will use for a content background image. I just tried this and it worked. so for that class, you will add a
background-image: url(path to image);
January 10, 2014 at 4:45 am #18884Ella Ivshin
MemberThank you! I did not find .lum-equal-wrap in Luminescence’s style.css so I just wrote it out as so in Luminescence Child’s style.css:
.lum-equal-wrap {
background-image: url(…);
}And it works great!
January 10, 2014 at 5:07 am #18885Sushil Adhikari
Moderatorawesome… do you have a link to show what you did? I’d be interested to see how a background looks.
January 10, 2014 at 4:50 pm #18887Ella Ivshin
MemberThe site is under construction so it’s hidden to non admins, but here are screenshots of my paper texture in action. To build on this I wanted to show a different paper background texture for each category. I found a php function to put categories into all single posts’ so that single posts and category pages can then be handled with the same css.
Today has certainly been a great learning experience, thanks! Before today I never thought to reverse-engineer things by relying on View Source. It’s really helpful.
Screenshot2014-01-1004.39.09.png
Screenshot2014-01-1004.39.29.pngAttachments:
You must be logged in to view attached files.January 14, 2014 at 3:05 am #18919Cia Williford
ParticipantI’m trying to do the same thing but not having any luck. The background photo is in the child theme’s images folder, named bkg1.jpg.
Is this nomenclature, added to the child theme’s style sheet correct? Cause it doesn’t appear to be working for me.
.lum-equal-wrap {
background-image: url(‘images/bkg1.jpg’);
}Thanks!
Cia
style.cssAttachments:
You must be logged in to view attached files.January 14, 2014 at 3:33 am #18920Sushil Adhikari
ModeratorIt should work….double check that the image is there, then check that the file name is correct. Also make sure you clear your browser cache. One last thing, make sure that the child theme is active…it has happened before and can be easy to miss when one sees two themes with the same screenshots in the admin and didn’t realize the parent theme was active.
January 14, 2014 at 3:43 am #18921Cia Williford
ParticipantThanks. I have to be missing something. The image is on the server, file name appears to be correct. Cleared browser cache twice. Child theme is active. *scratching my head*
January 14, 2014 at 4:08 am #18922Sushil Adhikari
Moderatorpost a link to your site.
January 14, 2014 at 4:11 am #18923Cia Williford
ParticipantIt’s a client’s site: Barb Rogers’ Art
January 14, 2014 at 4:23 am #18924Sushil Adhikari
ModeratorFound the problem… you have a missing closing curly bracket in your style.css
h1, h2, h3, h4, h5, h6, #equal-well nav.main-menu ul li, .main-navigation li, .more-link, .table th { font-family: 'Special Elite', cursive; ***Missing a curly bracket here for the above styling. .lum-equal-wrap { background-image: url('images/bkg1.jpg'); }
January 14, 2014 at 4:26 am #18925Cia Williford
ParticipantCrap, I never even saw that. You’re a lifesaver. Thank you!
January 14, 2014 at 4:35 am #18926Cia Williford
ParticipantOne more quick question? Would this be the proper coding to adjust to change the size of the “Welcome” and “Page Two” headers?
.entry-title {
text-align: left;
margin-bottom: 0.875em;January 14, 2014 at 4:41 am #18927Sushil Adhikari
Moderatorit would be the .entry-title class yes.
but again you forgot the closing curly bracket :whistle:
January 14, 2014 at 4:45 am #18928Cia Williford
Participant*hangs her head in shame*
Well, at least I didn’t try to use it that way….yet. 😛
Thanks for being so helpful. (Is there someplace I can send you a
bribebonus for all the times you bail me out?)Thank you!
-
AuthorPosts
- You must be logged in to reply to this topic.