2013-05-12 6 views
0

У меня есть проект, который требует zurb css css и dhtml scheduler, а css не играет очень красиво.CSS zurb foundation и dhtmlx

В частности, есть две проблемы.

Ежемесячный календарь несбалансирован из-за того, что .56em .62em дополняет таблицу.

style conflict

Немного более сложным является назначение на каландр. это то, на что он похож. обратите внимание на отверстие в боковом меню.

the issue

стили по умолчанию, которые являются проблемой.

styles as they are by default

И мне нужно, чтобы удалить их, чтобы правильно отобразить страницу.

enter image description here

Мы используем версию SCSS фундамента, но я не очень хорошо знаком с его возможностями и элементы управления DHTMLX не использовать его.

Итак, мой основной вопрос: как изменить эти стили с наименьшим количеством воздействия на фундамент или dhtml?

Я уверен, что я мог бы использовать java-скрипт, но я думаю, что это было бы болью, поскольку изменения календаря должны были найти все элементы, чтобы применить стили снова, и я действительно прыгаю, есть отличный трюк css. =)

Спасибо!

******* *********** РЕДАКТИРОВАТЬ

Вопрос стол был быстро фиксируется для хрома и IE, добавив еще один таблицу стилей после основания, чтобы переопределить конфликтующие стили. Короткие и простые.

<style type="text/css" media="screen"> 
    #scheduler_here table tr td, #scheduler_here table tr th 
    { 
     padding: 0; 
    } 
    #scheduler_here *, #scheduler_here *:before, #scheduler_here *,after { 
     box-sizing: content-box; 
     -webkit-box-sizing: content-box; 
    } 
    </style> 
+0

Я должен добавить, что я ищу решение, чтобы влиять только это одна страница или даже часть страницы. – William

ответ

0

Если вы используете Foundation 4 (F4) вы можете выбрать, какие части фундамента CSS генерируются Compass/Сасс. Не забудьте запустить компас после внесения изменений.

редактировать -> пререкаться/app.scss

// Global Foundation Settings 
@import "settings"; 

// Comment out this import if you are customizing you imports below 
// @import "foundation"; 

// Import specific parts of Foundation by commenting the import "foundation" 
// and uncommenting what you want below. You must uncomment the following if customizing 

@import "foundation/components/global"; // *always required 
@import "foundation/components/grid"; 
@import "foundation/components/visibility"; 
@import "foundation/components/block-grid"; 
@import "foundation/components/type"; 
@import "foundation/components/buttons"; 
@import "foundation/components/forms"; // *requires components/buttons 
@import "foundation/components/custom-forms"; // *requires components/buttons, components/forms 
@import "foundation/components/button-groups"; // *requires components/buttons 
@import "foundation/components/dropdown-buttons"; // *requires components/buttons 
@import "foundation/components/split-buttons"; // *requires components/buttons 
@import "foundation/components/flex-video"; 
@import "foundation/components/section"; 
@import "foundation/components/top-bar"; // *requires components/grid 
@import "foundation/components/orbit"; 
@import "foundation/components/reveal"; 
@import "foundation/components/joyride"; 
@import "foundation/components/clearing"; 
@import "foundation/components/alert-boxes"; 
@import "foundation/components/breadcrumbs"; 
@import "foundation/components/keystrokes"; 
@import "foundation/components/labels"; 
@import "foundation/components/inline-lists"; 
@import "foundation/components/pagination"; 
@import "foundation/components/panels"; 
@import "foundation/components/pricing-tables"; 
@import "foundation/components/progress-bars"; 
@import "foundation/components/side-nav"; 
@import "foundation/components/sub-nav"; 
@import "foundation/components/switch"; 
@import "foundation/components/magellan"; 
// @import "foundation/components/tables"; // prevent Table CSS from loading 
@import "foundation/components/thumbs"; 
@import "foundation/components/tooltips"; 
@import "foundation/components/dropdown"; 

Другой вариант, если вы знаете, как вы хотели бы, чтобы изменить отступы, границы и т.д., чтобы соответствовать ваши другие элементы включены в можно редактировать _settings.scss, строки 1064-1097, где у него есть переменные для таблиц. Я показываю переменные здесь немодифицированные, чтобы проиллюстрировать, что можно изменить.

// 
// Table Variables 
// 

//// Background color for the table and even rows 

// $table-bg: #fff; 
// $table-even-row-bg: #f9f9f9; 

//// Table cell border style 

// $table-border-style: solid; 
// $table-border-size: 1px; 
// $table-border-color: #ddd; 

//// Table head styles 

// $table-head-bg: #f5f5f5; 
// $table-head-font-size: emCalc(14px); 
// $table-head-font-color: #222; 
// $table-head-font-weight: bold; 
// $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px); 

//// Row padding and font styles 

// $table-row-padding: emCalc(9px) emCalc(10px); 
// $table-row-font-size: emCalc(14px); 
// $table-row-font-color: #222; 
// $table-line-height: emCalc(18px); 

//// Display and margin of tables 

// $table-display: table-cell; 
// $table-margin-bottom: emCalc(20px); 

Если у вас есть время и хотите пойти еще дальше, вы можете вытащить фундамент/компоненты/файл tables.scss в локальный проект, изменить его, как вам нравится и ссылка на модифицированную версию, как описано выше.Вы можете найти исходные файлы, запустив gem which zurb-foundation я установил с rvm так что я получаю что-то вроде ~/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-4.1.5/lib/zurb-foundation.rb из каталога zurb-foundation-4.1.5 файл находится в scss/foundation/components и называется _tables.scss

+0

Я действительно не хотел менять фундамент для каждой страницы. Можете ли вы переопределить scss на странице с переменными? – William

+0

Почему бы просто не дублировать 'app.scss' что-то вроде' page-specific.scss', внесите в него свои изменения и измените ссылку css на своей конкретной странице? Вы потеряете преимущество кэширования CSS, но в вашей ситуации это может быть проще реализовать. – JAMESSTONEco

+0

Справа я могу добавить еще один css-файл с теми стилями, которые были скорректированы после стилей фундамента, и в основном исправляет его на странице. =) – William

Смежные вопросы