As a newbie,I study Yii two weeks.At the time,I have a question：
we all know,Yii provide a CHtml class,so we can create the view rapidly and convinently.
but how can I customize the style if I do not want to use the defalut style?
Depends what you mean by default style.
If you want to add extra html options you can use the optional $htmlOptions param in CHtml functions.
Eg to add a custom style to a text field you do something like:
echo Chtml::textField('mytextfield', 'defaultvalue', array('style' => 'color: green;'))
Modify the layout file, and insert an external CSS stylesheet.
protected/views/layouts/main.php
<head>
<link rel="stylesheet" type="text/css"
href="<?= Yii::app()->getBaseUrl(true) ?>/css/stylesheet.css" />
Related
I am trying to decorate my background of my website I am building and for some reason I can put one or the other by themselves work but when I add both lines then only the top one works. How can I make both lines work together.
<body style=background-color:powderblue>
<body style=border-style:solid;border-color:red>
You can only have one <body> tag.
<body style="background-color:powderblue;border-style:solid;border-color:red">
Combine the styles into one, or move the styles to a css file or <style> block in your <head>
body {
background-color:powderblue;
border-style:solid;
border-color:red
}
Just adding a className to a tag doesn't help
<p className="ms-font-m">
sometext
</p>
doesn't change the font
https://developer.microsoft.com/en-us/fabric#/styles/typography
If you want to use the Fabric Core CSS classes directly, rather than with CSS-in-JS, you'll need to include the CSS on your page following the instructions for getting started with Fabric Core:
Add a reference to the stylesheet in the <head> of your page. Simplest way is to use the copy on Microsoft's CDN (grab the URL directly from the docs linked above to get the latest version):
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css">
Add the ms-Fabric class to a containing element, such as <body>, to set the font-family. Then you can use the other classes to set sizes and colors:
<body class="ms-Fabric">
<span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
</body>
Not exactly what' I was looking for but here is one way to do it:
https://github.com/OfficeDev/office-ui-fabric-react/blob/86337324a5fd8b522855eb8bdcbf012a868a26ba/packages/styling/README.md#using-fabric-core-classes
import {
ColorClassNames,
FontClassNames
} from '#uifabric/styling';
function renderHtml() {
return (
`<div class="${ [
ColorClassNames.themePrimary,
FontClassNamed.medium
].join(' ') }">Hello world!</div>`
);
}
my understanding per https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styling-best-practices is that I need to use getTheme() and styles (not style) prop function for the new way of doing styling. So I'm still looking for a getTheme() solution
==============
here is the list of available fonts
https://github.com/OfficeDev/office-ui-fabric-react/blob/1b9405b3b64839975e16ee1fad04d7868d9e3b99/packages/styling/src/styles/fonts.ts
fonts visualized: https://developer.microsoft.com/en-us/fabric#/styles/typography
colors: https://developer.microsoft.com/en-us/fabric#/styles/colors
You can do it by adding the following code when loading theme:
loadTheme({
defaultFontStyle: { fontFamily: 'Comic Sans MS', fontWeight: 'bold' },
.......
This is available since version 7.21.0 of office-ui-fabric-react
These are the urls where you can find the release and report of bug:
https://github.com/microsoft/fluentui/issues/7416
https://github.com/microsoft/fluentui/releases/tag/office-ui-fabric-react_v7.21.0
https://github.com/microsoft/fluentui/pull/9981
I fetch google custom search result in a iframe and displayed the result on my website.
<iframe
id='result'
src='" . $strURL . "'
width='102%' height='1420px'
style='border:none' border='0'>
</iframe>
Now, I want to change the css of google result, like margin between results, take pagination to top instead bottom, change pagination css style.
Here is my site link: http://technovinity.com/demo/gse/
It's fairly common to add CSS styles to match the google custom tags.
For example:
<style type="text/css">
.gs-title { background:red; }
</style>
I have a play application (Play 1.2.4). In each page in my application I want to have access to the logged in user (using groovy). So I can perform permission check etc. I tried to put this in the main template just before the doLayout
#{set user:user/}
I can have access to the user in the main page of my application, but when going through links to other pages I can no longer have access to the user variable.
I think you had misunderstanding about using #{set} and #{get} tag on Play!Framework. Look at the documentation on #{set} and #{get} tag.
I give you example, you have three templates like follows:
main.html
<html>
<head>
<title>#{get 'title' /}</title>
</head>
<body>
#{doLayout /}
</body>
</html>
template1.html
#{extends 'main.html' /}
#{set title:header /}
<p>This is template1.html page</p>
template2.html
#{extends 'main.html' /}
#{set title:header /}
<p>This is template2.html page</p>
And the methods on controllers like these:
public static void template1() {
String header = "Template 1 Title"
render(header);
}
public static void template2() {
render();
}
This is the explanation, when you render template1.html, you may notice that we are set the page title (by using header variable) in template1.html. The title that we set, is retrieved on main.html by using #{get} on main.html.
Then look when you render template2.html, you may notice we are set the page title too. But the difference is in the controllers (on template2() method), you have not passed header variable value to the template. So, although you have set the title, the title have null value and the implication the title was not set when you render template2.html.
So, for your problem, I think when you insist to place #{set user:user /} on template and want to access user variable, you must pass the user variable on all controller methods before rendering the template. Ugh.. It's so inefficient!
Suggestion
I suggest you that you may use session to store the user data like userid, because it is accessible in all your application templates! Please look at the documentation here.
Hope this can make you understand the mechanism and will so
With StringTemplate, what is the proper way to have a standard layout template such as:
<head>
..
</head>
<html>
$body()$
</html>
Where I can set the body template from my application, so that every template I use uses this fundamental layout?
Thanks.
I found it hiding in the documentation:
http://www.antlr.org/wiki/display/ST/StringTemplate+2.2+Documentation
"Include template whose name is
computed via expr. The argument-list
is a list of attribute assignments
where each assignment is of the form
attribute=expr. Example
$(whichFormat)()$ looks up
whichFormat's value and uses that as
template name. Can also apply an
indirect template to an attribute."
So my main layout template now looks like this:
<head>
<title>Sportello</title>
</head>
<html lang="en-US">
<body>
$partials/header()$
<section>$(body_template)()$</section>
$partials/footer()$
</body>
</html>
...to which I pass the subtemplate's name as an attribute.