изменить цвет фона Макет - Vaadin

в одном из моих приложений, я создал колонтитула:изменить цвет фона Макет - Vaadin

public Footer(){ 
     hl.setHeight("120px"); 
     hl.setWidth("100%"); 
     hl.setMargin(true); 
     hl.setSpacing(true); 

    VerticalLayout contact = new VerticalLayout(); 
    Label contact_title = new Label("Contact"); 
    Label mail = new Label("<a href='mailto:[email protected]'>Par email</a>",ContentMode.HTML); 

    contact.addComponents(contact_title,mail); 


    hl.addComponent(contact);    
}

где hl = new HorizontalLayout();

Эта сноска включена в моей главной странице (AbsoluteLayout). Но проблема в том, что я не вижу разницы между моим основным содержанием и нижним колонтитулом, главным образом потому, что это тот же цвет фона. Я хотел изменить фоновый цвет нижнего колонтитула Цвет, вот как я пытался:

добавив hl.addStyleName("backColorGrey"); в код и .backColorGrey {background-color: #ACACAC} в мою тему .scss, я пробовал то же самое с .v- horizontallayout-backColorGrey как имя класса в css.

Я также попытался с JavaScript.getCurrent().execute("$('.backColorGrey').css('background-color', 'grey')");

, но ничего не делать, цвет остается неизменным, он никогда не изменял.

, чтобы попробовать javascript, я попытался сделать предупреждение: JavaScript.getCurrent().execute("alert('Hi SO!')");, но это не сработало, и мне интересно, почему.

Итак, как я могу изменить цвет фона hl?

источник

2015-01-17 Supamiu

вы должны проверить с помощью инструмента, такого как firebug (или любого другого браузера, который, скорее всего,), что цвет не перезаписывается более точным правилом CSS. Первый индикатор для этого будет объявлять ваш цвет фона в вашем css '! Important'. если это не поможет, вам нужно проверить этот инструмент, что там происходит. без полного примера вряд ли можно помочь. вы css там выглядят нормально на первый взгляд (первый, второй - horlayout (который, по крайней мере, в предоставленном коде отсутствует) – cfrick

, возможно, не стоит забывать, но вам нужно скомпилировать свою тему для .scss изменения файлов появятся на вашей стороне клиента.Кроме того, предупреждение должно работать, вы также можете найти ключ к этому, используя Firefox Firebug или IE или инструменты разработки Chrome, как предложено @cfrick – geert3

Помог ли мой андер вам вообще? –

Похоже, что вы на правильном пути. Я заметил, что в вашем css вы не закончили фоновый цвет с помощью двоеточия. (Возможно, это была ошибка ввода).

Возможно, ваша тема не компилируется правильно. Убедитесь, что вы включили определение mixin в свою тему.

Vaadin ...

Footer footer = new Footer(); 
footer.addStyleName("backColorGrey");

SCSS ....

@import "../reindeer/reindeer.scss"; 

@mixin mytheme{ 

    @include reindeer; 

     .backColorGrey{ 
      background-color:#ACACAC; 
     } 

}

Вы используете Maven/Gradle/плющ? Вам может понадобиться добавить Sass компилятор в вашем pom.xml см VAADIN cannot find themes when in productionMode

Также убедитесь, что вы не в режиме производства ...

Когда приложение Vaadin находится в режиме разработки, он автоматически компилируется SCSS -> CSS при запросе styles.css и файл не существует. В режиме производства этого не происходит. Если styles.css существует, независимо от режима, файл используется и нет SCSS -> сборка CSS

источник

2015-04-23 14:49:13

изменить цвет фона Макет - Vaadin

ответ

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