0
Welcome Guest! Login
0 items Join Now

[closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

Last Post
Search Topic

  • [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • Hey all, :)

      I worked now some days on different things. I can also open a "How To-Thread" for every little thing, but i thought this way i do not spam the whole place.
      In the securetab i got my homepage again. I am using Callisto.

      1)
      So first thing concerns the icon menu. I want to have an individual width but gantry always overrides the styling i did in my custom CSS. The design looks good on a pc but responsive those little icon menu bubbles collide with each other because i have a double size. I cant figure out where to change it right, because the margin and height of the .g-iconmenu-icon is not doing the trick.

      1.5)If this is solved i want to be able to give each and every item in my icon-menu its own ID so i can show or hide them for users with the program Flexi CSS. A menupoint for logout is needed, but only if you are logged in and not in the main or submenunavigation.


      2)
      I tried to add a profile-picture/avatar to my profilesection. This seems not to be possible with freeware. The only little program with profile picture in the joomla library is taken offline from them. I only want a little picturefield, like in every normal profile.


      3)
      I want to add a hovereffect to my pagenavigation/menu but i do not find the right line in my template. I tried several codes in my custom.scss but nothing is working here too or better i do not understand or know the working code here. I guess Callisto template allready got anywhere something but how to use it?

      4)
      The searchbar is different on the homepage and the responsive design. Now i got it right, but it seems like the search at pc is a half as short as the field in the responsive design.


      Thank you again for your time and help.
    #1315922
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22303
    • Thanks: 3229
    • messin' with stuff

    Re: [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • Please don't post list threads like this... 1 issue per thread always to keep things tidy and useful/searchable for other members.

      1) Sounds like your CSS isn't specific enough if it's not "winning" -- www.smashingmagazine.com/2007/07/css-spe...ngs-you-should-know/

      Use Developer Tools to inspect our CSS and make sure yours is more specific

      Inspect HTML and CSS in real-time with Developer Tools:
      developers.google.com/chrome-developer-tools/
      developer.mozilla.org/en-US/docs/Tools

      2) This would be unrelated to the Template... Joomla doesn't have this option either so I'm assuming you're using a 3rd party extension or plugin... please consult the extension developer.

      3) Please describe how you want the hover effect to behave... does it change the buttons background color and text color? just one or the other? what color/effect?

      4) I didn't look at it but that sounds right to me... Block in Mobile get width 100% whereas Blocks at other screensizes are going to the % Width that's set in the Layout Manager
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1315938

  • Re: [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • Hi Matt,

      thx for the reply. Mark helped me too some times here and i am very grateful. :)
      In the future i will make a thread for each concern.

      I will go from back to start.

      4) is explained for me.

      3)Just any hovereffect. Maybe a bit darker, so another, background colour or a glowing border like in the other things like the search.

      2)Yeah, i was at that point too. :) I only think it should be a normal thing to have it in either Joomla or Gantry.

      1)That is not so much the problem, because if my code is not specific the whole gantry code is not.I am only using the custom.scss here. The thing about the icon menu is that it seems to work with its own code. Also there is no ID for the childitems. Those are only named g-iconmenu-item. Not item 1-4 for example. So if i change the css for one all will change...I could make icon menu 1-4 and give them each another ID. I think only the other thing would be easier if there was a ID-field for the child icon menu items.

      Thank you for your help.
    • Last Edit: 8 years 7 months ago by Dominique Hell.
    #1316036
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22303
    • Thanks: 3229
    • messin' with stuff

    Re: [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • 3) We don't do custom development here... if you have a specific thing you want that is simple I will try and help with the code

      1) I don't understand your reply
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1316217

  • Re: [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • Hi Matt,

      i only need the information which changes the buttons of the callisto menu. I think that is pretty specific. If the mouse hovers over it it should behave just like the search or the log in form. Nothing custom here, everything from Gantry. I saw the line with "transition" and ease in and out but there was no colour it fades in. Right now it is white but i do not see where gantry gets this information.

      Now i even got another wish which i should realise. If you press such a mainmenu item (at my page Leistungen and Unternehmen) the submenü item (in my case a second menu starting at level 2) shall get the same background colour.


      For the iconmenu: With the css we can give different classes different styles so i wanted to give each icon menu item a specific style for example visible when logged in. This is not possible because only the whole icon menu has an ID and not the single items. I just wanted to give this as a hint for you guys. I will solve this problem taking single icon menus with only 1 item. This way we have IDs for each one. The only problem is the responsive design. It takes each particle and alligns it vertically not horizontally like the whole icon menu does. Do you have any help here?

      :)
    #1316220
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22303
    • Thanks: 3229
    • messin' with stuff

    Re: [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • you can give them each a custom class and target them with CSS just fine... you just need to be more specific than the CSS that Gantry is setting... if you read the article on CSS specificity I sent it should help you greatly.

      I don't see an Icon Menu configured on the page you've linked...

      the Icon Menu Particle in Callisto is different than a regular Menu Particle... it doesn't have any dropdown options that I'm aware of where you can hover over one of the icons and get a sub-menu containing a login particle or a search particle... you'd need to use the normal Menu Particle to get that functionality
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1316229

  • Re: [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • oh sorry, that icon menu i cleared out. It is only visible for registered users. ^^

      i read your link. :)

      Menü item hover effect:

      .g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container {
      font-family: "lato", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
      font-weight: 700;
      font-size: 0.9rem;
      padding: 0.2345rem 0.469rem;
      white-space: normal;
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-all;
      -webkit-transition: 0.35s ease;
      -moz-transition: 0.35s ease;
      transition: 0.35s ease;
      transition-property: all;
      transition-duration: 0.35s;
      transition-timing-function: ease;
      transition-delay: 0s;

      please explaine me this and how i get blue instead of white in the transition.

      .module-content ul.menu li a {text-shadow: 1px 1px #FFF;}
      .module-content ul.menu li:hover a {color: #555;text-shadow: 1px 1px rgba(255,255,255,0.4);}

      This post by Davis, does not help me for some reason... I only want a nice blue glow there, just like in the search or log in...
    • Last Edit: 8 years 7 months ago by Dominique Hell.
    #1316234
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22303
    • Thanks: 3229
    • messin' with stuff

    Re: [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • nothing in your selector is acting on :hover

      would be like:
      #g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container {
    color: blue;
}

    • The following users have thanked you: Dominique Hell

    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1316238

  • Re: [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • Nice, we are getting there!
      Now the text-color changes. How do i get such a nice glow around a menu item with the typo staying the same?

      I have to go home now after a long workday but i will be back in about 13 hours. :)

      Thank you again. It is very helping for me because i have nobody around here i can ask things. :)
    #1316239
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22303
    • Thanks: 3229
    • messin' with stuff

    Re: [closed] How To: Different Things (Icon Menu, Hovereffect, Profilepicture,Searchbar)

    Posted 8 years 7 months ago
    • Adding a glow would be up to you... Mods are here to support bugs and administration issues... we help with custom requests and other basic stuff when we can... Citadel was the last template where you couldn't change your menu color and hover colors in the admin so I was trying to help here... in Remnant, and all themes going forward, you can edit it directly in the admin.

      Google around for CSS text glow and I'm sure you'll find some ideas
    • Last Edit: 8 years 7 months ago by Matt.
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1316241

Time to create page: 0.095 seconds