[Support request] Full background image plus other setup questions.

Home Forums Support [Support request] Full background image plus other setup questions.

Home Forums Support Full background image plus other setup questions.

Viewing 15 posts - 1 through 15 (of 27 total)
  • Author
  • #253377

    Hello. I know this is a lot, but I’m really working to understand how to get this set up. Sure hope you can help me.
    I’m trying to create a site that has the following:
    1. Fully responsive.
    2. No Content header. Full height Left sidebar with Header Logo and Primary Navigation. You’ve given me help and the CSS for this part. Thanks!
    3. Possibly right sidebar with image linked to a gallery page which will be updated monthly (Post?)
    4. Same background color across the entire page, sidebars and main content area,except for the footer which will be a different color
    5. Insert a background image that covers the entire page, except the footer. The image is 1440px by 900px.
    6. Have the text and images display on the image, not in separate boxes.

    Question: What is the relationship between the background color and the background image.
    I want to get this set up correctly before beginning to create the pages with content, Carousel, and images, etc.

    Thanks, Helen

    Lead Developer
    Lead Developer

    Hi Helen,

    1. Your site should be responsive by default – is something not?

    2. Glad you got this working.

    3. You could do a post or a page, and use the WordPress gallery feature: https://codex.wordpress.org/The_WordPress_Gallery

    4. You should be able to do this by adding a background color to the body (Customize > Colors > Body), then removing the colors from the other elements inside the Colors panel. Simply deleting the value from the elements like the content and widgets will make them completely see through.

    5. You can do this with the Backgrounds add-on in “Customize > Background Images”. Then give your footer a background color in the Colors panel which will sit on top of the background image.

    6. Not too sure what you mean by this. Any examples?

    No relationship really, the background image will sit on top of the background color if it’s in the same element.

    Hope this helps 🙂


    Response after much effort. Numbers refer to previous topic questions:
    1. Yes the site is responsive.
    2. I thought the css you gave me was working fine, but there is a dark almost black background that covers the entire left sidebar, top to bottom. The menu text displays on that dark background. I tried deleting the dark color so that the text displayed on the overall page color background. This worked fine on the desktop, but not on my cellphone. The responsive menu displays on top of the content (covering it). In other sites I’ve made with GP the main menu in the left sidebar, clicking the “Menu” button, forced the content to the right, and displayed the Menu at the left on the dark background.

    2a. Also, I want to have some contact info display along with the logo on the header of the left sidebar when it displays on the cellphone, e.g. tel# with glyphicon-earphone and email address with glyphicon-earphone.

    2b. Also, I’d like a header with our logo on the left sidebar top. Also, a Call to Action box (graphic) at the bottom of the sidebar. See the graphic I sent before. I think I should be able to add these images in the Sidebar widget, but there’s no way to add “Images”. How about using a plug in such as “Image Widget”?

    3. How can I add an image to the right sidebar widget? I want to have a couple images with links to pages or posts. Should I use a plug in such as “Image Widget”?

    4 and 5. Background image works perfectly. However, I have a white border on the right side of the page on the desktop, and the header and content sections on the cellphone appear to be in separate containers.

    6. New issue. When I scroll down (computer) a Menu appear across the top of the page. The only menu should be the one on the left sidebar.

    7 New question. I want a group of steps to appear “accordion” fashion, i.e. only the headers will display until clicked, then the lines of text will display. Do you have a recommendation for a plugin?

    Lead Developer
    Lead Developer

    Hi there,

    2. I’m not sure what you mean here – any chance you can link me to your site so I can see?

    2a. Have you tried using a text widget or my Lightweight Social Icons plugin?: https://wordpress.org/plugins/lightweight-social-icons/

    2b + 3. You should be able to add the logo to the navigation in “Customize > Layout > Primary Navigation”. Just make sure you set the navigation logo position to “Sticky + Static”.

    You can definitely use the Image Widget plugin, or use HTML in a text widget: <img src="URL TO YOUR IMAGE" alt="" />

    4 + 5. I might need to see this as well. You can try setting the Background size option to “Cover” in “Customize > Background Images”.

    6. Try setting the Sticky Effect option to “None” in “Customize > Layout > Primary Navigation”.

    7. This plugin might help: https://wordpress.org/plugins/jquery-collapse-o-matic/


    Response after more hard work and thinking. With you help, I may become pretty proficient at this – in my lifetime.

    2. Regardless of adding the CSS, and making minor tweaks, the primary issues remain: The link to my website is dev.vhibuildingspecialties.com. Do you want the password? Here is the link to the site I have been using as a model millworkdesignstudio.com.
    2a. You’ll see on the MDS site that the left sidebar includes not only the primary navigation, but above that is an image of the logo and below the primary nav. is an image of a newsbox (used for contact info). A look at the code shows that they are separate items from the navigation, I think.
    I was not able to get an image of the logo or anything else on the left sidebar above nor below the menu.

    2b When viewed on a cellphone, the logo somehow displays above the content, and a “header (banner?)” of sorts is at the top of the page with contact info. I tried using the Lightweight-social-icons plugin. But the icon didn’t go where I expected in the strip along the top of the screen.

    3. Set Nav logo position to Sticky + Static. Works now.

    3a. Was able to get an image on the right sidebar and position it correctly. Not there now, but will put it in later when I have time to make the page/post link.

    4. Background color and Background image. I have given up on the background image for now and will use only the solid color (owners want this before Jan. 1.

    4a. Owners saw the site in progress with the dark left sidebar and loved it, thinking I’d come up with a newer design. We want to keep it that color along with the footer.

    6. Disabled Sticky Navigation. Works now.
    7. Will try Collapse-o-Matic today

    New Questions/issues:
    A. The word “Archives” appears near the bottom of some pages. What did I do wrong?

    B. What takes precedence? What is defined in the Customizer or any added CSS?

    C. Finally: I intend to continue putting content and images into the pages, hoping that the left sidebar navigation gets solved and any work I do won’t be lost. Is this a reasonable probability?
    BUT if not, would it be easy to change the design to a more typical, top header look without starting all over?

    Lead Developer
    Lead Developer

    2. The dark color is added using the CSS you added to this selector: .gen-sidebar-nav – the color you’re looking to remove/change is #1a2930.

    2a. Your logo displays above the menu just fine for me?: http://www.screencast.com/t/Cg2tU6dyK – or are you only struggling to get something added below the menu as well?

    2b. You’re using the mobile header feature here. You can add HTML/icons to the mobile header like this: https://generatepress.com/forums/topic/add-content-to-mobile-headernav/#post-254904

    A. You have an “Archives” widget added in “Appearance > Widgets”.

    B. Custom CSS has a higher priority than what you change in the Customizer.

    C. Absolutely – you won’t lose any of your content even if you completely switched themes.


    Response per items:
    2. Yes, but we’ve become quite fond of the color.
    2a. Yes, it is great on the desktop, however, it is very tiny on the cellphone. I’d like the logo to be large at the top of the page as it is on the millworkdesignstudio.com website. I’ll play with adding per the link you sent

    3. IMPORTANT – The navigation menu doesn’t work at all on the cellphone. Didn’t yesterday either, but I forgot to tell you.

    4. New – Don’t know if you should be asked to help with Collapse-o-matic, but I have a couple problems.

    Item 221: Definitely not what I intended. Why did the Trigger Titles all bunch up like this. They should each be separate paragraphs, followed by their hidden content.

    Item 222: This is what happens when I expand them. The title covers the down arrows. If I expand all of them they do go into their right places.
    1. How can I get the titles to not cover the down arrows?
    2. How can I get them to appear on separate lines when they are closed up?
    3. How can I get the titles to be white, or any other color?

    I’ll send a link to 2 files in my media library: http://dev.vhibuildingspecialties.com/wp-admin/upload.php?item=222 and http://dev.vhibuildingspecialties.com/wp-admin/upload.php?item=221

    Believe it or not, Tom, I think we’re making great progress on this. I don’t know what I can do, but give you much praise. I promise to write an effusive but honest thanks.

    Lead Developer
    Lead Developer

    2a. The mobile header logo should be more of an icon than an entire header. If you want the larger logo image, you might need to disable the mobile header feature.

    3. Interesting, what about when you disable the mobile header?

    4. Do you have an example of the functionality you’re looking for if collaps-o-matic isn’t it? I might know of another plugin.

    I can’t view files in your admin – everything in there is password protected.

    Glad we’re making progress! What you’re trying to achieve is definitely not easy and is outside of what GP is generally capable of. I hope to integrate a left/right sidebar “header” area like this in the future that will work flawlessly just by changing an option 🙂


    Resonse to numbered items:
    2a and 3. I will try that, then try to add a logo image at the top, but don’t know how to do that.
    4. I’m looking for the simplest accordian possible and Collapse-o-matic should do it, but it doesn’t seem to work for me. When all titled headings are closed they should appear as a list on the page with arrows for opening up. When opened, each should in turn display the hidden content. I’ll gladly try any plugin you recommend.

    I will be fine with permitting you access to my admin, but not in this public forum. Let me know how.

    Good luck with integrating the sidebar headers. Hope you get it done soon; maybe this exercise will work for both of us. Thanks, Helen

    Lead Developer
    Lead Developer

    That’s how collapsomatic should work I believe – which page are you using it on?


    Good Morning (at least here),

    1. The page that has the Collapse-O-Matic is “Custom/Handcrafted”

    2. Also, how can I make the Trigger titles white?

    3. The Responsive menu button still does not work on the cellphone. Maybe I’ve messed something up. Could (should) I remove the custom CSS you gave me and start that over?

    I continue to add pages with text and pictures. With the hope that we will be able to solve the left sidebar with logo and main navigation in the next week.

    Thanks for all your help. Helen

    Lead Developer
    Lead Developer

    1. That’s strange – definitely not supposed to look like that. Have you checked with the author to see if they have any ideas? Might be worth trying to place them inside divs like this:

    <div class="collapse-item">Shortcode in here</div>

    2. This should do it:

    .collapseomatic {
        color: #FFF;

    3. Can you show me what happens when you disable the mobile header in “Customize > Layout > Header”?


    Response per 12/18:
    1. OK, adding the <div class… Was the answer to getting them onto separate lines. BUT the arrows still cover the first letter of each title once they have been opened (expanded).

    2. Where should I put the code you sent to add color to the trigger titles? I was able to make the arrows white, but not the Title text.

    2a. You said you could suggest a different Accordion plugin. I don’t really like the look of this one. The simple arrows are not very interesting.

    3. Disabled mobile header in Customizer:
    – Now the menu button is functional on the cellphone.
    – It slides in from the left as it should.
    – HOWEVER, the nav. menu displays directly over the page content I’m on with no background color of its own.

    4. New Question. Same page. I have a bulleted ul. I would like the bullets to be a different color, and also a different style if possible? Any suggestions?

    Thanks, Helen

    Lead Developer
    Lead Developer

    1. Perhaps this plugin will work better: https://en-ca.wordpress.org/plugins/shortcodes-ultimate/ – it has a lot of other cool features as well.

    2. The above might fix the white text.

    2a. Same as above.

    3. Give your main navigation that same color you like in Customize > Colors > Primary Navigation.

    4. Instead of using inline CSS to make your text white, you can do this in CSS:

    ul li {
        color: #FFF;

    What kind of style are you looking for? Any examples?


    Hello. Surprise and wonderful news.

    1. By poking around I was able to get the Logo to display across the top of each page on the cellphone. In some of the editing pages, I had disabled “Header” in the Disable Elements section. Since I had done it on only a few pages, a little logic told me to look for what was different. Success.

    2. I can’t find where I might have specified the following, though I’ve looked everyplace:
    2a. At the bottom of each page on the cellpohone, there is a white strip that says “Search”. I don’t need or want a search capability.

    2b. The word “Archive” still appears at the bottom of each page.

Viewing 15 posts - 1 through 15 (of 27 total)
  • You must be logged in to reply to this topic.