Change Content Background Color to an image

Home Forums WordPress Themes – Premium Luminescence Change Content Background Color to an image

This topic contains 15 replies, has 26 voices, and was last updated by  Ella Ivshin 5 years, 8 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #14508

    Ella Ivshin
    Member

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

    #18882

    Sushil Adhikari
    Moderator

    Sorry 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); 
    #18884

    Ella Ivshin
    Member

    Thank 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!

    #18885

    Sushil Adhikari
    Moderator

    awesome… do you have a link to show what you did? I’d be interested to see how a background looks.

    #18887

    Ella Ivshin
    Member

    The 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.png

    Attachments:
    You must be logged in to view attached files.
    #18919

    Cia Williford
    Participant

    I’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.css

    Attachments:
    You must be logged in to view attached files.
    #18920

    Sushil Adhikari
    Moderator

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

    #18921

    Cia Williford
    Participant

    Thanks. 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*

    #18922

    Sushil Adhikari
    Moderator

    post a link to your site.

    #18923

    Cia Williford
    Participant

    It’s a client’s site: Barb Rogers’ Art

    #18924

    Sushil Adhikari
    Moderator

    Found 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');
    }
    #18925

    Cia Williford
    Participant

    Crap, I never even saw that. You’re a lifesaver. Thank you!

    #18926

    Cia Williford
    Participant

    One 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;

    #18927

    Sushil Adhikari
    Moderator

    it would be the .entry-title class yes.

    but again you forgot the closing curly bracket :whistle:

    #18928

    Cia 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 bribe bonus for all the times you bail me out?)

    Thank you!

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.