Non-standard postition for background images

Support Area › Forums › Foxy › Non-standard postition for background images

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question:
  • Author
    Posts
  • July 2, 2012 at 09:37 #6641
    zubird
    Participant

    Hi,

    I would like to display a background image on menu pages that does not stretch across the screen. I’ve tried combinations of uploading the images and trying to target via CSS to no avail. Is there a way to do this? It seems that if i do not use the “Staff, Food and Services Backgrounds” image uploader for menu pages that the default images will appear instead.

    I really would like to use client-specific image blocks that float to the left and I may want to do so with a fixed position.

    I only want to do this for menu pages, not the home page.

    Thank you for your assistance.

    July 2, 2012 at 11:41 #6642
    Bill Robbins
    Moderator

    Wendy,

    That sounds like a great idea. I believe we can do that too. It would be great if WordPress allowed us to create featured images for categories (menu groups are basically categories), but since that isn’t an option, we’ll have to do that a bit differently. Here’s what I’d suggest.

    1. Visit the page on your site where you want to make this background change.
    2. View the source code of the page and look for the tag that start like this: 
      
<body class="
    3. Look through the classes listed there until you see one that looks similar to term-4 (that’s the one in the demo). Copy the term from your site.
    4. Next go to the Appearance section and select edit to open up the theme editor, or use the editor of your choice.
    5. Choose style.css from the list of files on your right.
    6. Scroll down to the very bottom and paste this: 
      
body.term-4 #supersized,
body.term-4 #supersized-loader { 
	visibility: hidden; 
	display: none; 
}

body.term-4 {
	background: url(https://www.organizedthemes.com/demo/foxy/files/2011/08/table1.jpg) no-repeat left top;
}
    7. You’ll want to replace the term-4 with the correct term from your site. That will hide the supersized background on that menu page and also set a background image. To change the background image, just replace the URL above with the URL to your background image. You can find the URL by going to Media and selecting “Add New.” Once you upload your image, WordPress will give you the URL to it so you can use it.
    8. Save your changes.

    That will let you add a background image, just on that specified page. If you have any questions just let me know.

    Thank you for your business and have a great week,
    Bill

    July 2, 2012 at 12:07 #6645
    zubird
    Participant

    Thank you! I wasn’t sure what to do with #supersized but was on the right track.

    Please correct me if I am wrong, but is there any reason why I would not want to use “tax-menu-group” instead of individual terms? I think this would save me a bit of typing as it seems to target all menu pages.

    Regards,

    Wendy

    July 2, 2012 at 12:18 #6646
    Bill Robbins
    Moderator

    Wendy,

    Figuring it out can be a bit tricky since it’s half CSS half javascript. You’re absolutely right about the body class too. If you’d like to keep the same background image for all the terms than you can use the “tax-menu-group” instead of the individual terms.

    I’d love to see your site when you get it finished if you don’t mind sharing.

    Thanks,
    Bill

    July 2, 2012 at 20:23 #6655
    zubird
    Participant

    Thanks for your help. Will do. I am accustomed to using child themes and doing my own modifications to the CSS. I like to know where my files are. I notice that if I add CSS to the theme options, they end up as embedded style. Will the style be added to the WP database? Not that I don’t trust what you are doing, I just don’t like it when I cannot see the file and manually make edits to it. Old habits die hard. 😉

    Wendy

    July 3, 2012 at 09:22 #6656
    Bill Robbins
    Moderator

    Wendy,

    You are correct. The custom styles are added to the options table in the database (it’s where the other theme options are located as well). We simply output them via the wp-head tag in header.php since there usually aren’t too many. The file that controls the output is called custom-css.php and is located inside the includes folder.

    That said, you’re welcome to create a child theme. Just create a new directory in your themes folder. Create a new file named style.css and add your child theme details at the top. They’ll look something like this:

    
/*  
Theme Name: Child
Description: My customizations for the Foxy theme
Version: 1.0.0
Author: Wendy Solum
Template: Foxy
*/

    You’re welcome to use any name you like, just make sure there are no spaces in it. The options framework uses the theme name to store its settings and won’t allow for spaces there.

    Right below that include this line to pull in the styles from the original stylesheet:

    
@import url("../foxy/style.css");

    Then you can add your custom styling and it will override the original stylesheet, but still make adding any updates in the future easier.

    If you have any questions, let me know,
    Bill

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Non-standard postition for background images’ is closed to new replies.