Solved MNHTN | Social Buttons

Discussion in 'Templates' started by Levi Jones, Dec 16, 2015.

  1. Levi Jones

    Levi Jones Active Member

    42
    3
    I can't figure out how to edit the social buttons under the Expand tab. I edited the .svg, and it works. The outline (Normal) to fill (Rollover) states is what seems practically un-editable. The site looks great, but whoever made this template needs a good lesson on Muse backend. They put objects in text, undefined graphic styles, etc.
     
  2. Christopher Watson

    Christopher Watson Eyeballs Staff Member

    6
    4
    Hi @Levi Jones, I'm sorry the theme I designed is giving you trouble. I added a little bit of custom CSS so that we can achieve that box-shadow animation as it is not an effect that muse has built in. Here is how to edit:

    Each social button is made up of two parts. The container which has the background animation, and an icon within the previously mentioned container.

    Editing the icons (sounds like you have this part)
    Make sure when changing your icons you have clicked twice and have the icon selected and not just the container.
    you'll know when you've selected the correct item when the social icons are visible in the states panel.

    Editing the Background
    If you select the outer container you'll see it has been given a graphic style called "round_btn"
    the styling for this can be found on line 180 of the grid.css that came with the template in the CSS folder

    I'll write the code below and make bold the items to edit to change the stroke color and the animated box-shadow color on hover:

    .round_btn {
    padding: 0px 0px;
    color: #fff;
    background-color: transparent;
    transition: box-shadow 0.2s;
    box-shadow: inset 0 0 0 1px #90624D; <--------Thats the stroke color
    }

    .round_btn:hover {
    color: #fff;
    box-shadow: inset 0 0 0 25px #90624D; <--------Thats the color filling the circle
    }


    Please let me know if this helps, I'm happy to assist until you achieve the exact look your going for.

    Best!
     
  3. Levi Jones

    Levi Jones Active Member

    42
    3
    Oh, that is awesome! I didn't know you could add css to the site like that. How did you apply the css doc to the page?
     
  4. Christopher Watson

    Christopher Watson Eyeballs Staff Member

    6
    4
    @Levi Jones heres are the steps to attach an external style sheet:

    1) In the (main tool bar) Adobe Muse > File > Add files for Upload menu and select your css file.
    2) Go to Object>Insert HTML
    3) In the HTML box type: <link rel="stylesheet" type="text/css" href="assets/YourFileName.css">
    This calls the .css file that you uploaded.

    Pretty cool right? Is there a link to your site? Looking forward to see what you do with it!
     
    Levi Jones likes this.
  5. Levi Jones

    Levi Jones Active Member

    42
    3
    Awesome! At this point I only have the home page complete. You can view the site at inlandhillsoc.businesscatalyst.com. I expect it to be finished this time next week though. It all depends on how quickly my client gets me their content, but I am sure that you can understand that!
     
  6. Levi Jones

    Levi Jones Active Member

    42
    3
  7. Levi Jones

    Levi Jones Active Member

    42
    3
    @Christopher Watson The site is now live at inlandhillsoc.com. Let me know what you think, and I really mean it. Go into looking at it with high expectations and tell me everything that lowered them. Same for anyone in the Muse Community that reads this. Thanks!
     
  8. Christopher Watson

    Christopher Watson Eyeballs Staff Member

    6
    4
    @Levi Jones Really nice site! I especially enjoyed the sub nav on the "Plan a Visit" page, what a nice surprise and great UX promoting exploration. My only critiques would be of pure personal preference. I really like the text size difference between headline and body copy on the "Give" page (on the right) Id be interested in see how that sizing looks on the "Pay us a Visit" page. But I've been criticized for favoring smaller copy so take that with a grain of salt;) - its all about knowing your audience when it comes down to it! Congrats on the beautiful site! :)

    @Darian K @Steve Harris @Alex Wiley @Brandon Check it out!
     
  9. Mr. B

    Mr. B New Member

    3
    0
    One of the best templates on Muse Themes - the only thing missing is it dynamically scaling for different devices instead of a mobile version. Google is going to phase out mobile sites and give crummy SERP for those who use it so it is time to make a move to sites that scale instead of varying versions of them.
     
  10. Christopher Watson

    Christopher Watson Eyeballs Staff Member

    6
    4

Share This Page