Menu icon Foundation

Coder | Boulder, CO

My Posts

  • 29
    Replies
  • Equalizer!

    By Lynda Spangler

    Equalizerzurb

    I just wanted to say thank you to the Zurb Team for adding such a useful tool! I have spent hours trying to get other solutions to work and so far I haven't found a good solution that works across all devices. Now Zurb adds this into Foundation! MY HE... (continued)

    Last Reply by Sherlock951 29 days ago





  • 4
    Replies
  • Zurb World Tour Map

    By Lynda Spangler

    map

    I am working on a website for a Global Consulting Company. The site is being built on Foundation and one feature they would like to have is a map or globe that allows a user to click on and view information on that country or place. I saw the Zurb World T... (continued)

    Last Reply by Gabe Wong over 4 years ago


  • 14
    Replies
  • Custom Forms in F5?

    By Lynda Spangler

    forms

    First thank you for the great work in Foundation 5! In Foundation 5 are custom forms still supported? When I look at the Form docs I am seeing regular checkboxes and radio boxes. I haven't tried it in a live site yet.

    Last Reply by ajaymittal about 1 month ago


My Comments

Lynda Spangler commented on Robin Cox's post over 4 years

As Steve said it works well. I use Disqus on many sites I have built and use their Universal Code and it works very well. I have never seen an issue on any of my Foundation sites.

I haven't seen much in the way of slow downs when using Disqus though I have the script as one of the last scripts to load.

Lynda Spangler commented on Saravana Kumar's post over 4 years

If you are using Typekit to serve the webfonts there is no font folder for you to insert the font into.

To add TypeKit to your site first add your Typekit Kit into your site. I stick this code in my site's template in the <head> so it is across all of my pages.

<script src="//use.typekit.net/[kit-id-from-typekit].js"></script>
<script>try{Typekit.load();}catch(e){}</script>

If you are using SCSS you would change this line:

$header-font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

and/or

$paragraph-font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

If you are using vanilla CSS you add the font to the font family in your code:

font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

Here is more information on adding TypeKit to your site.

Lynda Spangler commented on Rafi Benkual's post over 4 years

+1 for the Report Button or a Flag Button.

What about adding moderators as well? For instance anyone who is Foundation Certified or has a certain amount of forum points can automatically remove post be it spam or offensive. Similar to the way StackOverflow gives permissions to users as they gain points.

Lynda Spangler commented on George Hozendorf's post over 4 years

@George

You can use a background image or just insert an image in the HTML code. I use Font Awesome on many of my sites and use <a href="#"><i class="fa fa-chevron-up"></i></a> for the arrow or whatever icon you wish to use.

Lynda Spangler commented on James Ralph's post over 4 years

I wish I could help you more but I am not a JS expert either.

Lynda Spangler commented on Shawn Jones's post over 4 years

I added a plus and minus icon and use CSS to control which icon is showing. The same could be done for arrows. I am using Font Awesome on the site to display the plus and minus. Hence the <i class="fa fa-plus"></i> and <i class="fa fa-minus"></i>

HTML:

<dl class="accordion" data-accordion>
    <dd><a href="#panel1"><i class="fa fa-plus"></i><i class="fa fa-minus"></i> References</a>
        <div id="panel1" class="content">
            <!-- CONTENT -->
        </div>
    </dd>
</dl>

CSS:

.accordion .fa-plus{
  display:inline;
}
.accordion .fa-minus{
  display:none;
}
.accordion .active .fa-plus{
  display:none;
}
.accordion .active .fa-minus{
  display:inline;
}

There may be a better way to write this but this works well for me.

Lynda Spangler commented on Paul Elphick's post over 4 years

In the latest version (5.2.1 as of this writing) what Rafi mentioned is a bit different. If you can search the CSS and find any reference to topbar as Rafi mentioned and change the value for those it works. I didn't need to add an extra line, just change what is in the CSS.

Lynda Spangler commented on Lynda Spangler's post over 4 years

I looked at it again and by chance I did find the solution!

It is this line of CSS:

.top-bar-section ul li:hover > a {
    background: #272727;
    color: white;
}

My CSS was overriding the background but not the color. By overriding the color the background stays transparent as I intended but the text doesn't disappear now. =>

Lynda Spangler commented on Atul Nar's post over 4 years

I would assume it is the JS that is causing the problem. Question: For the second nav why not use a sub nav or another nav type rather than a topbar nav?

Lynda Spangler commented on Rafi Benkual's post over 4 years

I have used Akismet on a project and it was catching most spam but was still letting some through. Even with Akismet I would still see all of the spam comments in the backend. I then implemented a solution that isn't full proof but when combined with Akismet took my spam to 0.

What I did was integrate a simple javascript solution as I found many spambots don't execute javascript.

I placed the action URL in a data-attribute and leave the action URL blank. Then on clicking submit or reply I would run a simple JS function that would take the data-attribute and make it the action URL then submit the form. Amazingly it took my spam from 50 - 100 comments a day to 0! I was shocked that it worked so well.

I may receive a couple spam comments a month now and those are human spammers which Akismet quickly filters out.

Just a thought. =>

Posts Followed


Following

    No Content

Followers

My Posts






My Comments

You commented on Robin Cox's post over 4 years

As Steve said it works well. I use Disqus on many sites I have built and use their Universal Code and it works very well. I have never seen an issue on any of my Foundation sites.

I haven't seen much in the way of slow downs when using Disqus though I have the script as one of the last scripts to load.

You commented on Saravana Kumar's post over 4 years

If you are using Typekit to serve the webfonts there is no font folder for you to insert the font into.

To add TypeKit to your site first add your Typekit Kit into your site. I stick this code in my site's template in the <head> so it is across all of my pages.

<script src="//use.typekit.net/[kit-id-from-typekit].js"></script>
<script>try{Typekit.load();}catch(e){}</script>

If you are using SCSS you would change this line:

$header-font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

and/or

$paragraph-font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

If you are using vanilla CSS you add the font to the font family in your code:

font-family: "proxima-nova", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

Here is more information on adding TypeKit to your site.

You commented on Rafi Benkual's post over 4 years

+1 for the Report Button or a Flag Button.

What about adding moderators as well? For instance anyone who is Foundation Certified or has a certain amount of forum points can automatically remove post be it spam or offensive. Similar to the way StackOverflow gives permissions to users as they gain points.

You commented on George Hozendorf's post over 4 years

@George

You can use a background image or just insert an image in the HTML code. I use Font Awesome on many of my sites and use <a href="#"><i class="fa fa-chevron-up"></i></a> for the arrow or whatever icon you wish to use.

You commented on James Ralph's post over 4 years

I wish I could help you more but I am not a JS expert either.

You commented on Shawn Jones's post over 4 years

I added a plus and minus icon and use CSS to control which icon is showing. The same could be done for arrows. I am using Font Awesome on the site to display the plus and minus. Hence the <i class="fa fa-plus"></i> and <i class="fa fa-minus"></i>

HTML:

<dl class="accordion" data-accordion>
    <dd><a href="#panel1"><i class="fa fa-plus"></i><i class="fa fa-minus"></i> References</a>
        <div id="panel1" class="content">
            <!-- CONTENT -->
        </div>
    </dd>
</dl>

CSS:

.accordion .fa-plus{
  display:inline;
}
.accordion .fa-minus{
  display:none;
}
.accordion .active .fa-plus{
  display:none;
}
.accordion .active .fa-minus{
  display:inline;
}

There may be a better way to write this but this works well for me.

You commented on Paul Elphick's post over 4 years

In the latest version (5.2.1 as of this writing) what Rafi mentioned is a bit different. If you can search the CSS and find any reference to topbar as Rafi mentioned and change the value for those it works. I didn't need to add an extra line, just change what is in the CSS.

You commented on Lynda Spangler's post over 4 years

I looked at it again and by chance I did find the solution!

It is this line of CSS:

.top-bar-section ul li:hover > a {
    background: #272727;
    color: white;
}

My CSS was overriding the background but not the color. By overriding the color the background stays transparent as I intended but the text doesn't disappear now. =>

You commented on Atul Nar's post over 4 years

I would assume it is the JS that is causing the problem. Question: For the second nav why not use a sub nav or another nav type rather than a topbar nav?

You commented on Rafi Benkual's post over 4 years

I have used Akismet on a project and it was catching most spam but was still letting some through. Even with Akismet I would still see all of the spam comments in the backend. I then implemented a solution that isn't full proof but when combined with Akismet took my spam to 0.

What I did was integrate a simple javascript solution as I found many spambots don't execute javascript.

I placed the action URL in a data-attribute and leave the action URL blank. Then on clicking submit or reply I would run a simple JS function that would take the data-attribute and make it the action URL then submit the form. Amazingly it took my spam from 50 - 100 comments a day to 0! I was shocked that it worked so well.

I may receive a couple spam comments a month now and those are human spammers which Akismet quickly filters out.

Just a thought. =>

Posts Followed


Following

  • No Content

Followers

  • No Content