I have written a confluence macro. It uses velocity to generate html table. How can I style this markup with css if I don't use <html> and <head> tags in my velocity model. I have tried to do as in this example but id doesn't work(I mean it takes no effect and there is no css resource file that I have specified inclusion on the code of result page of macro)
if i understand you correctly
you need to add links on your css files to atlasian-plugin.xml for example
<atlassian-plugin name='Just name' key='com.your.path.to.lib'
plugins-version="2">
<resource type="download" name="style.css" location="css/style.css">
<property key="content-type" value="text/css"/>
</resource>
</atlassian-plugin>
after that you need to add this link to the top of your velocity template
<link rel="stylesheet" href="$req.contextPath/com.your.path.to.lib/style.css"
type="text/css"/>
Related
The issue is CSS Does not effect on website after bundle although all of bundle process is fine
From the view source code page i can see the css file but it does not take any effect on website. The code bellow is what i used to call css and saw from view source code page and from my layout file.
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
Does anyone have any idea for this?
Thank you.
You used
External Style Sheet
With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:
your code
<link rel="stylesheet" type="text/css" src="/Content/css?v2">
try like ths
src should change to href
<head>
<link rel="stylesheet" type="text/css" href="/path/yourcssfilename.css">
</head>
Meteor compiles the css files into one css file and inserts it as first child of head element in html.
<head>
<!-- meteor inserts my concatenated css file from client folder here -->
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
</head>
I don't want to create a package for the theme assets I am using. I just want to use them directly in the html like above and I want to develop my css in the client folder with a preprocessor.
How can I get meteor to inject the generated css as last element of head rather than first which is default?
Thanks
EDIT:
To clarify further, I want meteor to inject the compiled css as shown below. I could manipulate the DOM and move that link after DOM is ready but it's a hack. Is there an API to configure this?
<head>
<title>page</title>
<link href="/sometheme/theme.css" rel="stylesheet">
<!-- other css files here -->
<!-- I WANT METEOR TO INJECT COMPILED CSS HERE -->
<link rel="stylesheet" type="text/css" class="__meteor-css__" href="/main.css?da39a3ee5e6b4b0d3255bfef95601890afd80709">
</head>
You can use #import url; declaration on top of your css file.
main.css
#import '/sometheme/theme.css';
body {
}
This will load /public/sometheme/theme.css before your css
Just place your css theme and meteor will concatenate it into existing css. Meteor have a special way with file order:
HTML template files are always loaded before everything else
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
To achieve your goal, just make sure you the your css is deeper than the theme folder and be aware with the alphabetical ordering
Edit:
If you want to load file from /public, just place <head></head> in one of html file (e.g.: app.html) and reference your stylesheet there.
app.html:
<head>
<link href="/sometheme/theme.css" rel="stylesheet">
</head>
It will refer /public/sometheme/theme.css
I have an ASP.NET MVC 3 project with a _Layout.cshtml and the css style sheet being accessed like this:
link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css"
This is fine for most of the views in my project but there is just one view that I would like to define the style sheet independently and in the view itself. Specifically in the head of the view. This means that the view would have to have it's own head and body tags independently of the _Layout.cshtml file.
Is this possible? If so can someone help me get started with it?
EDIT:
What I'm trying to do is put a style sheet in the head of this one view that would override the CSS from the _Layout.cshtml.
You could define an optional Razor Section in the head tag of your layout. Place it after your main stylesheet, and then it can be used in any views using the layout to bring in additional stylesheets that contain override rules.
_Layout.cshtml
<head>
<link href="../../Content/themes/base/jquery.ui.all.css" rel="Stylesheet" type="text/css">
#RenderSection("CssOverrides", false)
</head>
View.cshtml
#section CssOverrides {
<link href="../../Content/themes/base/jquery.ui.override.css" rel="Stylesheet" type="text/css">
<!-- additional stylesheets -->
}
I'm rather new to this so its mostly (copy and paste) with a little YouTube and reading materials here and there.
Why have both? Please simplify you answer, don't go so technical.
<style type="text/css"> is when you want to have style rules embedded within the page.
<link rel="stylesheet" href="path/to/style.css" /> is when you have a separate stylesheet file that you want to reference in the current page - doing this means that clients don't have to download the CSS every time, which makes page-loads faster.
CSS has the #import directive, if you use <style>#import style.css;</style> then it's roughly equivalent to <link rel="stylesheet" href="style.css" /> (but with some minor differences: see Difference between #import and link in CSS ).
Method 1 (using <style type="text/css">)
Is simple way to declare CSS. But it should be used for small codes. When you want to overwrite an attribute of the main stylesheet.
Method 2 (using <link rel="stylesheet" href="path/to/style.css" />)
The first advantage of this method is that, we have a style in an external file. And that means that we can use it repeatedly. But this is not the end of the advantages. You can tell your browser to save the file in the cache. Which reduces page load time.
What is better?
In my opinion Method 2.
Using <style type="text/css"> is for CSS code in your HTML file and <link...> is for including an external CSS file.
The first case <style type="text/css"> is for including css definitions in your html file. The 2nd case puts the css definintions in style.css (or whatever file is the href). The 2nd case makes it easy to use the same css across multiple html files.
The first is used to insert css code directly in your html files, while the second is calling an external css file.
Is it possible to add a conditional style sheet to an xpage.
Done like this in html:
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Though about adding with computed field set to HTML and code javascript like:
return '<!--[if lt IE 8]><link rel=\"stylesheet\" href=\"../../blueprint/ie.css\" type=\"text/css\" media=\"screen, projection\"><![endif]-->'
but then it would be included in the body of page, not the header with the other style sheets.
Need for a proof of concept putting together using http://blueprintcss.org.
an Xpage theme would be great for this. There is an example included with the notes install.
go to C:\ Notes directory \xsp\nsf\themes
make a copy of webStandard.theme, rename is webStandard.xml and open in an editor of your choice, this will show you a lot of examples of what a theme can do. Apply attributes, add resources, compute these via expressions etc.
Snippet:
<resource rendered="#{javascript:context.isDirectionRTL()}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/webstandard/xspRTL.css</href>
</resource>
<!-- IE Specific -->
<resource rendered="#{javascript:context.getUserAgent().isIE(0,6)}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/webstandard/xspIE06.css</href>
</resource>
<resource rendered="#{javascript:context.getUserAgent().isIE(7,8)}">
<content-type>text/css</content-type>
<href>/.ibmxspres/global/theme/webstandard/xspIE78.css</href>
</resource>
You can use the rendered property with SSJS to show an element for IE only:
rendered="#{javascript:context.getUserAgent().isIE()}"
Then your CSS ressource will only added to the generated HTML response if a XPage is opened with Internet Explorer.
EDIT:
In your case this should fit your requirements:
<xp:this.resources>
<xp:styleSheet href="../../blueprint/ie.css"
rendered="#{javascript:context.getUserAgent().isIE(0,7)}"
media="screen, projection">
</xp:styleSheet>
</xp:this.resources>