Need help? Check out our Support site, then


canape theme - center menu description

  1. Hi there,

    I need to center the description of products that are alone such as the "PATIO WRAP", "MENU WRAP", "CAFÉ": http://bit.ly/2jiCtgK

    How can I do it?

    One more question, how can I add a line/frame like the one of the page above, to the rest?

    Thank you a lot!

    Theme used: Canape

  2. Hi there!

    It looks like the site you need help with is a self-hosted WordPress.org site. These forums are for sites hosted on WordPress.com.
    For information on the differences between the two, check this support page here:

    https://en.support.wordpress.com/com-vs-org/

    For WordPress.org support, you can visit:

    https://wordpress.org/support/

    You can find all the documentation for WordPress.org (lessons, troubleshooting, etc.) here:

    https://codex.wordpress.org/Main_Page

    Hope this helps!

  3. Hi @ipamaveiro2015, there is a Canape support forum at WordPress.org where you can post your questions for your self-hosted website.

    I took a quick look at your site and it appears that you have gotten the descriptions centered.

  4. They don't answer me! :( sorry

    I want center the box of any single menu product, in center of page.
    Like "PÁTIO WRAP", it should appear in the center of the page and not on the left side.

    Another question, its possible to introduce a line (brown frame) on the remaining pages? like it happens in this. Thanks

  5. Hi, you have some syntax errors in your CSS that are causing issues. Add this to the Additional CSS in the Customizer. Do not add it to the original CSS file.

    @media screen and (min-width: 768px) {
    #post-58, #post-69, #post-76 {
    	margin-left: auto;
    	margin-right: auto;
    	display: block;
    }
    }

    For the border line, again, add this to the Additional CSS in Customize.

    .page-template-default #primary {
    	border: 2px solid #ece8e0;
    	padding: 1.75em;
    	width: 100%;
    	max-width: 100%;
    }
  6. Thanks for the great insights, but the border line css code it's damaging the home page structure. Is it possible to apply only for missing pages or do not change only the homepage?
    Thank you!

  7. Ah, sorry about that. Let's replace the border CSS I gave with the following, which excludes the home page.

    .page-template-default:not(.home) #primary {
    	border: 2px solid #ece8e0;
    	padding: 1.75em;
    	width: 100%;
    	max-width: 100%;
    }
  8. I also noticed I had a problem with the first code I gave you for the centering of Cafe, etc. Replace that rule with the following.

    @media screen and (min-width: 768px) {
    #post-58, #post-69, #post-76 {
    	margin-left: auto;
    	margin-right: auto;
    	display: block;
    }
    }
  9. Thanks a lot thesacredpath!

    One last thing, I want to add some social links in footer but it only recognizes the Facebook icon. I need to add Pinterest and TripAdvisor. I added through a "Social Menu", creating a special menu and adding the links. Is it possible to indicate to the theme, where are the logos?

    Alternatively, add a code to insert the icons manually into the footer. Thanks!

  10. On my test site I was able to add FB, Twitter, Instagram just fine. Trip Advisor is not included in the SVG icon image file, so what you would have to do would be to hide the chain link icon on the Trip Advisor menu item by using its unique CSS menu id and then add the logo in by uploading it to your media library. The following is generic, so the XX will have to be replaced by the menu id number for the trip advisor menu item, and then you will need to replace URL_OF_IMAGE in the background declaration with the URL of the one you uploaded.

    #menu-item-XX svg use {
    	visibility: hidden;
    
    }
    #menu-item-XX svg {
    	background: url("URL_OF_IMAGE") no-repeat scroll center / contain;
    }
  11. I insert the code but like you can see (http://bit.ly/2hoSz43) it doesn't recognize the logos. In the menu I wrote 'Tripadvisor' and 'Pinterest' as 'Text to show'.

    ' #menu-item-Pinterest svg use {
    visibility: hidden;

    }
    #menu-item-Pinterest svg {
    background: url("http://marketing360.digital/wp-content/uploads/2017/09/pinterest.svg") no-repeat scroll center / contain;
    }
    #menu-item-Tripadvisor svg use {
    visibility: hidden;

    }
    #menu-item-Tripadvisor svg {
    background: url("http://marketing360.digital/wp-content/uploads/2017/09/tripadvisor-logotype.svg") no-repeat scroll center / contain;
    }
    '

  12. Hi, you have to use the menu item CSS ids, which you find by inspecting those menu items with the web inspector built into your browser. Here would be the code, but as you will see, you will need to change your images to white ones as the black icons do not show up well.

    I've changed the code a bit now that I see things with the logos. Replace what you have entered with the following.

    #menu-item-212 a::before {
    	visibility: hidden;
    
    }
    li#menu-item-212 {
    	background: url("http://marketing360.digital/wp-content/uploads/2017/09/pinterest.svg") no-repeat scroll center / contain;
    }
    #menu-item-213 a::before {
    	visibility: hidden;
    
    }
    li#menu-item-213 {
    	background: url("http://marketing360.digital/wp-content/uploads/2017/09/tripadvisor-logotype.svg") no-repeat scroll center / contain;
    }

    We can also replace the FB icon so that they all look similar if you wish. Let me know, and if you upload a FB icon, post a link to it so that I can work with it. the code will be similar to what is above, but may take some adjusting.
    Let me know if you have any problems.

You must log in to post.

About this Topic