Home>Support>Changing content background color on a specific pager

Changing content background color on a specific pager

By Mike, 7 years ago. Last reply by Andrew Misplon, 6 years ago.

Hi,
I am trying to change the content background color of one of my pages but nothing seems to be working. I’ve read many related threads and have tried many of your suggestions but still no luck. I am using localhost server and premium version of the Vantage theme. I don’t have any problem changing the pages background color globally. Below is the complete path for this particular page:

Localhost/unity-new/wp-admin/post.php?post=49&action=edit

Any suggestion is greatly appreciated.

Thanks,
Mike

URL: http://Localhost/unity-new/wp-admin/post.php?post=49&action=edit

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 1 month ago Andrew Misplon Hi, I Work Here

    Hi Mike

    If you’re using the Vantage in Boxed layout then the following plugin is the easiest way to achieve a post specific overall background color:

    https://wordpress.org/plugins/custom-background-extended/

    If you’re using Vantage in Full Width layout then you’ll need to do this using Appearance > Custom CSS. Looking a the following demo page: http://demo.siteorigin.com/vantage/2013/09/27/absorbed/. If we inspect the page source we see there is a unique class in the body tag called postid-10. We can target that at Appearance > Custom CSS with:

    .postid-10 #main {
      background: #FCFCFC;
    }
    

    If you’re not sure how to inspect the page source, please see:

    https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

  2. 7 years, 1 month ago Mike

    Hi Andrew,
    Thanks for the suggestions! I’ve tried the following codes but nothing seems working:

    .postid-49 #main {
    background: #FFFFFF;
    }
    .page-id-49 #main {
    background: #FFFFFF;
    }

    .page-id-49 .entry-content {
    color: #FFFFFF;
    }

    I’ve also inspected the page, copy and pasted the related code into CSS, same result!
    #main {
    background-color: #FFFFFF;
    }

    Do I need to include http://localhost……before the page Id? Any other suggestion?

    Thanks.

  3. 7 years, 1 month ago Andrew Misplon Hi, I Work Here

    Thanks for the feedback.

    Which layout are you using? Full width or boxed? If you’re using boxed are you trying to change the content or overall background color?

    If you are using full width layout and assuming your existing background color isn’t white, then this should have worked:

    .postid-49 #main {
    background: #FFFFFF;
    }
    

    There could be a problem somewhere in your Custom CSS, perhaps paste the contents of your Custom CSS so we can check that out. Thanks.

  4. 7 years, 1 month ago Mike

    Thanks Andrew! I am using Full width page. I’ve changed the background color of my pages to something other than white, lets say green. I’ve installed “The Event Calendar” in Events page. The color of the content boxes of the calendar (where the events entries go) are all green . I’d like to change the entry box color to white so the entry texts is more readable. Here is what I’ve entered in Custom CSS. I found this code while inspecting the event page. I changed the color code from the original color to #FFFFFF.

    #main {
    background-color: #FFFFFF;
    }

    By the way I am in localhost set up. My site is not in the network yet. Not sure if this makes any difference!

    Thanks.

  5. 7 years, 1 month ago Andrew Misplon Hi, I Work Here

    Super, thanks for the feedback. Running your site on localhost shouldn’t make any difference in this instance.

    When you inspect the page you’ll find a body tag near the top of the source code. Within that tag will be a unique class, you’ll need to prefix #main with that class, as I did above in my example, in order to target the background color on just that page.

    So for example, on this page here: http://demo.siteorigin.com/vantage/page-builder/ the body class is:

    page-id-14
    

    So our Custom CSS to target the background color on this page would be:

    .page-id-14 #main {
    background: #ffffff;
    }
    
  6. 7 years, 12 days ago Mike

    Hi Andrew,

    Can I change the Tagline font size and color?
    Also, can I move the Tagline slightly to the left closer to Site Title?

    Many thanks in advance.

  7. 7 years, 12 days ago Magus Hi, I Work Here

    Hi Mike

    You can use this CSS to control the look and positioning of the tagline

    header #masthead .hgroup .support-text {
            left: 255px;
      	font-size: 18px;
      	top: 60%;
      	color: white;
      	font-style: normal;
    }
    

    Adjust the left setting to reposition left/right and the top setting for up/down. Any entries you do not need you should remove.

    Let us know how you get on

    Magus

  8. 7 years, 9 days ago Mike

    Thanks Magus, it works great!

    I have another question, how do I disable the background slider. The slider has a few nature pictures and slighting similar to the main page slider.

    Any help is appreciate it.

    Mike

  9. 7 years, 9 days ago Mike

    Thanks Magus, it works great!

    I have another question, how do I disable the background slider?

    Mike

  10. 7 years, 9 days ago Andrew Misplon Hi, I Work Here

    Hi Mike

    Glad to hear you’re making progress. If you’re asking about the default home slider, that can be changed or set from Appearance > Theme Settings > Home > Home Page Slider. We have a full run through here:

    https://siteorigin.com/vantage-documentation/slider/

    Hope that helps.

  11. 7 years, 3 days ago Mike

    Hi Andrew,

    I am ok with setting up the home page slider, no problem there! However at the end of each page there is another slider with 4 pictures showing up. If I disable all the options in a single page, I can see the pictures very clearly which appear as page background. I’d like disable this second slid show if I can! Not sure if I am explaining this right!

    By the way I am still struggling to change a single page background color to a different color. Trying different options!

    Thanks

  12. 7 years, 1 day ago Andrew Misplon Hi, I Work Here

    Hi Mike

    Good to hear from you. Are you still working on localhost? If your site is live please could you send through a link so I can view the slider appearing at the bottom of each page. Please could you also send an example page that should have the background color changed.

    Thanks

  13. 6 years, 11 months ago Mike

    Thanks Andrew! I am still using local host so accessing the site won’t be possible. However, I was going to send you the screen shot of the page with the slider as an attachment. I’d like to send it to your private e-mail if possible? If yes, please send me your e-mail address.

    I will send you more info on backdrop color soon.

    Thanks

  14. 6 years, 11 months ago Andrew Misplon Hi, I Work Here

    Sure, you can get me at [email protected]. Thanks.

  15. 6 years, 11 months ago Mike

    Hi Andrew,
    Just sent you an e-mail.
    Thanks

  16. 6 years, 11 months ago Mike

    Hi Andrew,
    Just realized that “RFWB Slider” plugin was causing the background slider problem. As soon as I disabled it under it’s plugin setup, the slides disappeared.

    Thank you for your help as always.

  17. 6 years, 11 months ago Mike

    I am still working on the individual page background color issue! I think it has something to do with the event calendar itself which I think isolates the page. I will let you know my findings.

    One question, how can I change the sub-menu display from vertical display to horizontal? .

    Thanks.

  18. 6 years, 11 months ago Mike

    Hi Andrew’

    I have a couple of questions:

    1- How to change the sub-menu display from vertical to horizontal? .
    2- How to delete the search icon from the menu bar?

    Thanks,
    Mike

  19. 6 years, 11 months ago Andrew Misplon Hi, I Work Here

    Hi Mike

    1. Vantage unfortunately doesn’t have a horizontal drop down option at this time, sorry. I’ve marked this thread as a feature suggestion.

    2. Appearance > Theme Settings > Navigation > Search in Menu will let you de-activate the menu search.

    Let me know if you need a hand with anything else.

  20. 6 years, 11 months ago Mike

    Thanks Andrew, no problem, I’ll look for it in the feature enhancements.

    In regards to changing a single page color issue;

    1- Your code above works great, I tried on several different individual pages and the page color changed fine! However, the issue remains with “The Events Calendar” plugin related to page “Events” . I did some experiment, disabled the calendar in the Events page and changed Events page color. The color changed to white successfully. Once I linked “The Events Calendar” plugin back to the Events page, the page color changed back to the original color (blue). Why is this happening? Any idea how I can fix this problem?

    Thanks

  21. 6 years, 11 months ago Andrew Misplon Hi, I Work Here

    Thanks for your understanding. Sounds like an overriding style. Try adding !important after the value but before the semi-colon:

    .postid-49 #main {
    background: #FFFFFF !important;
    }
    

    If that doesn’t work then I’d need to see the site live to help resolve.

    Thanks

  22. 6 years, 10 months ago Mike

    Hi Andrew, couple of questions,
    1- I do not see Custom Favicon under appearance/theme! I am trying to create Favicon logo next to the domain name. Is it the same as Retina Logo?
    2- How to deactivate a top menu page which contains sub-menus. I want to make one of my top menu items unresponsive so it doesn’t open when clicked. I want only sub-menus to be active.
    3- How to link a default page coming from a specific plugin to one of my top menu pages? For example, I am using a Podcast plugin and the output/display is going to a hard coded “podcast” page by default. I want to change/link plugin default page “podcast” to one of my own pages. The plugin doesn’t provide a short code to accomplish this.

    Many thanks in advance,
    Mike

  23. 6 years, 10 months ago Andrew Misplon Hi, I Work Here

    Hi Mike

    Thanks for reaching out.

    1. You’ll need a plugin for this. Favicon’s don’t usually change when you change themes so it’s suitable for something like this to be in a plugin. There are many options. Here is one:
    https://wordpress.org/plugins/custom-favicon/.

    2. Please see: Thread: How can I remove the link from my top level menu item?.

    3. Perhaps worth sending this question to the plugin author. You could link your menu to the page but without a shortcode or widget I’m not sure how you’d embed that page in an existing page.

  24. 6 years, 9 months ago Mike

    Thanks Andrew! Very helpful. I’ve completed 1 & 2 and working on #3.

  25. 6 years, 9 months ago Andrew Misplon Hi, I Work Here

    Super, glad to hear you’re making progress. Hope you’re able to resolve.

  26. 6 years, 8 months ago Mike

    Hi Andrew, couple of questions.
    1- I need to place a box for address and phone number on the top left corner of the title box . How can I do it?
    2- I’d like to place webmaster signature at the bottom of the page, which area I should look into?

    Many thanks.

  27. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Hey Mike

    1. By Title Box, do you mean the header? This would unfortunately require a child theme and some custom development.

    2. Appearance > Theme Settings > General > Site Information Text. That field can handle HTML.

  28. 6 years, 8 months ago Mike

    Hi Andrew
    Thanks again! Yes I am referring to the header box where the site Tile and Tagline are located. I guess I need another tagline on the left side of the box similar to the current tagline but much larger box to accommodate more lines. With the current tagline I believe the number of lines are limited! I think this should be possible by modifying the CSS code for the current tagline, isn’t it?

    Many thanks in advance.

  29. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    By default Vantage doesn’t render the tagline. The header text (Theme Settings > Logo > Header Text) renders on the right of the logo. You can also switch that out with a Visual Editor or SiteOrigin Editor widget at Appearance > Widgets. If you’re running out of lines we could help but would ideally need to see the problem live.

    Adding an additional tagline would unfortunately, require custom development that’s a bit beyond what we’re able to offer here on the forums.

  30. 6 years, 8 months ago Mike

    Thanks Andrew, that is awesome! Being able to print more lines in the tagline is what I needed. Is it possible to move this multi line text to the top left corner. Also is it possible to keep the one liner Header text as well to use for a single line message next to the logo?

    Also I tried the Site Information Text you suggested in your previous response but I don’t see an option to make the text hyperlink! You mentioned that field can handle HTML but I don’t see any option!

  31. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Unfortunately, both options aren’t possible with Vantage as it stands. The header widget area has a fixed position to the right of the header. When in use, the header widget area replaces the default header text field.

    The Site Information Text field can parse/handle HTML. So you can insert an link in HTML format:

    <a href="http://siteorigin.com">SiteOrigin</a>
    

    http://www.w3schools.com/html/html_links.asp

    Hope that helps :)

  32. 6 years, 8 months ago Mike

    Thanks again Andrew! I guess I have to wait for the next version of Vantage, right! :)

    I tried the following code for e-mail address but it didn’t work! Is this the correct code for e-mail?
    Andrew

  33. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Email address looks as follows:

    <a href="mailto:[email protected]">Email</a>
    

    Reference:
    https://css-tricks.com/snippets/html/mailto-links/

    The header changes are unfortunately not included in the upcoming Vantage update. It would be best to reach out to a developer if it’s something you’d really like done. Codeable is our recommendation.

  34. 6 years, 8 months ago Mike

    Ok, I see where my problem was, I missed the closing double quotes on the e-mail address! It is working now, thank you! Thanks for recommending Codeable, I will try them for sure if I need to.

  35. 6 years, 8 months ago Andrew Misplon Hi, I Work Here

    Super, glad to hear you made progress.

    Thanks for your understanding.

  36. 6 years, 7 months ago Mike

    Hi Andrew,
    Every time I click on an image on a page, the picture opens in a larger scale, then if I click on the “X” to close the image, it zooms out the picture even larger. Further clicks on the image, zooms it out even further. To correct the problem I have to use browser back arrow which kicks me out of the page completely! What might be causing this? I am using NexGen gallery plugin for my photo gallery, just an FYI.

    Many thanks in advance.

  37. 6 years, 7 months ago Andrew Misplon Hi, I Work Here

    Hey Mike

    Hard to say without seeing the problem live. Just guessing, this sounds like it’s NextGen related. To confirm, try de-activating all plugins except for NextGen. Does the issue persist? If it does then you’d need to try resolve from within NextGen settings. I, unfortunately, don’t have much experience using NextGen.

  38. 6 years, 7 months ago Mike

    Thanks Andrew. I am in the middle of migrating my site from Localhost to live and hopefully it should happen this weekend. Once my site is live, I will send you the link to take a look. I agree with you this might be NextGen issue! But I don’t understand why it impacts other images outside of the NextGen plugin!! I’ll talk to you soon.

  39. 6 years, 7 months ago Andrew Misplon Hi, I Work Here

    For sure. Chat then :)

  40. 6 years, 7 months ago Mike

    Hi Andrew, here is my sites temporary url address. Can you please see why pictures are behaving like that. As I explained before when you click on any image, it opens but when you click on X to close it enlarges itself and so on. I have to use back arrow to close the image which closes the current page. Appreciate it in advance.

    http://www.ufvweb-new.unityoffoxvalley.org

  41. 6 years, 7 months ago Andrew Misplon Hi, I Work Here

    I’m unable to replicate at the moment. Could you confirm a single image you’re seeing this behaviour happen with? Thanks.

  42. 6 years, 7 months ago Mike

    Hi Andrew, please click on About Us and then select History. click on the building picture. Thanks

  43. 6 years, 7 months ago Mike

    Hi Andrew, I think the problem went away by deactivating the “Lightbox Plus Colorbox” plugin. But I still think that the images in pages should not be clickable, right? Since those images are not part of the Gallery!

  44. 6 years, 7 months ago Andrew Misplon Hi, I Work Here

    Thanks. It’s coming from a plugin called Easy Fancybox. The plugin has the ability to be applied to all images, that might be the case here. You can also edit this page, hover over this image, click the pencil icon to edit and remove the link. The image is linked.

  45. 6 years, 7 months ago Mike

    Hi Andrew, thanks very much for the suggestions. I removed the EasyFancybox plugin and also Removed the link from the images. That resolved the problem.

  46. 6 years, 7 months ago Andrew Misplon Hi, I Work Here

    Glad to hear you’ve made progress.

    All the best.

  47. 6 years, 7 months ago Mike

    Thanks Andrew for all your help. I have another questions. I’ve embed a video in my home page using Page Builder area, widget Embeded Video. The video works fine when I enter the url from youtub into the Video box, however it doesn’t work when I enter the Embed code from youtube into the same box. Any suggestion how to get the Embed code working?

  48. 6 years, 7 months ago Mike

    Hi Andrew, I just realized that I cannot use the Youtube Embed code in Embeded Video widget. Instead I used Visual editor and used text to use embed code. That worked just fine.

  49. 6 years, 7 months ago Andrew Misplon Hi, I Work Here

    Super, glad to hear you’ve made progress with this. Yes, to use the full embed code you’d need to use one of the following:

    Visual Editor widget (Black Studio)
    SiteOrigin Editor widget
    Core WordPress “Text” widget.

    All the best.

  50. 6 years, 6 months ago Mike

    Hi Andrew,

    Quick question, I am trying to create a new page and assign to it a parent page right from the edit page. After updating the page and refreshing the website, I don’t see the newly created page under the specific parent page! Is there anything else I need to do to make this function to work? I appreciate your help in advance.

  51. 6 years, 6 months ago Andrew Misplon Hi, I Work Here

    Hi Mike

    Are you looking to add the sub page to the parent in the menu? That needs to be done from Appearance > Menus.

  52. 6 years, 6 months ago Mike

    What you’ve described above is the way I’ve used to add all of my newly created pages to the menu. This is a two step process; 1) create page 2) go to Appearance>Menus and manually drag and drop the new page under a specific parent page. However, there is another option under Pages>Add New which is called Parent. The Parent show all the pages available in the menu. I didn’t know this option existed before. I believe choosing this option eliminates the second step above. I think I should be able to chose the new page’s parent from the Add page without going to Appearance>menus ! If this is not possible, then what is the purpose of Parent option in the Add page?

  53. 6 years, 6 months ago Andrew Misplon Hi, I Work Here

    At Appearance > Menus at the bottom of your custom menu is the option to:

    Automatically add new top-level pages to this menu

    If you have a Custom Menu saved to the theme’s primary menu location then only new top level pages will be added. Sub pages won’t be added automatically.

    To achieve what you’re after you’d need to deselect your menu from the primary menu location. When no menu is assigned, WordPress will then automatically add sub pages to the parent page in the menu. The problem is that without a custom menu WordPress will add all pages to your menu and you won’t control order either.

    This is, unfortunately, core WordPress functionality and not under our control. If you’re interested, the options theme does control are listed here: https://codex.wordpress.org/Function_Reference/wp_nav_menu.

    Hope that helps explain how WordPress currently functions with regards to menus and parent items.

  54. 6 years, 6 months ago Mike

    Thanks Andrew. That is really disappointing news! This option really simplifies things quite a bit specially for those with not much web experience! Our secretary is going to add pages to my website on an on going basis and this person doesn’t have enough experience to manage the menu. I don’t want to take chances for this person to move pages around inside the menu. Can you please direct me how to deselect the menu from primary menu location? Also once I deselect it, can I go back easily if I want to modify the menu? Many thanks.

  55. 6 years, 6 months ago Andrew Misplon Hi, I Work Here

    For sure.

    Can you please direct me how to deselect the menu from primary menu location?

    This can be done from Appearance > Menus > Menu Locations (tab). Change the drop down to — Select a Menu –.

    Also once I deselect it, can I go back easily if I want to modify the menu?

    Sure, super easy. At Appearance > Menus, you can create as many custom menus as you want. Those means are saved. Assigning a menu to a theme location is a separate task. So think of the system as having on one hand, menus and on the other hand, locations. It’s up to you to link the two, if you want.

  56. 6 years, 5 months ago Sylviane M

    hello,
    first, i can’t make a new thread (don’t know why… get a blank page) so i’m posting my question here.
    i would like to know if it is possible with vantage + siteorign to have 3 columns posts on the home page and with the custom background extented plugin to get a speficic background color for each posts. (in each columns..)
    basically, i need to set a a color for each types/categories of posts and then to add a 3 columns display on the homepage that show the latests posts with their approriate backgrounds.
    If it’s possible, then i will buy your theme and upgrade to premium for sure as your site builder is really awesome.
    Thanks for your help.

    • 6 years, 5 months ago Greg Priday Hi, I Work Here

      Hi Sylviane

      Our new thread form was down for a few minutes while we were updating. It’s working now so you can go ahead and create a new thread. We’ll be able to help you there.

  57. 6 years, 5 months ago Sylviane M

    Thank you for your reply. i’m going to start a new thread then.

  58. 6 years, 5 months ago Sylviane M

    it doesn’t work …
    i got those errors :
    The topic is required.
    Error in Captcha field.
    even if i enter a topic and check the captcha field.

    • 6 years, 5 months ago Greg Priday Hi, I Work Here

      I’ve removed the Captcha field for now, will readd once I’ve figured that out. For the thread topic error, just select a thread topic from the dropdown.

  59. 6 years, 5 months ago Sylviane M

    thanks for you help

  60. 6 years, 5 months ago Mike

    Hi Andrew
    Sorry for the late response!
    My active Menu is ‘Menu 1’. Under Appearance/Menu, if I click on ‘Manage Location’ tab and select ‘-Select a Menu-‘ option under the drop down menu, would clicking on Appearance/Menu after the change take me back to Menu 1? I want to make sure I can reverse my selection if I want to. In your comment ‘At Appearance > Menus, you can create as many custom menus as you want’ you seem to directing me to create a new menu! But I am not trying to create a new menu, I am just trying to see if I can get back to the Menu 1 to reverse the change.

  61. 6 years, 5 months ago Support Assistants Hi, I Work Here

    Hi Mike

    From Appearance > Menus you’ll notice a “Select” button, next to it is a drop down menu. That lets you choose which menu to edit. You can select any menu at any time. Appearance > Menus > Locations lets you assign a menu to a location. You can come back to any menu at any time and make changes.

    Hope that helps.

  62. 6 years, 1 month ago Mike

    Hi Andrew,

    Last night I had an issue with my menu display after creating and adding three new pages to the menu. I have never seen anything like this before!
    Here is the scenario:
    1- Created a page and added it to the menu under "Events" parent page,
    refreshed the site and everything looked good.
    2- Created a second page and added it to "Events" parent page. Refreshed the site and everything looked good.
    3- Then I added the same page as described in #2 above for the second time and placed it under a difference parent page. After I refreshed the page, I noticed that every page under the main and sub-menus showing (listed) on the Home page. I tried to delete the new added pages to see what will happen, but it didn't solve the problem.
    I called the Host Gator for assistance but they couldn't fix the problem.
    But they offered me to restore the site to 3/26 backup which I decided to do. I lost some data but I have to re-create the new pages. What do you think went wrong during this process? I need to understand so I don't make the same mistake again.
    Thanks very much for your help.

  63. 6 years, 1 month ago Mike

    Hi Andrew,
    Any news/comments on the issue I reported a couple of days ago?

  64. 6 years, 1 month ago Andrew Misplon Hi, I Work Here

    Hi Mike

    Sorry to hear about the hassle. I’m not sure what the problem might have been. Is there any chance you enabled the setting at Appearance > Menus that automatically adds all top level pages to your menu? It’s a checkbox below your custom menu, just before the location assignment options. Other than this idea, I’d need to see the issue live and perhaps login to assist further.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More