I try to change the color of the font in just one section because I added a background picture and you cant read the white otherwise:
<section data-background="media/imagename.jpg">
<h2>blablabla</h2>
</section>
What should I add here to make "blablabla" look black?
Thanks!
Lala
It's more simple than you can think :
Inline Editing
<section data-background="media/imagename.jpg" *style="color:black"*>
<h2>blablabla</h2>
</section>
or, 2nd option with a .css file
<section id="namediv" data-background="media/imagename.jpg">
<h2>blablabla</h2>
</section>
.css:
#namediv
{
color:black
}
remember to include the .css file in your html/page. The first one is more fast but very rough to see and to use, the second one is more structured.
Remember that you have to adjust the font color based on your background image (blue background white color font etc.etc.)
Additionally, here is an example on how to change font colour when you use markdown for slides
<section data-markdown>
<script type="text/template">
<!-- .slide: style="color:white" -->
your text in markdown goes here...
_Doing is the best form of Saying_
</script>
</section>
The simplest way to do do this is with an inline style attribute, but you need to set it directly on the h2 element to override the theme, i.e. like this:
<section data-background="media/imagename.jpg" >
<h2 style="color:black">blablabla</h2>
</section>
Related
Can't figure out a way around this...
I have a header (H1 tag) whose value is dependent on a variable. This header also has an icon in it. The following code displays the header text, but the icon is gone. I can understand why... the th:text is replacing everything in the tag. Is there a way to keep the icon and have a dynamic header?
Here is the code:
<h1 class="ui header" th:text="${'Widget ' +widget.id}"><i class=" ui grey cog icon"></i>Default Text</h1>
If I remove the th:text="${'Widget ' +widget.id}" piece the icon comes back.
Any thoughts?
Thanks, Keith
The th:text attribute will replace everything in the body of the <h1> tag.
You can put the text in a separate <span> instead:
<h1 class="ui header"><span th:text="${'Widget ' +widget.id}"></span><i class=" ui grey cog icon"></i>Default Text</h1>
I have the following for a polymer web application. The whole page scrolls. I would like for the contents of and to scroll independently. foo has a longer view and bar is generally able to fit in the page with maybe a little vertical scrolling.
How do I make the two contents of vaadin-split-layout scroll independently vertically?
<app-drawer-layout fullbleed force-narrow>
<app-drawer slot="drawer">
<app-toolbar>
<div main-title>Models</div>
</app-toolbar>
<section>
<div style="margin-bottom:90px;width:100%;"></div>
</section>
</app-drawer>
<app-header-layout>
<app-header slot="header" fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<iron-icon id="logo" src="icon.svg"></iron-icon>
<div main-title>Spliter Sample</div>
</app-toolbar>
</app-header>
<section>
<vaadin-split-layout orientation="horizontal">
<foo></foo>
<bar></bar>
</vaadin-split-layout>
</section>
</app-header-layout>
</app-drawer-layout>
Thank you for any advice.
You can style the panels of a vaadin-split-layout as any other div as the panels are in the light DOM as you can see when inspecting their examples.
Thus give them an explicit height and an overflow:auto or overflow-y:auto; to enable scrolling. The style rules be placed in your usual CSS.
With Reveal.js, I would like to use flexbox and/or grids to layout slides. Unfortunately, it seems Reveal.js always overrides the display property of section tags with block as part of its slide show/hide logic. Viz:
<section class="mylayout">
<div>...</div>
<div>...</div>
</section>
section.mylayout {
display: flex;
}
Has no effect, because Reveal.js adds a style="display: block" attribute to the section tag.
Is there any way around this? It works to put a nested div inside the section and have that be grid/flex, but it just feels clunky and gross to have an extra layer in there that adds no other value than a workaround.
Has anyone else found a different way to address it?
You can set it to use flexbox in the initialization settings now. See this update on the documentation.
Can I use angular js with three sectioning of the web page for make it responsive by making two sections into dropdown buttons
<body>
<section id="main">
<section id="body">
// data in li
</section>
<aside id="side">
//data with links
</aside>
</section>
</body>
The HTML section tag has no built in behaviour, it just denotes a section of the document, normally with its own heading, where other tags such as article or nav are not appropriate e.g.
<section id="my-section">
<h2>Heading for section</h2>
<p>Some content</p>
</section>
See https://developer.mozilla.org/en/docs/Web/HTML/Element/section
The HTML element represents a standalone section of functionality contained within an HTML document, typically with a heading, which doesn't have a more specific semantic element to represent it.
As an example, a navigation menu should be wrapped in a element, but a list of search results and a map display and its controls don't have specific elements, and could be put inside a .
So for making a responsive layout, using section over div or any other element does not really have any meaning. You must use CSS (e.g. with media queries) or JavaScript to change the layout (FYI, the default for section is display: block).
I want to have an image that stick to the bottom center of the screen. I know I can use <div data-role="footer"> to do it. However the footer has a visible horizontal line on top which I want to get rid off. Any idea how to do it?
The easiest way to do this is to use the built-in jQM footer, which has the data-position="fixed" attribute to make it stick to the bottom. I'm unfamiliar with this horizontal line you say the footer has, but it'll be easy to get rid of just by overriding the default jQM stylesheet. You can view/test-edit the CSS styles using Firebug in Firefox, or the built-in developer tools in any browser.
It should look something like this:
.ui-footer {
/* Use !important to ensure the target style will be overridden! */
border: none !important;
}
And the HTML:
... <!-- rest of page -->
<div data-role="footer" data-id="fixedFooter" data-position="fixed" data-tap-toggle="false">
<img src="path/to/image.png" />
</div>