Tagged: social menu Toggle Comment Threads | Keyboard Shortcuts

  • sh_qinahf 2:59 pm on November 7, 2014 Permalink | Resolved
    • Ellen (Support-Team) marked this resolved
      10:57 am on November 10, 2014
    • sh_qinahf marked this unresolved
      10:17 am on November 10, 2014

    Tags: , , , social menu   

    Hi, I need some help with the following urgently!:

    1. Changing the font size: it is driving me crazy how something so easy is taking me so long to do!! I’m looking to change the size of the content body only and the margin too.

    2. The padding at the bottom of every post is far too wide. I’ve tried to change all margin bottom to: 20 px or less but nothing works!

    3. Social Menu for Cocoa. Works fine in header widget but not footer widget!

    Please help! I’ve been at it for hours! This are only minor customisations but I really hope you will be able to help!

     
    • Ellen (Support-Team) 10:57 am on November 10, 2014 Permalink | Log in to Reply

      Hi there,

      1.) To change the default content font-size for Cocoa you need the following custom CSS:

      @media screen and (min-width: 767px) {
      .entry-content p, 
      .entry-content p.standard-text, 
      .entry-content ul, 
      .entry-content ol, 
      .entry-content .wide-content {font-size: 16px;font-size: 1rem;}
      }
      

      16px and 1rem is the default value. You can calculate rem values using this tool: https://offroadcode.com/prototypes/rem-calculator/
      For the margins you need to use this:

      p {margin-bottom: 26px;}
      

      2.) You can change the margins here:

      @media screen and (min-width: 1023px) {
      .site-content .post, .site-content .type-attachment {margin: 0 0 135px;}
      }
      

      3.) Could you please check, if you gave the menu the name “Social”. If it still does not work in the footer widget area, please let me know your site URL, so I can check the code live.

      In general you can find the CSS code for customizations using the developer tools in e.g. Chrome browser. You can see a video tutorial here: https://www.youtube.com/watch?v=BmOyxceYAO4

      Best, Ellen

      • sh_qinahf 4:02 pm on November 10, 2014 Permalink | Log in to Reply

        Hi Ellen,

        Thanks for that! I have finally got the fonts how I want it. Thank you so much for your help and for the beautiful theme of course.

        Still have trouble with the social menu working in the footer widget area. It works perfect in the about overlay widget but not in the footer… Yes, I gave the menu name Social and have ticked the social menu as per your video. If you could help me sort this out, it will be brilliant – my site URL is http://shoesandroses.com.

        Thank you! :-)

        • Marc (Support-Team) 10:26 am on November 11, 2014 Permalink | Log in to Reply

          Hi,

          that is actually a problem created by the usage of both locations for the social menu. Please use the following additional CSS to let the second menu work as well:

          #menu-social-1 li a:hover {
          	color: #777;
          	-webkit-transition: color linear 0.1s;
          	-moz-transition: color linear 0.1s;
          	-o-transition: color linear 0.1s;
          	transition: color linear 0.1s;
          }
          #menu-social-1 {
          	display: inline-block;
          	overflow: hidden;
          	margin: 0;
          	padding: 0;
          }
          #menu-social-1 li {
          	display: inline-block;
          	margin: 0;
          	padding: 0 !important;
          	list-style: none;
          }
          #menu-social-1 li a {
          	width: 70px;
          	height: 70px;
          	display: block;
          	padding: 0;
          	margin: 0 15px 15px 0;
          	font-size: 11px;
          	font-size: 0.6875rem;
          	line-height: 1.1;
          	font-weight: bold;
          	word-break: break-word;
          	text-align: center;
          	overflow: hidden;
          }
          #menu-social-1 li a span {
          	display: none;
          }
          #menu-social-1 li a::before {
          	display: inline-block;
          	-webkit-font-smoothing: antialiased;
          	font: normal 24px/1 'Genericons';
          	vertical-align: top;
          	width: 70px;
          	height: 36px;
          	padding: 0;
          }
          #menu-social-1 li a::before { content: '\f408';}
          #menu-social-1 li a[href*="codepen.io"]::before      {content: '\f216';}
          #menu-social-1 li a[href*="digg.com"]::before        {content: '\f221';}
          #menu-social-1 li a[href*="dropbox.com"]::before     {content: '\f225';}
          #menu-social-1 li a[href*="facebook.com"]::before    {content: '\f204';}
          #menu-social-1 li a[href*="flickr.com"]::before      {content: '\f211';}
          #menu-social-1 li a[href*="plus.google.com"]::before {content: '\f218';}
          #menu-social-1 li a[href*="github.com"]::before      {content: '\f200';}
          #menu-social-1 li a[href*="instagram.com"]::before   {content: '\f215';}
          #menu-social-1 li a[href*="linkedin.com"]::before    {content: '\f208';}
          #menu-social-1 li a[href*="pinterest.com"]::before   {content: '\f210';}
          #menu-social-1 li a[href*="path.com"]::before		   {content: '\f219';}
          #menu-social-1 li a[href*="dribbble.com"]::before    {content: '\f201';}
          #menu-social-1 li a[href*="polldaddy.com"]::before   {content: '\f217';}
          #menu-social-1 li a[href*="getpocket.com"]::before   {content: '\f224';}
          #menu-social-1 li a[href*="reddit.com"]::before      {content: '\f222';}
          #menu-social-1 li a[href*="skype.com"]::before,
          #menu-social-1 li a[href*="skype:"]::before          {content: '\f220';}
          #menu-social-1 li a[href*="stumbleupon.com"]::before {content: '\f223';}
          #menu-social-1 li a[href*="tumblr.com"]::before      {content: '\f214';}
          #menu-social-1 li a[href*="twitter.com"]::before     {content: '\f202';}
          #menu-social-1 li a[href*="vimeo.com"]::before       {content: '\f212';}
          #menu-social-1 li a[href*="youtube.com"]::before       {content: '\f213';}
          #menu-social-1 li a[href*="wordpress.org"]::before,
          #menu-social-1 li a[href*="wordpress.com"]::before   {content: '\f205';}
          #menu-social-1 li a[href*="youtube.com"]::before     {content: '\f213';}
          #menu-social-1 li a[href*="feed"]::before     	   {content: '\f413';}
          #menu-social-1 li a[href*="mailto"]::before    	   {content: '\f410';}
          

          Here you can find more information about adding custom CSS: http://www.elmastudio.de/en/wordpress-en/custom-css-wordpress/

          Best,
          Marc

  • abreusky 12:27 pm on August 8, 2014 Permalink | Flag unresolved

      Tags: genericons, social menu, ,   

      Hi,

      In the social menu, I would like to add a link to my personal website.
      I noticed that there is not the icon of a “globe” on the Genericons installed with Zuki.
      But there are new Genericons available.

      I downloaded the Genericons version 3.1 from their website and I made the migration for the newer files for the respective folder on the Zuki theme folder.

      But I’m still not being able to get the “globe” icon when I add a link called “website” to my social links. :(

      this is it > http://genericons.com/#website

      Can anybody help me on how to do this?

      Thank you!!

       
      • abreusky 1:25 pm on August 8, 2014 Permalink | Log in to Reply

        I found a way!

        on the style.css file of Zuki Child theme I added the following:

        #menu-social li a[href*=”mywebsite.com”]::before, #footer-social-nav ul li a[href*=”mywebsite.com”]::before {
        content: ‘\f475’;
        font: 23px/1 ‘Genericons’ !important;
        padding: 4px 4px 0 !important;
        text-align: center !important;
        }

        The last font 23px was because the globe was too small.
        when I made it bigger, it was not in the center of the black dot anymore!
        then I added padding, but it isn’t beautifully centralised like the other icons. :(

        How can I fix this issue?

        Thank you!!

        • abreusky 9:30 pm on August 8, 2014 Permalink | Log in to Reply

          Nevermind, I started using the Font Awesome, instead. It’s easier to manage, and I can put icons almost anywhere, even in the “name fields” of pages, for example. :)

          Thanks!!!

          http://fontawesome.io

    • abreusky 10:14 am on August 7, 2014 Permalink | Flag unresolved

        Tags: , social menu, ,   

        Hi,

        watching your demo tutorial for Zuki Theme, I noticed that when adding links for the custom social menu, you had an option to “links open in new window”, or something like that.

        On my blog, I don’t have this option when I add those links, what makes people “go out” of my blog once they click the social icon.

        I have the newest version of WordPress installed, but i don’t know how to fix this issue.

        Does anybody know how to fix this?

        Thanks!

         
        • Ellen (Support-Team) 10:55 am on August 7, 2014 Permalink | Log in to Reply

          Hi,
          if you are in your menus panel you can find the “Screen Options” button at the top right, here you can find the “Advanced Menu Properties” and you have to check “Link Target”.
          Best, Ellen

      • rebecca 8:49 pm on June 20, 2014 Permalink | Flag unresolved

          Tags: , , social menu   

          Hallo, ich denke, dass ich das Social Menue richtig eingerichtet habe (Social Menu angelegt und per Widget eingefügt), nur leider sieht man die Buttons nicht. Wenn ich drüber hover, dann werden mir Links angezeigt? Meine URL lautet: http://latouchedebeaute.com/

           
          • Formicula 9:14 pm on June 20, 2014 Permalink | Log in to Reply

            Achso, ist wohl im Spam gelandet weil ich 2 Links drin hatte, also nochmal:

            Hallo,
            die Grafik ist nicht da wo sie laut deinem Quelltext sein sollte. Da steht

            http://latouchedebeaute.com/wp-content/themes/Downloads/images/socialicons.png

            es müsste aber

            http://latouchedebeaute.com/wp-content/themes/namba/images/socialicons.png 

            heissen. Wenn du letzeren Link mal aufrusfst wirst du sehen, dass die Icon-Grafik erscheint.
            Gruß
            Formi ]:)

            • rebecca 9:31 am on June 23, 2014 Permalink | Log in to Reply

              Danke! Das hat funktioniert und die Social-Icons werden endlich angezeigt : ) Warum die Linkstruktur falsch war, kann ich mir auch nicht erklären…

        c
        compose new post
        j
        next post/next comment
        k
        previous post/previous comment
        r
        reply
        e
        edit
        o
        show/hide comments
        t
        go to top
        l
        go to login
        h
        show/hide help
        shift + esc
        cancel