Hi all,
Is is possible to add a little transparency to the top menu bar in the Utafiti template? (the white background).

    NickMo1 Try add this in custom.css file and change opacity value accordingly :

    #logowrap .zen-spotlight{opacity: .9;filter: alpha(opacity=90);}

    The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent

      Thank you aman204
      Unfortunately that did not work, but I understand what we are trying to do.
      In Chrome developer tools when I enter the opacity:
      #logowrap {
      position: relative;
      color: #5c5f61;
      opacity: 0.5;
      }
      It works.

      However, when I paste this code into custom.css it does not work (just like your code does not work).
      Perhaps this is because I am using my on theme: "theme.utafiti2.css" ?

        Perhaps more specifically, this works in Chrome Developer, but not when I add the same code to custom css:
        #logowrap .zen-spotlight {
        background-color: #ffffff;
        opacity: 0.5;
        }

          NickMo1 Hi,

          Can you provide a link to your site and add your admin and ftp details for the respective site in edit fields in order to have closer look

          For reference, You can follow thread post (5 point) procedure.

          Also, Perhaps, You can try and add various css declarations suggested here for cross browser compatiability as the above one suggested is majorly for modern browsers 🙂
          https://css-tricks.com/css-transparency-settings-for-all-broswers/
          https://css-tricks.com/snippets/css/cross-browser-opacity/

            Thank you aman204,
            I have done as requested.
            Let me know if you need anything else.
            I had a look at the links, thank you. It appears that the CSS you provided should be the solution here.
            I hope you can help.

            NickMo1 However, when I paste this code into custom.css it does not work

            Having checked in both firefox and safari, The CSS declarations are working fine. Kindly view screenshots for the same where the declaration is coming from custom.css file.

            https://cl.ly/0z0c3f1z3c00
            https://cl.ly/29070p3f3208

            It should work fine for chrome too since it being modern browser 🙂

            Also, You may wish to add these declarations for older browsers and change opacity value simultaneously :

            /* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;

              Hi Nick,

              You could have used the template settings for the background container color but as this is working you might as well stick with it 🙂

              With the template it doesn't support IE8 and IE9 so I'd leave off the filter

              Cheers
              Paul

                Gentlemen,
                Unfortunately on my computer the custom.css is not being implemented. It still shows 'theme.utafiti2.css'

                #logowrap .zen-spotlight {
    background-color: #ffffff;
}

                This is for Chrome, Firefox and Edge.
                Paul, perhaps some instruction on how to use your suggestion of using:

                paulus1031 used template settings for the background container color

                Perhaps this might be another solution that works for me?

                Thanks

                    NickMo1

                    Kindly share the FTP account of your site also, we will check it further for you.

                      Hi Nick,

                      If you add an rgba value in the container background it should do the trick for you

                      The colour picker won't work with rgba values so you will need to use an external app if you wanted to use a different colour

                      rgba(255,255,255, 0.3);

                      for example the a stands for alpha which ranges from 0.0 to 1 and the values in between control the opacity / transparency

                      Cheers
                      Paul

                      An alternate way to do this is to refer to the one of the colours used in the template colour section

                      and target that variable

                      and add fade(@primary,60%) as the container background colour

                      so you would have

                      which gives in this example

                      Hopefully this wasn't information overload

                      Cheers
                      Paul

                      Thanks Paul,
                      Excellent suggestions. However, I can't seem to find 'Container Style' I can find Row Style for 'Logo' (which contains the logo and the menu).
                      How do I get to Container style?

                      Thanks, Nick

                      Hi Nick,

                      You need to click the pencil to the right of the row which opens up the settings for this row

                      The top setting will be always be Row
                      You need to click container instead

                      Cheers
                      Paul

                      This icon - once clicked you will have the row option

                      The same applies for any row inside the settings

                      Cheers
                      Paul

                      OK. Found it. But still not working.
                      I'll try the second solution.

                      If no luck with that let me know I will look inside your site

                      Cheers
                      Paul

                      You need to Login to view replies.