I'm using Rails 4 with Foundation but I have the impression that Foundation is not working correctly.
The typeface is not Helvetica and then I added some buttonclasses and the button just stays the same...
Here is the code for the button:
<%= button_to 'Neue Provision', new_provision_path, class: 'button success radius large' %><br>
Any ideas what I should check or look for?
Rails 4.0 removed the assets group from Gemfile.
Run:
rails g foundation:install
Which should automatically correctly configure your app.
If not you can manually configure like so:
Add:
/*= require foundation */
to your main css file or add to your main .js file:
//= require foundation
$(document).foundation();
Another issue can be that you're either overriding your foundation.css with custom styles or you simply don't have the foundation.css file. Remember that stylesheets are read top to bottom and the styles appearing later will take precedence.
As per the Foundation Docs.
Related
In Drupal 8 -- I want to modify the basic-page content type to be able to support an "accordion field type"
I've seen the list field type - that can have unlimited fields -- but I am looking for a solution that can feature -- header/body - type features.
Drupal core sets you up well for your need--as it does several common UI requirements like accordions. You can reuse existing core assets pretty easily, and if this route meets your requirements, you'll get some admirable maintenance benefits from the fact that core gets more attention from the Drupal community than any given contrib module.
Two ways core could help:
you can invoke the jQuery UI Accordion that ships with core.
you can pattern something on the Toolbar Menu, which "Builds a nested accordion widget".
If the first option looks promising, the Examples module gives an example for how to use the core jQuery assets, specifically focusing on the accordion UI. (That's called serendipity incarnate!) Here's the javascript code:
(function ($) {
'use strict';
$(function () {
$('#accordion').accordion();
});
})(jQuery);
and here's the module code:
function js_example_theme() {
return [
'js_example_accordion' => [
'template' => 'accordion',
'variables' => ['title' => NULL],
],
];
}
Couldn't be easier. Note that if a custom module is less suited than adding the feature in your theme, you have either option available.
There is no module to handle this for you, the solution is to create unlimited Entity Reference in your content type, it must have two fields, Title and Body as you want, and to convert it to accordions you should customize new entity field theme and implement accordion there.
Another solution is, handle it by https://www.drupal.org/project/views_bootstrap which support accordion or https://www.drupal.org/project/faqfield module :
Features:
Configurable default text formats
Configurable answer widget
Types: Normal textareas, textfields and formatable textareas
Formatable textareas for any Wysiwyg editor
Configurable number of rows for textarea widget
Field formatters
jQuery Accordion UI
Simple themeable text
Definition list (HTML <dl>)
Anchor link list
Accordion display options
Choose first active question
Collapse open questions
Event to open/collapse questions (eg. mouseover, click)
I have used Owl Carousel in my footer. The carousel works fine in most pages like Home, Products, etc. but doesn't work in some pages like Register, Affialiate, Information pages, etc.
I checked console and i got the error:
Uncaught TypeError: $(...).owlCarousel is not a function
Figured out the js and css for carousel are not included in header for those pages.
I know about getScripts() and getStyles() functions of document.php that are called in header.php. How do I get the js and css available for all the pages of my website? I can hardcode it but is there any other way around?
Open:
catalog/controller/common/footer.php
add:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');
this will add owl carousel files to all pages.
I have deployed my first page in Sitecore. But it is not rendered perfectly in Content editor preview mode.
Original html:
There is a nav menu and a banner below it. Behind them is a white transparent overlay & behind the overlay is a graffiti background image.
View from Experience editor:
The settings icon went offset. The white overlay is now above the Sitecore menu preventing the edits.
Error in browser console:
Uncaught TypeError: element.dispatchEvent is
not a function - prototype.js:5734
Uncaught TypeError:
element.attachEvent is not a function - prototype.js:5653
View in Content Editor:
It is rendered as if for a tablet, as you see the menu got shifted to the icon. I understand, it is because of the dimensions of the preview panel.
But, if this is the case, how will an author be able to edit/view the correct design.
Prototype.js is not a file being used by the site. So, it must be from Sitecore's.
Im guessing , certain CSS props, aren't being respected (Like position, transformnation).
Is this a bug. How to fix this. I have checked in different browsers (IE, chrome & firefox). It's the same
It looks like you are running into a conflict with prototype.js. Sitecore uses this in the experience editor.
If you are using jQuery in your site, there is a kb article about that here: https://kb.sitecore.net/articles/286042
To fix the issue, you need to run jQuery in no conflict mode. There are a few ways of doing that. Here is a simple example:
<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.
$j(document).ready(function() {
$j( "div" ).hide();
});
// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function() {
var mainDiv = $( "main" );
}
</script>
You can find more on the jQuery website: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
You also need to be careful with your CSS - don't absolutely position elements to the top of your browser, always make sure they are relative to a container so that the Sitecore EE DOM elements can be added and positioned correctly.
On my Joomla 2.5 site, I set up a menu with Maximenu CK. I have the plugin Maximenu params, too, for easy styling. I am using the blank theme for a horizontal menu.
Problem: I wasn't able to apply a custom Google font though. More specifically: which css to change?
I tried to track down the location with Firebug, but found that the font-definition was inline in my main html. I guess this is done with php and include, but don't know where to look further.
I have never worked with Google custom fonts but this is how I was able to change Maximenu CK's font family to a usual font like Palatino, Arial or Tahoma:
From Joomla root directory I navigated to modules/mod_maximenuck/themes/blank/css which I assume is the directory containing blank theme's styling files.
Within the css directory, I found the following files: ie7.css, index.html,maximenuhck.php, maximenuhck_rtl.php, maximenuvck.php, moo_maximenuhck.css, moo_maximenuhck_rtl.css and moo_maximenuvck.css.
I was able to change menu font by updating maximenuhck.php
Here is the portion of code to which I added my preferred font family (starts at line 12):
/* menu */
div#<?php echo $id; ?> {
font-size:14px;
line-height:21px;
text-align:left;
}
I hope this is helpful.
One way to do it would be to treat this the same as for any other text on the page which you wish to style.
In the head of your template bring in the font file, e.g.
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
Using firebug check the class of menu and target anchor tags inside that menu with CSS which you add to your site CSS file, e.g.
.maximenuCKH a{
font-family: 'Open Sans Condensed', sans-serif;
}
You might have to tweak the selector to suit your needs, but this will hopefully get you started.
The template is here:
http://foundation.zurb.com/page-templates4/marketing.html
I downloaded this template and one by one downloaded foundation.css, normalize.css and the custom.modernizr,js
The top bar seems to work fine.
I ran updates on the zurb-foundation and compass gems and created a new compass project.
Now when I take that working template and move it into the fresh compass project, update all the paths and change the linked stylesheet from foundation.css to app.css, the dropdowns no longer work on the expanded top-bar.
I have made no edits to any scss or css code. The only edit is changing the link from foundation.css to app.css. These should be the same right?
My workaround is to include both foundation.css and app.css, but this seems like a lot of unnecessary duplication - and it's making it very difficult to tweak the styling.
The files can be viewed at:
http://www.t4dev.com.php53-3.dfw1-2.websitetestlink.com/transparency/
Your should use the right markup or the js won't work.
Look at the docs http://foundation.zurb.com/docs/components/top-bar.html and use the sample markup to test if it works.
The template you showed uses a valid markup for the top bar.
Hope that helps :)